CSS, Html은 코딩을 시작하시는 분들이라면 한 번쯤은 들어보셨을 것입니다. 이것을 이해하고 있다면 웹 개발, 크롤링 등 다양한 분야에 사용되기에 코딩의 시작이라고 볼 만큼 중요한데요. CSS를 Html에 어떻게 적용하는지 코드를 통해 확인해 보시죠.
CSS, Html 차이?
Html이란?
웹사이트 구조를 표시하기 위한 언어로 여러 태그들로 구성되어 있습니다.
태그의 기본 구조를 살펴보시죠.
<태그이름>내용</태그이름>
<h1>제목이 표시 되는 곳이죠.</h1>
또한, 태그는 div라는 영역으로 묶어서 표시하기도 하는데요. div예시와 속성의 예시를 함께 보시죠.
# 태그 영역
<div>
<h1>제목</h1>
<p>본문</p>
</div>
# 태그의 속성
<태그이름 속성명 = "속성값">내용</태그이름>
<a href="https://www.naver.com">네이버</a>
<img src="body.png">
<div id="article">
<div class="_nontype">이외에도 이미지를 뜻하는 img, 글자를 의미하는 span, 제목을 의미하는 h1-h6, table, ul, ol 등의 태그가 존재합니다.
CSS란?
웹사이트 스타일을 적용하기 위한 언어로, 글자 색, 폰트 크기 등을 변경할 수 있습니다. 따라서 기본적인 Html에 CSS를 적용하여 더욱 가시적으로 보일 수 있겠습니다.
# CSS 기본문법
선택자 {속성명 : 속성값; 속성명:속성값;}
h1 {color : red; font-size:30px;}
선택자는 디자인을 할 때 HTML 태그를 선택하는 것을 의미합니다. 어떤 div(영역)을 선택하고 디자인을 바꿀지 찾아주는 과정이 되겠습니다. 선택자는 태그 선택자, id 선택자, class 선택자, 자식 선택자로 구분되는데요.
태그 선택자
# 선택자 h1
<h1>CSS란?</h1>
# 선택자 a
<a href="https://www.naver.com/>네이버</a>이러한 방식으로 태그 선택자를 이용하여 원하는 부분의 디자인을 변경해 줄 수 있겠습니다.
id 선택자
# 선택자 u_skip
<div id="u_skip">
내용
</div>id 선택자는 #을 선택하여 불러올 수 있습니다. 이것만 알고 계신다면 크롤링, 웹개발에 필요한 id 선택자에 대한 지식은 습득했다고 보실 수 있겠습니다. id 선택자는 유일하게 적용될 것 같은 스타일에 적용해야겠다 싶을 때 id 선택자를 사용하는 것이 효과적이겠습니다.
Class 선택자
# 선택자 vsc-initialized
<div class="vsc-initialized">
이니셜
</div>Class 선택자는 Html에서 조회할 때. 을 붙이며, id 선택자와 달리, 한 페이지 내에서 반복이 일어날 때 클래스 선택자를 사용하는 것이 좋습니다.
자식 선택자
# 선택자 .logo_sports > span
<div class="logo_sports">
<span>스포츠</span>
</div>
# 선택자 .news_headline > h4
<div class="news_headline">
<h4>제목</h4>
</div>이러한 방식으로 원하는 태그에 별명이 없을 때 사용하게 되고, 바로 아래에 있는 태그를 선택하기 위해 사용합니다.
<div>와 </div> 안에 span이 들여 쓰기 되어있기 때문에 자식 선택자라고 인식할 수 있겠습니다. 이외에도 복합 선택자 등이 있겠습니다. 선택자를 만들고 조합하는 방법은 굉장히 많습니다만, 이번 포스팅에서는 기초적인 선택자들을 다뤄보았습니다.