1.2.2. CSS의 기본 구조

1.2.2. CSS의 기본 구조

CSS는 HTML 태그나 클래스에 표현하고 싶은 스타일을 정의한다. 스타일을 지정받게 될 태그나 클래스를 선택자(Selector)라고 하고, 선택자 뒤에 지정할 속성과, 속성의 값을 대괄호{ }로 묶어 표현한다. 

CSS의 구조

하나의 선택자에 여러개의 속성을 정의할 수 있다. 글자 크기, 모양, 색 등 글자 속성, 상하좌우 정렬, 좌우 여백, 들여쓰기, 줄간격, 테두리, 배경색 등 문단 편집에 필요한 속성, 이미지, 동영상, MP3, 에니메이션 등 CSS로 표현할 수 있는 편집 형태는 다양하다.

CSS도 HTML처럼 여백이나 줄간격은 무시된다. 그래서 구조적으로 보기 좋게 편집이 가능하다. 아래 3개의 CSS는 모두 똑같은 스타일이 적용되지만 첫번째 보다 두번째가 알아보기 쉽다. 만약 여러사람이 사용하거나, 제3자가 스타일을 수정할 필요가 있다면 세번째처럼 설명을 추가할 수도 있다. “/*”와 “*/”사이에 있는 내용은 공백처럼 컴퓨터가 무시를 하기 때문에 CSS에 설명을 추가할 때 사용할 수 있다. 

h2 {font-family:"강조글꼴"; font-size: 1.6em; text-align: center; margin-top: 2em;}

속성을 한줄로 나열하게 되면 어떤 속성을 적용했는지 확인하기 어렵다. 속성을 한줄로 나열하기 보다는 아래처럼 한줄씩 줄바꿈을 해서 선택자에 어떤 속성이 적용되었는지 보기 편하게 정리하는 것이 좋다.

h2 {

         font-family:"강조글꼴"; 

         font-size: 1.6em; 

         text-align: center; 

         margin-top: 2em;

}

또한 아래처럼 /*설명*/을 붙여 각 선택자에 어떤 목적으로 속성을 적용했는지를 적어주거나 각 속성에 특이점이 있다면 어떤 특이점이 있는지 등을 설명해 주는 것이 좋다. 설명을 달아 두면 시간이 지나도 CSS를 알아보기 쉽고, 만약 제3자가 수정을 할 일이 생기더라도 처음 책을 편집한 사람의 의도를 쉽게 파악할 수 있게 된다. 

h2 /*책 제목(h1) 다음으로 큰 제목을 꾸밀 때 사용*/

{

           font-family:"강조글꼴"; /*은글꼴 바탕체 사용 */

           font-size: 1.6em; 

           text-align: center; 

           margin-top: 2em;

}