개요

CSS는 무엇을 어떻게 꾸밀 것인가를 선언하는 언어입니다. 예를 들어 다음 코드는 p 태그에 대해 1em 만큼 들여쓴다를 의미합니다.

p {
  text-indent: 1em;
}

무엇에 해당하는 p 부분을 선택자(Selector)라고 하고 어떻게에 해당하는 중괄호 사이에 있는 부분을 선언 영역(Declaration block)이라고 합니다.

다양한 방법으로 선택자를 선언할 수 있습니다.

쉼표를 구분자로 여러 선언자를 넣을 수 있습니다. 예를 들어 ol과 ul 태그에 대하 위/아래 간격을 한 번에 설정할 수 있습니다.

ol, ul {
  margin: 1em 0;
}

기본 선택자

태그의 id 속성으로 선택할 수 있습니다. id 속성 값 앞에 #을 붙어야 합니다.

원칙적으로 한 html 문서에 같은 id 속성 값을 갖는 태그가 있을 수 없습니다. 하지만 웹 브라우저가 이를 막지 않기 때문에 CSS 선언을 id 속성이 같은 모든 태그에 적용합니다.
띄어쓰기 없이 # 앞에 태그 이름을 붙일 수 있습니다. id 속성 값이 같은 태그가 있어서는 안된다는 원칙을 고려하면 이렇게 하는 것은 권장하지 않습니다.

태그의 class 속성으로 선택할 수 있습니다. class 속성 값 앞에 .을 붙어야 합니다.

원칙적으로 한 html 문서에 같은 id 속성 값을 갖는 태그가 있을 수 없습니다. 하지만 웹 브라우저가 이를 막지 않기 때문에 CSS 선언을 id 속성이 같은 모든 태그에 적용합니다.
id 속성과 달리 class 속성이 같은 여러 태그를 사용할 수 있습니다. 띄어쓰기 없이 . 앞에 태그 이름을 붙일 수 있습니다. id 속성 값이 같은 태그가 있어서는 안된다는 원칙을 고려하면 이렇게 하는 것은 권장하지 않습니다.