CSS / 기초 / 문법
문법
다음은 가장 간단한 CSS 코드입니다.
|
1 |
h1 { color: red } |
h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다.
- 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다.
- 속성(property) : 어떤 모양을 꾸밀지 정합니다. color는 색을 꾸미겠다는 뜻입니다.
- 값(value) : 어떻게 꾸밀지 정합니다. red는 빨간색으로 만들겠다는 뜻입니다.
즉, CSS 코드는 다음처럼 구성됩니다.
|
1 |
selector { property: value } |
이때 property와 value를 합쳐서 선언(declaration)이라고 합니다.
여러 개의 선언
세미콜론(;)으로 구분하여 선언을 여러 개 넣을 수 있습니다. 예를 들어
|
1 2 3 4 |
h1 { color: red; font-size: 20px; } |
는 h1 요소의 색을 빨간색으로 하고 글자 크기를 20px로 만들겠다는 뜻입니다. 마지막 선언에는 세미콜론을 붙여도 되고 붙이지 않아도 됩니다. 즉
|
1 2 3 4 |
h1 { color: red; font-size: 20px } |
처럼 해도 됩니다.
값(value)에 공백이 있는 경우
값(value)에 공백이 있다면 작은 따옴표 또는 큰 따옴표로 감쌉니다. 예를 들어 문단의 글꼴을 Times New Roman로 하고 싶다면
|
1 2 3 |
p { font-family: 'Times New Roman'; } |
또는
|
1 2 3 |
p { font-family: "Times New Roman"; } |
와 같이 합니다.
공백
여러 개의 연속한 공백이나 줄바꿈은 하나의 공백으로 인식합니다. 즉
|
1 2 3 4 |
selector { property: value; property: value; } |
와
|
1 |
selector { property: value; property: value; } |
는 같은 결과를 만듭니다.
주석
주석(Comment)은 /*과 */ 사이에 씁니다.
|
1 |
/* Comment */ |
/*과 */ 사이에 줄바꿈이 있어도 모두 주석으로 인식합니다.
|
1 2 3 4 |
/* Comment 1 Comment 2 */ |
여러 줄의 주석은 다음처럼 꾸미기도 합니다.
|
1 2 3 4 5 |
/* * Comment * Comment * Comment */ |