Categories: CSS

CSS 스타일 우선순위 명시도 알아보기

CSS 스타일 우선순위 명시도란?

CSS 명시도는 스타일 규칙이 적용되는 우선순위를 결정하는 값입니다.
CSS 스타일 우선순위와 명시도에 대하여 알아보겠습니다.

CSS 선택자 우선순위

기본적으로 CSS 에서는 나중에 적은 스타일을 우선 적용합니다.
즉 우선순위가 같을 때 나중에 작성한 스타일을 우선 적용한다는 뜻입니다.

또한 더 구체적으로 작성한 선택자의 우선순위가 더 높습니다.

선택자 우선순위를 낮은 순 부터 정리하면 다음과 같습니다.

  1. 전체 선택자
  2. 태그 선택자
  3. class 선택자
  4. ID 선택자
  5. 인라인 스타일

다음은 우선순위가 낮은 것 부터 순서대로 예제와 함께 나열하겠습니다.

전체 선택자

모든 요소에 스타일을 적용하는 선택자로, 다른 모든 선택자보다 우선순위가 낮습니다.

CSS
* {
  color: green;
}
CSS

태그 선택자

이 예제에서는 모든 <p>태그에 대해 글자색을 파란색으로 지정합니다.
태그 선택자는 다른 선택자보다 우선순위가 낮습니다.

CSS
p {
  color: blue;
}
CSS

class 선택자

이 예제에서는 class=”box”인 모든 요소에 대해 배경색을 파란색으로 지정합니다.
class 선택자는 태그 선택자보다 우선순위가 높습니다.

CSS
.box {
  background-color: blue;
}
CSS

ID 선택자

ID 선택자는 태그나 class 선택자보다 우선순위가 높습니다.

CSS
#box {
  border: 1px solid green;
}
CSS

인라인 스타일

이 처럼 HTML 태그 안에 직접 스타일을 적용한 것이 ID 선택자 보다 우선순위가 높습니다.

HTML
<p style="color: red;">이 텍스트는 빨간색</p>
HTML

는 CSS 스타일 속성에 사용되는 특별한 키워드로, 해당 속성에 대한 우선순위를 최상으로 높입니다. 이를 사용하면 다른 모든 스타일 규칙을 무시하고 해당 속성이 지정한 값이 적용됩니다.

CSS
.box {
  background-color: orange ;
}
CSS

CSS 스타일 우선순위 명시도 계산

점수를 계산해서 어느 것이 더 우선순위가 높은지 쉽게 파악 할 수 있습니다.

  1. : 최고점수
  2. 인라인 스타일 : 1000점
  3. ID 선택자 : 100점
  4. class 선택자 : 10점
  5. 태그 선택자 : 1점
  6. 전체 선택자 : 0점

예제와 함께 점수를 계산해보겠습니다.

CSS
div {
  background-color: blue;
}
CSS

위 예제는 태그 선택자 이므로 0 – 0 – 1 점 입니다.

CSS
ul > li {
  font-size: 20px;
}
CSS

위 예제는 태그 선택자가 2개 이므로 0 – 0 – 2 점 입니다.

CSS
#box > div > .menu {
  background-color: orange;
}
CSS

위 예제는 ID 선택자, 태그 선택자, class 선택자로 1 – 1 – 1 점이 됩니다.

이처럼 점수를 계산해서 더 높은 점수를 가진 스타일이 우선 적용 됩니다.

결론

CSS 스타일 우선순위는 다양한 선택자에 따라 다르게 적용됩니다.
명시도를 이해하고 계산하여 스타일이 올바르게 적용되도록 하는 것이 중요하겠습니다.

suover

View Comments

  • Wow that was unusual. I just wrote an very long comment
    but after I clicked submit my comment didn't appear. Grrrr...
    well I'm not writing all that over again. Anyhow, just wanted to say fantastic
    blog!

    My homepage 바둑이

Recent Posts

실용적인 테스트 가이드: @Mock, @MockBean, @Spy, @SpyBean, @InjectMocks

테스트 시 의존성 주입(Dependency Injection)과 Mockito Spring 애플리케이션을 개발하다 보면, 테스트 코드에서 실제 빈(Bean)을 사용하지…

1주 ago

실용적인 테스트 가이드: Layered Architecture 레이어드 아키텍처

들어가며 스프링 기반 프로젝트에서 좋은 설계 구조와 테스트 전략은 소프트웨어 품질과 유지보수성에 직결됩니다. 최근 학습한…

1주 ago

읽기 좋은 코드를 작성하는 사고법: 논리, 사고의 흐름과 SOLID

들어가며 코드를 작성할 때 종종 "이 로직을 어떻게 단순하고 읽기 쉽게 표현할 수 있을까?" 고민하게…

4주 ago

읽기 좋은 코드를 작성하는 사고법: 추상과 구체

들어가며 코드를 작성하다 보면 "왜 이 코드는 한눈에 이해가 안 될까?" 하는 고민을 종종 하게…

1개월 ago

HTTP 상태코드 총정리 서버-클라이언트 간 명확한 의사소통

HTTP 상태코드란 무엇인가? HTTP 상태코드(HTTP Status Code)는 서버가 클라이언트의 요청을 처리한 결과를 수치화된 코드로 나타내는…

1개월 ago

HTTP 메서드 완벽 가이드 GET, POST, PUT, PATCH, DELETE 등 총정리

HTTP란 무엇인가? HTTP(Hypertext Transfer Protocol)는 웹에서 데이터를 주고받기 위해 사용하는 응용 계층 프로토콜입니다. 우리가 브라우저에서…

1개월 ago