css 적용되는 우선순위

 

웹 개발을 하면서 css로 각종 style을 관리하고 적용하게 되는데, 

완벽하게 정리가 잘 되어있다면 크게 문제는 없겠지만 간혹 같은 속성을 두 번 이상 지정하면서 생각한 대로 화면에 표시가 안 되는 것 같은 결과를 볼 수도 있습니다.

 

그럴 때 css의 우선순위를 알고 있다면 내가 원하는 항목을 우선순위를 높여서 사용하면 원하는 결과를 얻을 수 있을 것입니다. 

혹은 이미 적용된 css를 내가 원하는 위치에서 변경해주고 싶을 때에도 사용할 수 있습니다.

우선순위 기준

 

◎ css는 일반적으로 실행 순서가 뒤로 갈수록 우선순위가 높습니다.

◎ clss보다 id가 우선순위가 높습니다. 

◎ 우선순위가 같다면(예: 양쪽 다 id로 사용) 개수가 많은 쪽이 우선순위가 높게 됩니다.
◎ !important를 사용하면 우선순위가 가장 높습니다.

 

 

!important

 

!important는 해당 내용을 최우선으로 적용시키고, 해당 속성이 변경되지 않도록 합니다.

 

간단한 예제로 확인해보도록 하겠습니다.

"test"라는 calss를 사용하여 작성하였습니다.

1. css 파일 

.test {
	width: 50px;
	color: black;
	background-color: green !important;
}

.test {
	width: 50px;
	color: white;
	background-color: red;
}

 

2. html 파일

<div class="test"> 테스트 </div>

 

결과

예제 결과

 

순서대로 우선순위가 정해지기 때문에 color 속성은 white로 적용되었지만

background-color는 !important 때문에 red가 아닌 green이 적용되었습니다. 

상황에 맞게 테스트해보시고 사용하시면 좋을 것 같습니다.