CSS 적용 우선순위

그날 그날 삽질했던 내용들

 

 

몇 달 전부터 그날그날 공부하거나 코딩했던 내용들을 짧게 정리하고 있습니다.

학교 선배님들과 공유하며 하루를 돌아보는 시간을 가질 수 있어 참 좋다고 생각했었는데, 그러던 차에 선배님의 권유로 CSS에 대해 자세히 알아보는 시간을 가져보면 좋을 것 같다고 하던 차에 여유가 생겨 이번 기회에 정리해보려고 합니다.

 

 

선배님의 코멘트 (감사합니다)

 

!important

가장 먼저 적용되는 속성은 !important 가 붙어있는 속성입니다.
!important 가 붙게되면 다른 우선순위를 무시하고, 이 속성이 적용되게 됩니다.

 

.context--name {
    color: #32ff33 !important; 
}

 

겹치는 두 가지 스타일을 동시에 적용하고, 한쪽에만 !important 를 적용시켜주겠습니다.

 

!important가 붙어있는 스타일만 적용된 모습

 

title 클래스의 검은색은 취소선과 함께 적용되지 않았고, context--name 클래스의 녹색만 적용된 모습을 확인할 수 있었습니다.

 

Style in HTML

그 다음 우선순위를 가지는 것은 HTML에서 직접적으로 적용한 속성입니다.

CSS 파일에서 불러오는 속성보다, 문서에서 지정해주는 속성이 우선적으로 적용됩니다.

방금전에 사용했던 스타일에서 !important를 제거한뒤, 확인해보겠습니다.

 

.context--name {
    color: #32ff33; 
}

 

 

html에서 지정한 스타일이 적용된 모습

 

element.style로 표시되며 html상의 style이 우선적으로 적용되었습니다.

 

 

#id style

다음 우선순위는 #id 로 적용한 속성입니다. 여러 요소에 적용시킬 수 있는 class와 달리 id는 한 요소에만 적용할 수 있기 때문에 사용처와 예상되는 결과가 비교적 명확합니다. 같은 요소에 class와 id를 통해 한 번씩 스타일을 주는 것으로 확인해보겠습니다.

 

#context {
    color: blue;
}

 

 

#context 가 우선적으로 적용된 모습

 

 

.class / :class style

 

다음은 별도의 클래스 (추상 포함) 를 통해 지정한 속성입니다. CSS 파일에서 .className 을 통해 지정한 모든 속성들이 여기에 해당됩니다.

태그에 스타일을 적용하여 비교해보겠습니다.

 

.context--name {
    background: #000000;
    color: #ffffff;
}

div {
    background: red;
}

 

 

div보다 먼저 적용된 .context--name의 스타일

 

Tag name style

태그이름으로 지정된 속성은 그보다 낮은 우선순위를 갖습니다.

body, div, span, p 등 태그 이름만으로 된 요소들이 여기에 속합니다.

<div>
    <p>
    p 태그에 지정한 style이 적용됩니다.
    </p>
</div>

 

 

div {
    color: red;
}

p {
    color: blue;
}

 

 

p 태그에 지정한 스타일이 적용됩니다.

 

 

 

inherited style

마지막 우선순위를 갖는건 부모에게 상속받은 스타일입니다. 

특별히 정해진 스타일이 없다면 부모의 속성을 그대로 따라가게 되는데, 이를 상속이라고 합니다.

 

 

div의 스타일을 p태그가 상속받습니다

 

 

 

 

etc.

이 외에도 같은 우선순위를 가지면서 서로 겹치는 속성이 있다면 부모와 자식간의 관계가 많은쪽이 우선적으로 적용되고, 서로 완전히 똑같은 순위를 갖는다면 나중에 선언된 쪽이 적용됩니다.

 

 

가장 마지막에 선언한 color: green이 적용되는 모습

 

 

이렇게 총 여섯 가지 스타일의 적용 우선 순위를 알아보았습니다. 저도 하나하나 적용해가며 확인한 적은 이번이 처음이었는데, CSS에 대해서 확실히 알아가는데 꽤 도움이 되었고 나중에도 기억하기 쉬울 것 같습니다. 

 

오늘 공부는 여기까지.