개요 - CSS의 문법 설명과 주석

 

CSS는 엄격한 문법 규칙을 따른다. 만약 CSS로 작성된 내용을 웹 브라우저가 이해할 수 없는 경우 브라우저는 이를 철저하게 무시한다. 이렇게 하는 이유는 호환성이나 브라우저의 영향에 스타일이 능동적으로 대처하기 위함이다.

 

작성된 문장을 이해할 수 없다면 무시하는 특성은 상위 버전에서 새로운 속성이나 값이 추가되어도 하위 버전에 거의 영향을 미치지 않기 때문에 버전에 따른 영향이나 브라우저의 특성에 스타일이 독립적일 수 있다. 따라서 스타일을 작성할 때는 문법적 규칙을 철저히 지켜 작성해야 한다.

 

 

 

CSS의 문법

 

CSS는 문법은 두 파트로 구분되어 있다. 선택자(selector)와 하나 이상의 선언자(declaration)이다.

 

 

선택자는 스타일 적용을 원하는 HTML 엘레멘트를 나타낸다.

 

각 각의 선언은 속성과 값 한 쌍으로 구성되어 있으며, 속성은 변경하고자 하는 스타일을 나타내며 각 속성은 값을 가지고 있다. 이 때 선언은 대괄호(Curly braces) 안에 작성하며 속성과 값은 콜론(:)으로 구분하고 각 속성은 세미콜론으로 구분한다.

 

또한 값에 여러 가지 단어가 들어간다면 인용구("")를 사용해 값을 감싼다. 이 때 주의할 점이 있는데 속성값을 하나만 사용할 때 인용구로 감싸면 스타일 값을 해석할 수 없다.

 

h2 {font-size:16px}

 

위와 같은 CSS선언은 HTML 문서의 <h2> 엘레멘트의 글자 크기에 스타일을 변경하고 싶어 폰트 사이즈를 16으로 지정한 예이다.

 

 

 

스타일이 적용되지 않는 경우

 

 · 스타일에 사용된 속성이 존재하지 않을 경우(오타로 올바르지 않는 속성을 지정한 경우)

 · 세미콜론(;)으로 각 선언을 종료하지 않는 경우 선언 전체가 무시될 수 있다.

 

이처럼 브라우저가 선택자나 속성을 이해하지 못할 경우 해당 선언 전체를 무시하는 규칙은 버전 간의 호환성을 고려한 부분이다. 선언 자체를 무시함으로써 새로운 선택자, 속성이 추가되더라도 구 버전의 브라우저에 별다른 영향을 주지 않게 된다.

 

 

 

주석

 

주석은 코드를 설명하고자 할 때 사용하며 나중에 소스 코드를 수정할 때 도움을 줄 수 있다. 브라우저는 주석을 무시한다. CSS에서 주석은 "/*" 로 시작해 "*/"로 끝나는 부분이다.  

 

/* CSS의 주석 */
p {
    text-align:center;
    /* 또 다른 주석 */
    color:black;
    font-family:arial;
}