CSS / 기초 / 문법

문법

다음은 가장 간단한 CSS 코드입니다.

h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다.

  • 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다.
  • 속성(property) : 어떤 모양을 꾸밀지 정합니다. color는 색을 꾸미겠다는 뜻입니다.
  • 값(value) : 어떻게 꾸밀지 정합니다. red는 빨간색으로 만들겠다는 뜻입니다.

즉, CSS 코드는 다음처럼 구성됩니다.

이때 property와 value를 합쳐서 선언(declaration)이라고 합니다.

여러 개의 선언

세미콜론(;)으로 구분하여 선언을 여러 개 넣을 수 있습니다. 예를 들어

는 h1 요소의 색을 빨간색으로 하고 글자 크기를 20px로 만들겠다는 뜻입니다. 마지막 선언에는 세미콜론을 붙여도 되고 붙이지 않아도 됩니다. 즉

처럼 해도 됩니다.

값(value)에 공백이 있는 경우

값(value)에 공백이 있다면 작은 따옴표 또는 큰 따옴표로 감쌉니다. 예를 들어 문단의 글꼴을 Times New Roman로 하고 싶다면

또는

와 같이 합니다.

공백

여러 개의 연속한 공백이나 줄바꿈은 하나의 공백으로 인식합니다. 즉

는 같은 결과를 만듭니다.

주석

주석(Comment)은 /*과 */ 사이에 씁니다.

/*과 */ 사이에 줄바꿈이 있어도 모두 주석으로 인식합니다.

여러 줄의 주석은 다음처럼 꾸미기도 합니다.