CSS 문법

개념 이해하기

선택자 뒤 중괄호가 선언 블록이며 각 선언은 속성: 값과 세미콜론으로 구성됩니다. 공백은 대부분 자유롭지만 속성명과 값의 철자는 정확해야 합니다.

예제에는 규칙이 두 개 있습니다. .target 규칙이 글자색, 16px 안쪽 여백, 2px 실선 테두리를 정하고, 뒤에 오는 .second 규칙은 color 하나만 주황빛 갈색으로 바꿉니다. 테두리 색을 currentColor로 적었기 때문에 두 번째 상자는 border를 다시 쓰지 않아도 테두리까지 글자색을 따라 바뀝니다.

border처럼 여러 속성을 한 번에 쓰는 단축 속성은 생략한 하위 속성을 초깃값으로 되돌립니다. border-color의 초깃값이 currentcolor라서 이 예제는 색을 빼고 border: 2px solid만 써도 결과가 같지만, 그보다 앞에 border-color를 따로 적어 두었다면 그 값은 사라집니다.