티스토리 스킨 수정(편집)을 위한 CSS 선택자 우선순위를 알아보자

CSS의 스타일을 적용하는 방법이 몇 가지 있습니다. 이 방법을 알아두면 좋은 이유는 스킨 수정을 원하는대로 하고자 할 때 요긴하게 사용할 수 있기 때문입니다. 자신이 직접 만든 스킨이라면 당연히 구조를 알고 있을테니까 원하는대로 뚝딱뚝딱 수정이 가능할테지만 타인의 스킨 경우는 구조 파악이 어렵고 어떻게 CSS를 적용시켰는지 알아내기가 오래 걸릴 수 있습니다. 그럴 때 스타일 적용의 우선 순위를 잘 이해하시면 원하는대로 수정을 할 수 있을 것입니다.

CSS 위치에 따른 우선 순위

먼저 CSS가 어디에 위치해있는지 그 영역부터 알아봐야합니다.

외부선택자

현재 티스토리 스킨에서 기본적으로 사용하는 방식입니다. HTML 영역과 CSS 영역이 나뉘어있죠? 이것이 외부선택자입니다. 즉 CSS만의 공간을 따로 만들었고 이 방을 HTML의 <head>에서 링크로 가지고 오는 방식을 말합니다. 티스토리 스킨 뿐만 아니라 대부분의 웹페이지가 이런 외부 선택자 방식을 사용합니다.

외부선택자의 장점은 스킨 수정이 용이하다는 것입니다. 하나의 웹문서에 HTML과 CSS가 같이 들어있지 않다보니 덜 복잡해지기 때문입니다. 딱봐도 정리가 잘 되어있다는 느낌을 받습니다. 가장 기본이 되는 CSS 위치입니다. 이 외부 선택자에서도 CSS의 우선 순위를 다르게 설정할 수 있는데 이것은 차후에 자세히 알아보겠습니다.

내부선택자

외부선택자의 반대 개념이 되겠군요. CSS가 따로 영역이 지정되어있지 않고 HTML의 문서 안에 <style>로 적용되어 있는 경우를 의미합니다. 주로 이 <style>시트는 <head>안에 자리잡고 있는 경우가 대부분입니다. 티스토리에서도 내부 선택자를 사용하는 스킨이 꽤 있습니다. 친효스킨 또한 내부선택자를 사용해서 스타일을 적용시키고 있기도 합니다. 주로 스킨 편집에서 적용시키고자 할 때 내부선택자 방식을 사용합니다.

우선순위는 외부선택자보다 내부선택자가 더 높습니다. 만약 스킨 수정을 하고 싶은데 CSS에서 아무리 수정을 해도 적용이 잘 되지 않는다면 HTML의 문서 내부에 스타일을 적용시켜 보시기 바랍니다.

인라인방식

이것은 적용시키고자 하는 태그 안쪽에 직접 스타일을 지정하는 방식입니다. 가장 직접적이고 확실한 방법 중 하나입니다. CSS 스타일 적용 순위 중 가장 높습니다.

<ins class="adsbygoogle" style="display:block; margin-top: 30px;" data-ad-client="" data-ad-slot="" data-ad-format="auto" data-full-width-responsive="true"></ins>

친효스킨의 경우 본문 상/하단 애드센스의 ins 태그 안쪽에 style을 별도로 지정을 했습니다. 위의 코드를 보시면 아시겠지만 style="display:block; 말고도 margin-top: 30px; 이 적용되어 있음을 알 수 있습니다. 애드센스 광고 위로 30px의 여백을 CSS 인라인 방식으로 직접 지정한 것입니다. 직접 지정한 이유는 애드센스의 CSS 스타일보다 더 우선 순위로 적용되게 하기 위함입니다. 지금까지 언급했던 세 가지 위치를 기억하고 하나 하나 적용 시켜 보다가 잘 적용이 되는 위치가 있다면 그 위치에서 사용하면 됩니다. 꼭 이 방식을 사용할 필요는 없습니다. 여기까지 CSS의 위치에 따른 적용 차이를 알아봤습니다. 요약하자면 다음과 같습니다.

인라인방식 > 내부선택자 > 외부선택자

인라인 방식이 가장 우선 적용이 되고 오른쪽으로 갈수록 우선순위가 낮아집니다. 이번에는 CSS의 선택자에 따른 순위입니다.

선택자 방식에 따른 우선 순위

선택자는 여러가지 방식이 있습니다. 대표적으로 클래스와 ID명을 사용해서 CSS 선택자를 만들어주는 방식입니다. 친효스킨에서도 가장 기본이 되는 방식이며 타스킨도 마찬가지고 대부분의 HTML 웹페이지가 이 방식을 따릅니다.

같은 CSS 선택자가 아래에 위치할수록 우선순위가 높음

먼저 위에서 언급했던 인라인 방식을 제외하고 내/외부 방식을 사용할 경우입니다. 이때 CSS의 코드 위치에 따라서 우선순위도 바뀝니다. 아래에 위치할수록 달라집니다.

.test1 {
    color: red;
}

.test1 {
    color: blue;
}

어떤 특정 태그에 클래스명을 test1로 지정 후 해당 태그의 글씨색을 변경하기 위해서 이렇게 두 개의 CSS 스타일을 지정했다고 가정하겠습니다. 그러면 해당 폰트는 빨간색일까요? 파란색일까요? 답은 파란색입니다. 빨간색보다 아래에 위치해있기 때문에 우선순위로 인해 파란색이 적용됩니다. 같은 선택자의 경우라면 아래가 더 우선시됩니다.

CSS 선택자의 경로가 자세할수록 우선순위가 높음

마찬가지로 간단한 CSS 코드를 예시로 들어보겠습니다.

body head div .test1 {
    color: blue;
}

.test1 {
    color: red;
}

이 두개의 스타일 코드를 살펴봅니다. 위에서 예시로 들었던 경우와 비슷한데 이 경우에는 어떤 컬러가 적용될까요? 정답은 파란색입니다. CSS 선택자의 경로가 자세하기 때문입니다. 자세한 경로일수록 우선순위는 높아진다는것을 알아두시면 됩니다. 만약 body head div .test1 보다 더 자세한 경로로 선택자를 지정한다면 당연히 해당 선택자의 CSS 스타일이 우선 적용됩니다. 아래에 위치해있지 않아도 말이지요.

!important를 사용하면 우선순위가 높아짐

CSS에서 이런 코드가 뒤에 달려있는 경우를 가끔 보셨을지도 모르겠습니다.

.test1 {
    color: red !important;
}

body head div .test1 {
    color: blue;
}

보시면 .test1 선택자의 color: red; 세미콜론 바로 안쪽에 !important가 들어가있음을 알 수 있습니다. 이 경우에는 폰트 색상이 어떻게 될까요? 정답은 빨간색입니다. 제 아무리 경로가 자세하고 아래에 코드가 마크업 되어있어도 !important로 인해 우선순위가 가장 높아지게 됩니다. 따라서 경로를 자세히하고 위치를 아래에 해 놓아도 적용이 잘 되지 않는다면 !important를 활용해 보시기 바랍니다.

참고로 !important는 처음에 언급했던 CSS 위치에 따른 우선순위에 영향을 받지 않습니다. 무조건 !important가 들어간 스타일이 있다면 그것이 가장 최우선 적용됩니다. 인라인 방식이든, 내부 선택자든 영역의 우선 순위에 영향을 받지 않는다는 뜻입니다. 외부선택자에 !important가 있다면 해당 태그가 인라인 방식의 CSS 스타일이 있어도 무시하고 적용됩니다.

그렇다면 최강의 우선순위는?

위의 내용들을 다 종합해보면 가장 우선순위가 높은 경우는 바로 인라인 방식에서 !important를 사용한 경우라는 결론에 도달하게 됩니다. 이런 경우입니다.

<body>
    <div class="wrap">
        <div class="innerBox test1" style="color: green !important;">1</div>
        <div class="innerBox">2</div>
        <div class="innerBox">3</div>
        <div class="innerBox">4</div>
        <div class="innerBox">5</div>
    </div>
</body>

보시면 test1의 div에 인라인 방식의 CSS 스타일이 적용되어 있으며 !important까지 들어있는 상태입니다. 이 경우라고 한다면 어떠한 CSS를 사용해도 폰트 색상은 늘 초록색이 유지됩니다. 이렇게 스타일을 강제 적용하는 경우는 정말 긴박한 경우(?)를 제외하고 거의 사용하지는 않습니다. 왜냐하면 이런 방식으로 사용하면 차후 유지보수도 어려워지고 관리도 힘들어지기 때문입니다. 한두개면 모르겠지만 점점 많아질수록 관리가 어려워집니다. 따라서 인라인 방식의 !important는 그렇게 추천하는 방법은 아닙니다. 정말 아무리 해봐도 스타일이 적용이 되지 않을 때, 최후의 방법으로 사용해 보시기 바랍니다. 끝.