더북(TheBook)

인라인 방식 vs id 선택자

인라인 방식(HTML 태그에 직접 style 속성을 적용하는 방식)과 id 선택자의 우선순위도 비교해 보겠습니다.

예제 소스 Exercise/5장/2_cascade/index03.html

<body>
    <h3 style="color: pink;" id="color" class="color">Welcome to CSS</h3>
</body>

 

그림 5-11 실행 결과

 

글자가 분홍색으로 출력되었습니다. 이를 통해 인라인 방식으로 입력했을 때가 id 선택자를 지정했을 때보다 우선순위가 높다는 걸 알 수 있습니다.

지금까지 확인한 내용을 토대로 CSS 속성의 우선순위를 부등호로 표기하면 다음과 같습니다.

인라인 방식 > id 선택자 > class 선택자 > type 선택자
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.