Post

CSS 우선 순위

Posted
Preview Image
By kimyih 7 min read

CSS 우선 순위 이해하기

CSS(Cascading Style Sheets)에서 스타일을 적용할 때, 여러 스타일 규칙이 충돌하는 경우 어떤 스타일이 우선적으로 적용되는지 이해하는 것이 중요합니다.
CSS는 이러한 우선 순위를 정의하는 규칙을 가지고 있습니다.
이번 글에서는 CSS 우선 순위에 대해 쉽게 설명하겠습니다.

CSS 우선 순위

CSS 우선 순위는 스타일 규칙이 충돌할 때 어떤 규칙이 적용될지를 결정하는 규칙입니다.
우선 순위는 다음과 같은 순서로 적용됩니다.


  1. !important: 속성 값 뒤에 !important를 붙인 속성
  2. 인라인 스타일: HTML에서 style 속성을 사용하여 직접 지정한 속성
  3. ID 선택자: #id로 지정한 속성
  4. 클래스 및 의사 클래스 선택자: .클래스, :추상 클래스로 지정한 속성
  5. 태그 선택자: 태그 이름으로 지정한 속성
  6. 상속된 속성: 상위 객체에 의해 상속된 속성


1. !important의 사용

!important는 특정 스타일 규칙의 우선 순위를 강제로 높이는 데 사용됩니다.
일반적인 우선 순위 규칙을 무시하고, 해당 스타일이 최우선적으로 적용됩니다.

1
2
3
4
5
6
7

p {
    color: blue !important;
}

p {
    color: red;
}


위 예제에서 p 요소의 색상은 blue로 설정됩니다.
!important가 사용되었기 때문에 다른 모든 규칙보다 우선적으로 적용됩니다.


2. 인라인 스타일

인라인 스타일은 HTML 요소에 직접 style 속성을 사용하여 지정된 스타일입니다.
이러한 스타일은 대부분의 스타일 시트보다 높은 우선 순위를 가집니다.

1

<p style="color: green;">이 문장은 녹색으로 표시됩니다.</p>


위 예제에서 p 요소는 인라인 스타일에 의해 녹색으로 표시됩니다.


3. ID 선택자

ID 선택자는 # 기호를 사용하여 요소의 id 속성을 기반으로 스타일을 지정합니다.
ID 선택자는 클래스 선택자보다 높은 우선 순위를 가집니다.


1
2
3
4
5
6
7

<p id="special">이 문장은 특별한 스타일로 표시됩니다.</p>

<style>
    #special {
        color: purple;
    }
</style>


위 예제에서 #special ID를 가진 p 요소는 보라색으로 표시됩니다.


4. 클래스 및 의사 클래스 선택자

클래스 선택자는 . 기호를 사용하여 요소의 class 속성을 기반으로 스타일을 지정합니다.
의사 클래스 선택자는 : 기호를 사용하여 요소의 특정 상태에 스타일을 적용합니다.


1
2
3
4
5
6
7

<p class="highlight">이 문장은 강조된 스타일로 표시됩니다.</p>

<style>
    .highlight {
        color: orange;
    }
</style>


위 예제에서 highlight 클래스를 가진 p 요소는 주황색으로 표시됩니다.


5. 태그 선택자

태그 선택자는 태그 이름을 사용하여 요소의 스타일을 지정합니다.
태그 선택자는 클래스 선택자보다 낮은 우선 순위를 가집니다.


1
2
3
4
5
6
7

<p>이 문장은 기본 스타일로 표시됩니다.</p>

<style>
    p {
        color: red;
    }
</style>


위 예제에서 모든 p 요소는 빨간색으로 표시됩니다.


6. 상속된 속성

CSS는 상위 요소의 스타일을 하위 요소로 상속합니다.
상속된 속성은 가장 낮은 우선 순위를 가집니다.


1
2
3

<div style="color: blue;">
    <p>이 문장은 파란색으로 표시됩니다.</p>
</div>


위 예제에서 div 요소에 의해 상속된 p 요소의 색상은 파란색으로 표시됩니다.


CSS 우선 순위 예제

여러 규칙이 충돌할 때 어떤 스타일이 적용되는지 예제를 통해 알아보겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 우선 순위</title>
    <style>
        p {
            color: red;
        }

        .highlight {
            color: orange;
        }

        #special {
            color: purple;
        }
    </style>
</head>
<body>
    <div style="color: blue;">
        <p id="special" class="highlight" style="color: green;">이 문장은 어떤 색으로 표시될까요?</p>
    </div>
</body>
</html>


위 예제에서 p 요소에는 여러 스타일 규칙이 적용됩니다:

  • 태그 선택자(p { color: red; })
  • 클래스 선택자(.highlight { color: orange; })
  • ID 선택자(#special { color: purple; })
  • 인라인 스타일(style="color: green;")
  • 상위 요소에 의해 상속된 스타일(div { color: blue; })


이 경우, 최종적으로 적용되는 스타일은 인라인 스타일의 color: green;입니다.
인라인 스타일이 가장 높은 우선 순위를 가지기 때문입니다.



결론

CSS 우선 순위는 스타일 규칙이 충돌할 때 어떤 규칙이 적용될지를 결정하는 중요한 개념입니다.
!important, 인라인 스타일, ID 선택자, 클래스 및 의사 클래스 선택자, 태그 선택자, 상속된 속성 순으로 우선 순위가 결정됩니다.
이러한 우선 순위를 이해하면 CSS를 더 효과적으로 작성하고, 예상치 못한 스타일 충돌을 피할 수 있습니다.

HTML/CSS
selector
This post is licensed under CC BY 4.0 by the author.