[HTML] CSS 적용 우선순위

[HTML] CSS 적용 우선순위 - CSS Specificity

2024. 8. 30. 13:07ㆍLanguage/HTML

요소에 CSS 의 속성 값을 적용할 때 만약 2개 이상의 CSS 의 속성 값이 같은 요소를 가리키는 경우 어떤 CSS 속성 값을 우선 적용하게 될까? 이 때 적용되는 기준이 바로 'CSS Specificity(CSS 특이성)' 이다. 우선순위가 높은 특이성을 가진 CSS 에 작성된 속성이 HTML 요소에 적용된다고 한다. 오늘은 이 CSS Specificity 에 대해 알아보자.

1. CSS Specificity

HTML 문서 작성시 문서내의 요소를 2개 이상의 CSS 속성이 가리키는 경우가 생기거나 더러있다. 이럴 경우 어떤 CSS 속성을 기준으로 요소에 속성 값이 적용될까? 이럴 때 어떤 CSS 의 속성을 요소에 적용할지 결정하는 기준(점수,등급)이 CSS Specificity 이다.

1-1. 상위 요소 속성을 상속

요소에 아무런 속성 값이 지정되어 있지 않다면 상위 요소의 속성을 계승한다!

<body>    
    <style>
        .pClass {
            color: red;
        }
    </style>
</head>

<body>
    <div class="divClass" id="divId">
        <p class="pClass" id="pId">여기가 단락! : 
            <span class="spanClass" id="spanId">
                [이곳이 부분 단락!]
            </span>
        </p>
    </div>
</body>

가장 낮은 우선순위를 가지며 속성 값이 자동적으로 'inherit' 가 주어져 상위 요소의 속성을 계승(상속)받게 되는 경우
예시 코드를 살펴보면 태그의 요소는 'class' 와 'id' 가 선언되어 있지만 <style> 영역의 CSS 로 속성에 대한 값이 정의 되어있지 않다.
태그를 포함하고 있는 상위 요소인 요소는 CSS 로 색상 속성이 'red' 라는 값을 지정되어 있어 하위 요소인 요소는 해당 속성 값을 상속 받아 텍스트가 빨간색으로 출력된 것을 확인 할 수 있다.

1-2. 태그명 지정

태그명을 사용해도 CSS 속성을 지정할 수 있다!

<body>    
    <style>
        .pClass {
            color: red;
        }
        
        .span {
            color: blue;
        }
    </style>
</head>

<body>
    <div class="divClass" id="divId">
        <p class="pClass" id="pId">여기가 단락! : 
            <span class="spanClass" id="spanId">
                [이곳이 부분 단락!]
            </span>
        </p>
    </div>
</body>

CSS 요소 지정시 태그명을 사용하는 경우이다. 해당 방법은 HTML 문서내의 같은 이름의 태그들에게 지정한 속성 값을 적용하게 된다. 그래서 해당 태그명을 갖는 요소들이 기본적으로 사용하는 속성 값을 지정해 줄 때 사용하면 좋아 보인다.
다시 돌아와서 분명 상위 요소에 'color' 속성이 'red' 로 지정되어 있지만 태그명을 지정한 CSS 우선순위가 상위 요소의 속성을 상속 받는 것 보다 높아서 의 요소는 파란색 텍스트로 출력된 것을 볼 수 있다.

1-3. 클래스명 지정

요소에 지정한 클래스(class) 값을 CSS 지정에 사용한 경우!

<body>    
    <style>
        .pClass {
            color: red;
        }
        
        .span {
            color: blue;
        }
        
        .spanClass {
        	color: green;
        }
    </style>
</head>

<body>
    <div class="divClass" id="divId">
        <p class="pClass" id="pId">여기가 단락! : 
            <span class="spanClass" id="spanId">
                [이곳이 부분 단락!]
            </span>
        </p>
    </div>
</body>

요소에 선언한 'class' 의 값을 CSS 지정에 사용한 경우이다. 요소의 'class' 값인 'spanClass' 를 사용해 CSS 를 지정하고 텍스트 색상 속성을 'green' 으로 지정한 것이 위의 예시이다.
출력된 결과 이미지를 보게 되면 기존의 파란색이었던 요소가 초록색 텍스트로 바뀐 것을 볼 수 있다. 이는 요소의 'class' 값(클래스명)을 지정한 CSS 의 우선순위가 태그명을 사용한 CSS 우선순위보다 높기 때문에 생긴 결과이다.

1-4. 아이디 값 지정

요소에 지정한 아이디(id) 값을 CSS 지정에 사용한 경우!

<body>    
    <style>
        .pClass {
            color: red;
        }
        
        .span {
            color: blue;
        }
        
        .spanClass {
        	color: green;
        }
        
        .spanId {
            color: purple;
        }
    </style>
</head>

<body>
    <div class="divClass" id="divId">
        <p class="pClass" id="pId">여기가 단락! : 
            <span class="spanClass" id="spanId">
                [이곳이 부분 단락!]
            </span>
        </p>
    </div>
</body>

요소에 지정한 아이디(id) 값으로 CSS 를 지정하고 속성 값을 설정한 예시이다.
기존에 초록색이었던 <sapn> 요소의 텍스트 색상이 보라색으로 바뀐 것을 확인할 수 있는데 이는 아이디 값으로 지정한 CSS 우선순위가 클래스명으로 지정한 CSS 우선순위보다 높기 때문이다.
참고로 'id' 값으로 CSS 를 지정할 때는 ' . ' 이 아닌 ' # ' 을 사용해 CSS 를 지정해 준다.

1-5. 인라인(inline)

요소의 시작태그 내에 작성한 경우이다!

<body>    
    <style>
        .pClass {
            color: red;
        }
        
        .span {
            color: blue;
        }
        
        .spanClass {
        	color: green;
        }
        
        .spanId {
            color: purple;
        }
    </style>
</head>

<body>
    <div class="divClass" id="divId">
        <p class="pClass" id="pId">여기가 단락! : 
            <span class="spanClass" id="spanId" style="color: brown;">
                [이곳이 부분 단락!]
            </span>
        </p>
    </div>
</body>

태그의 시작태그 내에 CSS(style="color: brown;")를 작성한 예시이다.
해당 경우 기존의 텍스트 색상이 보라색이었던 요소가 갈색으로 바뀐 것을 결과 이미지를 통해 확인 할 수 있다. 이는 인라인(inline, 시작태그 내에 CSS 작성) 방식으로 지정한 CSS 우선순위가 아이디 값으로 지정한 CSS 우선순위 보다 높기 때문에 나타난 결과이다.

1-6. !important

CSS 내의 특정 속성에 작성하는 방식!

<body>    
    <style>
        .pClass {
            color: red;
        }
        
        .span {
            color: blue;
        }
        
        .spanClass {
        	color: green !important;
        }
        
        .spanId {
            color: purple;
        }
    </style>
</head>

<body>
    <div class="divClass" id="divId">
        <p class="pClass" id="pId">여기가 단락! : 
            <span class="spanClass" id="spanId" style="color: brown;">
                [이곳이 부분 단락!]
            </span>
        </p>
    </div>
</body>

먼저 가장 낮은 우선순위였던 CSS 의 속성에 대해서 '!important' 를 지정해보았는데 요소를 특정하지 않고 공통적으로 적용하는 CSS 에 대해서는 생각처럼 우선순위를 끌어올려 해당 속성의 값이 화면에 출력되지 않았다. 해당 경우는 상위 요소의 속성 값을 상속 받는 경우 또는 HTML 문서 전체의 태그 속성을 지정한 경우였다.
물론 요소의 클래스명을 지정한 CSS 부터는 '!important' 의 적용이 되는 것을 확인하고 예시 코드에 작성하게 되었다. 결과 이미지를 표시하면 이전까지 가장 높은 우선순위로 요소의 태그에 CSS 를 작성하는 인라인(inline) 방식의 속성 값인 갈색 텍스트가 요소의 클래스명으로 지정한 CSS 의 속성 값인 초록색 텍스트로 바뀐것을 확인 할 수 있다.
이렇게 CSS 속성에 '!important' 를 작성하게 되면 기존의 우선순위에서 가장 높은 우선순위로 지정하는 기능을 하는 것으로 보인다. 물론 전체적(범용적, 포괄적)으로 적용되는 CSS 지정 방식에 대해서는 해당 기능이 작동하지 않는 것으로 보인다.

2. 정리

이렇게 CSS Specificity 에 대해서 알아보았는데 결과적으로 보면 아래와 같은 우선순위를 갖는 것을 확인 할 수 있다.

상위 요소 상속 < 태그명 지정 < 클래스명 지정 < 아이디 값 지정 < 인라인 지정
그리고 CSS 속성에 '!important' 적용시 전체(포괄)적으로 적용되는 개념의 '상위 요소 상속, 태그명 지정' 에 대해서는 기능을 하지 않고 특정 요소를 지정하는 '클래스명 지정' 부터는 '!important' 를 작성한 속성이 최우선시 되는 것을 확인 할 수 있었다.

이렇게 정리하고 보니 또 그러면 저 상속받는 속성 값을 최우선으로 사용하고 싶은데 방법이 없나라고 생각이 들어 이리저리 코드를 만져본 결과 CSS 요소 지정에는 '.상위 요소 클래스명 > 하위 요소 태그명 { }' 과 같이 특정 요소의 하위 요소를 지정하는 방식도 존재하는데 해당 방식을 사용하면 원하는대로 상속받는 속성 값을 최우선 순위로 적용이 가능했다. 태그명을 사용하는 방법은 결국 해당 태그의 기본 속성 값을 지정하는데 사용될 것 같아 따로 최우선으로 지정할 방법을 궁리하진 않았다.

마지막으로 느낀 점은 모두 유용한 우선순위가 되겠지만 아무래도 개발이라는 것이 혼자하기 보다는 다수의 인원인 함께하는 경우가 많으므로 적절한 규칙을 정하고 해당 규칙에 맞춰 CSS 를 지정하는 것이 중요하다고 느껴졌다. 무분별하게 우선순위를 매겨 작성하다보면 코드 수정에 불편함은 물론이고 코드 재사용성까지 떨어질 것 같아 더욱이 그러한 생각이 들었다.

참고 문서

CSS Specificity - w3schools

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

'Language > HTML' 카테고리의 다른 글

[HTML] OpenAPI 다루기 - function, fetch (0)	2024.08.29
[HTML] 꾸미기 - <style>, CSS (0)	2024.08.27
[HTML] HTML5 태그 - <h1>, <p>, <span>, <button>, <div> (0)	2024.08.27
[HTML] HTML5 - 기본 구성 (0)	2024.08.27

나를 위한 개발 일기