CSS 기본 문법 & 선택자의 역할

1. CSS 기본 문법

CSS문법은 HTML보다 더 쉽다.

아래 예시처럼 선택자, 속성, 값이 있으며 무엇을 의미하는지 이해하는 것으로 문법은 충분하다.

div{
    font-size : 20px;
    color : red;
}

/*다음과 같이 이해할 수 있다.*/

선택자{
    속성 : 값;
    속성 : 값;
}

 

 

2.선택자의 역할

선택자는 HTML에 스타일(CSS)을 적용하기 위해서 HTML의 특정한 요소를 선택하는 사인이다. 

적용할 스타일을 속성(color)과 값(red, blue)으로 나타내고 적용할 대상(h1, p)을 선택자로 나타낸다.

<div>
  <h1>제목..</h1>
  <p>본문..</p>
</div>

h1 {
    color: red;
  }
  p {
    color: blue;
  }

/*빨강 글자색(CSS, color: red;)을 저기 제목(HTML, <h1></h1>)에 적용하겠어!”
, “파랑 글자색(CSS, color: blue;)은 여기 본문(HTML, <p></p>)에 적용하겠어!”*/