더북(TheBook)

6.1.2 적용 우선순위와 개별성

웹 브라우저는 기본 스타일 시트를 내장하고 있어서 몇 개의 태그는 이미 스타일이 적용된 상태로 표시됩니다. 대표적으로 hn 태그가 그랬죠. 여기에 사용자가 별도로 스타일 속성을 정의하면 어떻게 될까요? h1 태그에 텍스트의 크기와 굵기를 변경하는 스타일 속성을 사용해 보겠습니다.

06/01/specificity-1.html

h1{
  font-size:16px;
  font-weight:normal;
}

그림 6-2 실행결과

코드를 실행하면 그림과 같이 사용자가 정의한 스타일 속성이 적용된 상태로 표시됩니다. 원래 h1 태그는 텍스트 크기가 더 크고 굵었습니다. 그런데 이렇게 바뀌었다는 것은 기본 스타일 시트에 정의된 스타일 속성보다 사용자가 정의한 스타일 속성이 우선 적용됨을 의미합니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.