Web/HTML&CSS

[css] css의 우선순위

이번 포스트에서는 CSS 우선순위에 대해 살펴보자.

CSS 우선순위

Cascading Style Sheet

CSS는 Cacading Style Sheet의 약자이다. Cascade의 사전적 의미는 '작은 폭포' 같은 것이고 CSS에서의 의미는 상위에서 하위로 단계적으로 적용된다는 의미일 것이다.

웹 문서의 태그들은 서로 포함 관계에 있다. 이때 자식 요소에서는 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성을 그대로 물려 받는다. 예를 들어 <body>에 글자색이나 글꼴을 지정하면 그 스타일은 하위 태그에 영향을 준다.

문제는 요소들이 계층적으로 사용되다 보니 하위에 있는 요소들에서는 상위에서 흘러들어오는 스타일이 중복될 수밖에 없다. 이처럼 웹 요소에 둘 이상의 스타일이 적용될 때 우선 순위에 따라 적용할 스타일을 결정해야 한다.다.

하지만 모든 스타일이 상속되는 것은 아니다. 배경 색과 배경 이미지는 스타일 속성이 상속되지 않는다.

스타일 우선순위

스타일 우선순위는 cascading의 가장 기본적인 부분으로 3가지 개념에 따라 우선 순위를 결정한다.

항목	설명
중요도	얼마나 중요한 것인가를 나타내는 척도로 다음의 순으로 적용된다.(높은 숫자가 강력하다.)
중요도	브라우저 기본 스타일: 애초에 브라우저가 가지는 기본 스타일로 예를 들어 문서의 배경은 흰색이다. 제작자 스타일: 사이트 개발자는 배경을 회색으로 처리한다. 사용자 스타일: 사용자는 저시력자여서 윈도우의 고대비 모드를 설정한다. 따라서 배경은 최종적으로 검정색이 되었다.
명시도	중요도가 같다면 명시도를 따지는데 명시도는 적용 범위가 어디까지인가를 나타내며 다음의 순으로 적용된다.
명시도	유형선택자(h1 등) 및 의사 요소(:before 등) 클래스 선택자(.example 등), 속성 선택자([type='radio'] 등), 의사 클래스(:hover 등) ID 선택자(#example 등) 인라인 스타일 !important
작성순서	명시도까지 같다면 다음으로는 스타일을 정의한 소스 코드의 순서로 우선순위가 정해지며 나중에 작성된 스타일이 더 강력하다.
작성순서	다음의 순으로 스타일일이 작성된 경우라면 p 요소의 색상은 green이 된다. p{ color: red} p{color: green}

명시도의 표현

명시도가 쉽게 이해되지 않을 수 있는데 https://specifishity.com/ 에서 재미있는 그림으로 명시도를 설명해주고 있다. 맨 아래의 설명에 보면 X-Y-Z의 순으로 명시도를 설명하는데 마치 금-은-동과 유사하다. 동이 아무리 많아도 은 하나만 못하다.

X: ID 선택자의 개수
Y: class 선택자, 속성 선택자, 가상 클래스 선택자의 개수
Z: 타입 선택자, 가상 요소 선택자의 개수
*, +, >, ~ : 명시도를 증가시키지 못한다.
:not(X): not는 명시도에 영향을 주지 못하지만 X는 명시도를 증가시킨다.

개발자 도구를 위한 디버깅

개발자 도구는 CSS 디버깅에도 매우 용이하게 사용된다.

<style>
  h1 {
    color: red;
  }
  .title {
    color: yellow !important;
  }
  #maintitle {
    color: blue;
  }
  #maintitle {
    color: green;
  }
</style>

<body>
  <h1 class="title" id="maintitle">페이지 타이틀</h1>
</body>

사용자 에이전트 스타일 시트는 브라우저의 기본 스타일 시트이다. 이것을 기본으로 위로 갈 수록 우선 순위가 높은 것들이며 취소선은 스타일이 적용되었다가 없어진 것을 의미한다.

저작자표시 비영리 변경금지

'Web > HTML&CSS' 카테고리의 다른 글

[html] html의 순정 모달 <dialog> (0)	2024.06.04
Emmet 필수 사용법 (0)	2024.02.28
[css]css 가상 클래스 선택자: :not()과 :has() (0)	2023.03.05
[SCSS] 05. At-Rules -06.@forward (0)	2022.11.10
[SCSS] 05. At-Rules -05.@use (0)	2022.11.10

Contents

새소식