[CSS] ③ CSS 우선순위와 명시도(Specificity)

티스토리 뷰

프론트엔드/CSS

[CSS] ③ CSS 우선순위와 명시도(Specificity)

doeunnkimm 2022. 7. 6. 15:52

▶우선순위와 명시도(Specificity)

한 요소를 가리키는 여러 선택자의 스타일이 한 번에 적용되어 적절한 스타일을 적용하는 데에 어려움을 겪은 적이 있을 것입니다.

선택자가 여러 개이고, CSS를 여러 파일에 작성했다면 이런 문제는 더 자주 발생합니다.

이제부터 각 스타일이 한 요소에 중첩되는 상황에서 어떤 스타일이 우선순위로 적용되는지 살펴보겠습니다 :)

▷마지막에 작성된 스타일이 적용된다

div {
	color: blue;
	color: red;
}

위의 코드처럼 한 선택자에 같은 스타일 프로퍼티를 지정하면 상단에 작성된 스타일은 상쇄되어 제일 마지막에 작성된 스타일이 우선순위로 적용됩니다. 즉 여기서는 color가 red로 적용됩니다.

혼란을 야기하지 않도록 위의 코드처럼 불필요한 스타일 프로퍼티(color)를 추가로 작성하지 않아야 합니다.

하나의 블록에서는 하나의 동일한 스타일 프로퍼티를 작성해야 합니다.

또한 다음 코드처럼 여러 파일에 같은 선택자로 스타일이 지정되면 이후에 연결된 파일의 스타일이 우선순위로 적용됩니다.

이런 경우 같은 선택자의 스타일이 분리되어 작성되므로 순서를 통해 제어하기보다 별개의 클래스를 만들어 스타일을 완전히 구분하는 것이 좋습니다.

관련된 문제 상황과 해결 방법은 추후 디버깅 파트에서 좀 더 구체적으로 알아보겠습니다.

<link rel="stylesheet" href="./src/styles.css" />
<!-- style.css와 동일한 선택자로 지정한 스타일이 있는 경우 style2.css가 우선순위로 적용됩니다. -->
<link rel="stylesheet" href="./src/styles2.css" />

▷명시도(Specificity)가 높은 선택자의 스타일이 적용된다

CSS에서 선택자는 종류나 개수에 따라 명시도(Specificity)를 가집니다.

만약 한 요소에 같은 스타일을 지정하는 선택자가 여러 개라면 명시도가 높은 선택자의 스타일이 적용됩니다.

명시도는 포커의 승리 조건과 비슷합니다.

포커에서는 숫자, 알파벳이 두 개가 같을 때 페어, 세 개가 같을 때 트리플이라고 합니다.

양쪽의 카드가 모두 페어인 경우에는 더 많은 페어를 가진 사람이 승리하지만, 페어가 아무리 많아도 하나의 트리플을 이길 수는 없습니다.

이와 유사하게 명시도가 같으면 더 많이(구체적으로) 작성된 선택자의 스타일이 적용되며, 상위 명시도를 가진 선택자가 하나라도 있으면 아무리 하위 선택자가 많아도 상위 명시도를 가진 선택자의 스타일이 적용됩니다.

명시도를 설명할 때, 여기서는 (A, B, C)로 작성해 표현하겠습니다.

명시도의 우선 순위는 A>B>C의 순서이며, 각 A, B, C의 값은 사용된 명시도의 개수를 의미합니다.

A에 해당하는 선택자는 id입니다. B는 class, 속성, 의사 클래스 선택자가 해당됩니다. C는 요소, 의사 요소 선택자가 해당됩니다. 또한 위에서 간단하게 소개한 '*', '>', '+', '~' 같은 선택자는 명시도에 영향을 주지 않습니다.

다음 코드에 등장하는 선택자의 명시도(A, B, C)에 숫자를 채우고 어떤 스타일이 적용되는지 예측해 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>명시도에 대한 코드</title>
        <meta charset="utf-8" />
        <style>
            #parent-id #child-id {
                /* 두 개의 id: (2,0,0) */
                /* 이 selector의 스타일이 적용 */
                border 1px dashed #000;
            }
            #parent-id div.child-class {
                /* 한 개의 id, 한 개의 class, 한 개의 element: (1,1,1) */
                /*위 selector의 명시도가 높으므로 상쇄*/
                border: 1px solid #000;
                /* 이 값은 적용 */
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div id="parent-id">
            <div id="child-id" class="child-class">child 1</div>
        </div>
    </body>
</html>

코드 실행 결과는 다음과 같습니다.

위의 코드에서 두 선택자 중 id가 2개인 선택자가 id 1, class 1, element 1을 갖는 선택자보다 명시도가 더 높아 중첩되는 border 속성은 dashed 스타일이 적용됩니다.

선택자의 점수가 더 낮더라도 font-size는 다른 선택자에서 정의된 적이 없어 그대로 적용됩니다.

만약 같은 선택자를 여러 번 연속해서 작성하면 어떻게 될까요?\

같은 선택자일 때도 명시도의 숫자가 올라가기 때문에 id 선택자를 한 번 작성한 경우보다 id 선택자를 두 번 작성한 스타일이 우선 적용됩니다.

다음 코드는 같은 선택자를 중복으로 작성한 코드입니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>명시도에 대한 코드</title>
        <meta charset="utf-8" />
        <style>
            #parent-id #child-id {
                /* 두 개의 id: (2,0,0) */
                /* 이 selector의 스타일이 적용 */
                border: 1px dashed #000;
            }
            #parent-id div.child-class {
                /* 한 개의 id, 한 개의 class, 한 개의 element: (1,1,1) */
                /*위 selector의 명시도가 높으므로 상쇄*/
                border: 1px solid #000;
                /* 이 값은 적용 */
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div id="parent-id">
            <div id="child-id" class="child-class">child 1</div>
        </div>
    </body>
</html>

실행 결과는 다음과 같습니다. 하지만 혼란을 주는 사용법이라 사용하지 않는 것이 좋습니다.

▷특성을 무시하는 방법 두 가지

지금까지 살펴본 특성을 모두 무시하는 두 가지 강력한 방법이 있습니다.

첫 번째는 인라인 스타일(style=""),. 두 번째는 !important입니다.

인라인 스타일은 id를 부여하는 방식보다 더 높은 명사도를 가집니다.

또한 !important는 모든 특성을 무시하고 스타일을 적용하는 가장 강력한 방법입니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>명시도에 관한 코드</title>
        <style>
            div {
                color: blue !important;
            }
            #test-id {
                color: yellow;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <!-- 이 경우 폰트의 색상은 파란색, font의 크기는 40px입니다 -->
        <div id="test-id" style="font-size: 40px; color: red">테스트</div>
    </body>
</html>

코드에 대한 실행 화면입니다.

!important를 사용하는 것은 모든 종속성이나 규칙을 무시하고 이후에 디버깅을 어렵게 만들기 때문에 안티 패턴으로 취급됩니다.

일반적인 상황이라면 명시도를 이해하는 것만으로도 충분히 원하는 대로 스타일을 지정할 수 있습니다.

여기까지 CSS 우선순위와 명시도에 대해 알아보았습니다 :)

728x90

LIST

'프론트엔드 > CSS' 카테고리의 다른 글

[CSS] ⑥ 반응형 웹을 위한 미디어 쿼리 (0)	2022.07.13
[CSS] ⑤ flex를 이용한 레이아웃 만들어 보기 (0)	2022.07.13
[CSS] ④ 박스 모델과 여백 상쇄 (0)	2022.07.13
[CSS] ② CSS 상속 & 선택자 (0)	2022.07.06
[CSS] ① CSS 작성방법 (0)	2022.07.06

250x250

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					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

글 보관함

doeunn.log

티스토리 뷰