HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다는 아이디어가 바로 웹 표준의 시작입니다. 이렇게 내용과 디자인이 구분되어 있기 때문에 사이트의 내용을 수정해야할 때도 디자인에 전혀 영향을 미치지 않고 내용만 수정할 수 있습니다. 또한 반대로 내용은 건드리지 않은 상태에서 스타일 시트를 이용해 디자인만 바꾸어 완전히 다른 느낌의 문서로 만들 수 있습니다.
CSS를 이용하면 HTML로 작성된 내용은 그대로 두고 CSS만 바꾸어 주면 같은 내용을 다양한 기기에 맞게 탄력적으로 바뀌는 반응형 페이지를 만들 수 있습니다.
기초 문법
다음은 가장 간단한 CSS 코드입니다.
h1 { color : red }
h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다.
-
선택자(selector) : 무엇을 꾸밀지 정합니다. h1은
<h1>태그 안의 내용을 꾸미겠다는 뜻입니다. - 속성(property) : 어떤 모양을 꾸밀지 정합니다. color는 색을 꾸미겠다는 뜻입니다.
- 값(value) : 어떻게 꾸밀지 정합니다. red는 빨간색으로 만들겠다는 뜻입니다.
속성(property)과 값(value)를 합쳐서 선언(declaration)이라고 합니다.
여러 개의 선언
세미콜론( ; )으로 구분하여 선언을 여러 개 넣을 수 있습니다.
예를 들어
h1 {
color : red;
font-size: 20px;
}
는 h1 요소의 색을 빨간색으로 하고 글자 크기를 20px로 만들겠다는 뜻입니다.
마지막 선언에는 세미콜론( ; )을 붙여도 되고 붙이지 않아도 됩니다.
h1 {
color : red;
font-size: 20px
}
값에 공백이 있는 경우
값에 공백이 있다면 작은 따옴표( '' ) 또는 큰 따옴표(
"" )로 감쌉니다.
예를 들어 문단의 글꼴을 Times New Roman로 하고 싶다면
p {
font-family: 'Times New Roman';
}
또는
p {
font-family: "Times New Roman";
}
와 같이 합니다.
여러 개의 연속한 공백이나 줄바꿈은 하나의 공백으로 인식합니다.
예를 들어
selector {
property: value;
property: value;
}
와
selector { property: value; property: value; }
는 같은 결과를 만듭니다.
주석
주석(Comment)은 /*과 */ 사이에 씁니다.
/* Comment */
줄바꿈이 있어도 모두 주석으로 인식합니다.
/*
Comment 1
Comment 2
*/
여러 줄의 주석은 다음처럼 꾸미기도 합니다.
/*
* Comment
* Comment
* Comment
*/
브라우저 접두사(prefix)
브라우저에 따라 다른 방식의 스타일이 지원되기 때문에 속성 이름 앞에 접두사를 붙여 브라우저 별로 구분합니다. CSS 표준 규약이 완성되더라도 옛날 버전의 브라우저 사용자를 고려해 브라우저 접두사를 붙여 스타일 코드를 작성하기도 합니다.
| 접두사 | 설명 |
|---|---|
| -webkit- | 웹키트 방식 브라우저 (크롬, 사파리) |
| -moz- | 게코 방식 브라우저 (모질라, 파이어폭스) |
| -o- | 오페라 브라우저 |
| -ms- | 마이크로소프트 (인터넷 익스플로러, 엣지) |
각 브라우저 접두사를 붙인 속성을 먼저 쓰고 표준이 정해진 속성을 맨 마지막에 작성합니다.
예를 들어
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
-column-count: 3;
column-count 속성은 아직 브라우저마다 지원하는 방법이 다르기 때문에 위와 같이 사용해야 합니다.
접두사를 사용하면 스타일 시트를 지저분하게 만들고 디자인을 일관성 없게 할 수 있지만 모든 브라우저에서 똑같은 결과를 표시되게 하려면 현재로서는 최선의 방법입니다.