CSS 기초 문법 2가지 구문만 알면 오케이~

CSS 구문구성

지난 'CSS가 없던 시절의 문제' 글에 이어서 이번 글에서는 CSS가 어떻게 구성이 되는지 알아보자.

CSS의 규칙은 선택자(Selector)와 선언 블록(declaration block)으로 구성된다.

첫번째 선택자는 HTML의 <DIV>나 <P>태그 같은 스타일을 지정할 HTML 태그나 클래스, ID 등을 가리킨다.

두번째 선언블록은 하나 이상의 선언들 모음을 말하는데, 블록 안의 각 선언들은 세미콜론(;)으로 끝마치거나 구분되고 시작과 끝은 중괄호({ })로 둘러싸여진다.

그럼 이제 선언 블록 안의 각각의 선언들은 어떻게 구성이 되어지는지 알아야 할 것이다. 개별적인 선언(declaration)은 속성(Property)과 값(Value)으로 구성된다. 속성이란건 어떤 요소에 대한 속성을 말한다. 지칭 하는 요소는 태그, 클래스, id등이 되는것이고. 그러니까 위의 이미지를 예로 들면 h1 태그의 컬러 속성에 대한 값을 빨강으로 한다는 뜻이된다. 그리고 각각의 속성과 값의 구분은 콜론(:)으로 구분 된다. 

위 예제에서는 <h1> 태그 요소의 글자 색상은 빨간색으로 하고 글자 크기는 10으로 표시하라는 뜻이된다.

정리

CSS는 선택자와 선언모음으로 구성이되고 각 선언들은 속성과 값으로 구성된다.