Post

CSS 우선순위, Position 속성

Posted Updated
Preview Image
By sunhew 6 min read

HTML & CSS

해당 포스팅에서는 CSS 우선순위, Position 속성에 대해 다룹니다. 이전에 한번 다뤘었지만 한번 더 복습하는 개념으로 포스팅 했습니다.

HTML & CSS 목차

  • 웹 표준, 웹 접근성
  • 반응형 작업
  • 레거시 코드, IR 효과 시멘틱 태그
  • CSS 우선순위, Position 속성 ✔️
  • block, inline-block, inline 차이
  • data 속성
  • seo, 최적화 방법, ID vs class 차이

CSS 우선순위

CSS 우선순위의 개념

CSS 우선순위(CSS Specificity) 는 여러 스타일 규칙이 동일한 요소에 적용될 때 어떤 규칙이 우선적으로 적용될지를 결정하는 방법 입니다. 우선순위는 선택자의 특정성(Specificity) 과 중요도(Importance) 에 따라 결정됩니다.

CSS 우선순위 규칙

중요도 (Importance)

  • !important 가 붙은 규칙은 우선순위에서 가장 높습니다. 다른 어떤 규칙보다 우선 적용 됩니다
1
2
3

.example {
    color: red !important;
}

인라인 스타일 (Inline Style)

  • 인라인 스타일은 !important 를 제외한 다른 어떤 규칙보다 높은 우선순위 를 가집니다.
1

<div style="color: blue;"></div>

특정성 (Specificity)

  • 선택자의 특정성은 선택자의 구성 요소에 따라 계산됩니다. 특정성이 높을수록 우선순위가 높습니다.

  • 특정성은 다음과 같은 규칙에 따라 계산됩니다.

    1. 인라인 스타일 : 1,0,0,0
    2. ID 선택자 : 0,1,0,0
    3. 클래스, 속성, 가상 클래스 선택자 : 0,0,1,0
    4. 태그 선택자, 가상 요소 선택자 : 0,0,0,1

소스 순서 (Source Order)

  • 특정성과 중요도가 동일한 경우, 스타일 규칙이 나중에 정의된 것이 우선 적용 됩니다.

특정성 계산 방법

특정성은 네 자리 숫자(a,b,c,d)로 계산 되며, 각 자리수는 다음과 같이 계산됩니다

  • a: 인라인 스타일 수
  • b: ID 선택자 수
  • c: 클래스, 속성, 가상 클래스 선택자 수
  • d: 태그, 가상 요소 선택자 수
1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* 특정성: 0,0,1,1 */
div.class {
    color: red;
}

/* 특정성: 0,1,0,0 */
#id {
    color: blue;
}

/* 특정성: 0,0,2,0 */
.class1.class2 {
    color: green;
}

우선순위 예제

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
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html lang="ko">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Specificity Example</title>
    <style>
        /* 특정성: 0,0,0,1 */
        p {
            color: black;
        }

        /* 특정성: 0,0,1,0 */
        .example {
            color: blue;
        }

        /* 특정성: 0,1,0,0 */
        #unique {
            color: green;
        }

        /* 특정성: 0,0,1,1 */
        p.example {
            color: red;
        }

        /* 특정성: 0,0,1,1, 중요도 높음 */
        p.example {
            color: yellow !important;
        }
    </style>
</head>
<body>
    <p class="example" id="unique">This is a test paragraph.</p>
</body>
</html>

위의 예쩨에서 <p class="example" id="unique"> 요소는 여러 CSS 규칙에 의해 스타일이 적용됩니다. 우선순위에 따라 최종 색상은 다음과 같이 결정됩니다.

선택자코드우선순위
기본 스타일p { color: black; }특정성: 0,0,0,1
클래스 선택자.example { color: blue; }특정성: 0,0,1,0
ID 선택자#unique { color: green; }특정성: 0,1,0,0
조합 선택자p.example { color: red; }특정성: 0,0,1,1
중요도 높은 규칙p.example { color: yellow !important; }특정성: 0,0,1,1 (중요도 높음)

위 표를 살펴보면 color: yellow 뒤에 !important가 붙어있으므로 최종적으로는 요소의 텍스트는 노란색이 됩니다.

우선순위 충돌 해결 방벙

구체적인 선택자 사용

  • 선택자를 구체적으로 작성하여 특정성을 높입니다.

중요도 조절

  • 가능한 한 !important 사용을 피하고, 구조적인 선택자 설계를 통해 해결 합니다

스타일 정의 순서

  • 스타일을 정의하는 순서를 고려 하여 후에 정의된 스타일이 우선 적용되도록 합니다.

CSS 리셋 또는 노멀라이즈 사용

  • 브라우저 기본 스타일을 일관 되게 만들기 위해 CSS 리셋 또는 노멀라이즈 를 사용합니다.
html & css
html&css html CSS css우선순위 Position속성
This post is licensed under CC BY 4.0 by the author.