[CSS 기초] CSS 적용 우선순위

 

안녕하세요 PNcoding입니다 :)

 

스타일을 적용시킬 때 있어서 어떤 때는 적용이 되고 어떤 때는 적용이 되지 않아 당황스러웠을 때 다들 있었을 거예요.

그 이유는 스타일시트의 특징 때문인데요.

 

CSS의 C는 Cascading(캐스캐이딩)의 앞글자로서 캐스캐이딩은 '위에서 아래로 흐르는'이라는 뜻을 가지고 있습니다.

따라서 CSS는 '위에서 아래로 흐르는 스타일시트'라는 의미를 가지고 있습니다.

즉 이 캐스캐이딩의 의미에 따라 선택자에 적용된 여러 스타일 중에서 어떤 스타일이 우선적으로 적용이 될 것인지가 정해진다고 보시면 되겠습니다.

 

 

 

---

 

 

스타일 우선순위

1. 기본적으로 나중에 적히는 css가 우선순위가 높음
2. !important > 태그에 직접 적용시키는 inline 방법 > id 선택자 > class 선택자 > tag 선택자 > 상위 요소에게 상속된 속성
3. 같은 우선순위 상에 있는 경우 부모-자식의 관계를 제대로 적어주면 우선순위를 올려줄 수 있음
4. 전체 선택자(*)는 우선순위가 가장 낮음

 

 

1. !import

우선순위를 다 무시하고 꼭 적용시켜 주고 싶을 때 속성 뒤에 !import를 붙여줍니다.

실제 실무에서 함부로 사용하시면 안 되며 정말 피치 못할 상황에만 활용합니다.

특히 공동작업이나 퍼블리셔가 작업함에 있어서의 최후의 보루라 할 수 있기 때문에 더더욱 함부로 사용하지 않도록 합시다.

.text {
	color: red !important;
}

 

2. inline

태그 내부에 직접 스타일을 적용시켜 주는 방법입니다.

내부에 직접 적용시킨다 하여 inline이라고 불러줍니다.

이 속성 또한 실무에서 함부로 활용되지 않으며, !import와 동일하게 최후의 보루라 생각하시면 되겠습니다.

<div style="color: red;">인라인</div>

 

3. id선택자 > class선택자 > tag선택자

각 태그에 대한 설명은 여기를 참고해 주세요 :)

https://pncoding.tistory.com/12

[CSS 기초] css 선택자 (1) 태그, 클래스, 아이디 선택자

 

4. 상위 요소에게 상속된 속성

선택자에게 아무런 속성을 지정해 주지 않으면 상위요소의 속성이 상속받아 적용됩니다.

<div class="text">
    <div>상속된 속성</div>
</div>

 

.text {
    color: red;
}

상위요소 속성 상속 결과

 

 

반응형

 

5. 같은 우선순위 상에 있는 경우 부모-자식 관계를 제대로 적어주면 우선순위가 올라감

동일한 선택자에게 스타일을 적용할 때 선택자 앞에 부모선택자를 적어준다면 우선순위를 높여줄 수 있습니다.

<div class="out_box">
    <div class="in_box">자식1</div>
    <div class="in_box">자식2</div>
</div>

 

.out_box>.in_box {
    color: red;
}

.in_box {
    color: blue;
}

5번 결과화면

 

 

 

---

 

 

이러한 우선순위는 개발자도구(검사창)를 열어보면 더 확실하게 알아볼 수 있습니다.

개발자도구에서 가장 위에 있는 스타일이 1순위로 적용이 되고, 아래로 내려갈수록 순위가 내려간다고 보시면 되겠습니다.

 

 

---

 

 

여기까지 CSS의 우선순위에 대하여 알아보았습니다.

 

항상 우선순위를 생각하면서 CSS를 작성해 주시는 게 좋지만, 매번 내가 작성한 코드를 기억할 수 없기 때문에 항상 개발자도구를 활용하여 우선순위를 체크해 주시는 걸 습관화해 주세요 :)