[CSS] CSS 적용 순서

CSS를 설정하게 되면 무지성으로 넣기만해서 된다고 생각할 수 있겠지만 적용 순서가 있습니다.

이 적용 순서를 파악하고 CSS를 설정해야 좀 더 구체적이고 옳바른 스타일을 적용시킬 수 있습니다.

 

 

1. 위치에 따른 적용 순서

li{
   color: red;
   color: blue;
}

 

같은 CSS 속성이 들어있는 경우 위치 상 아래에 있는 속성이 가장 마지막에 반영되기 때문에
색상은 blue가 됩니다.

 

 

2. 특성에 따른 적용 순서

li{
   color: blue;
}

.first-class{
   color: red;
}

li[draggable]{
   color: purple;
}

#first-id{
   color: orange;
}

특정 태그에 관한 태그 CSS 설정, class CSS 설정, 속성 CSS 설정, id CSS 설정이 전부 되어있다면
구체적인 특성이 최종적으로 반영됩니다.
위의 코드를 예시로 들자면, li 태그는 가장 우선 순위가 낮은 4순위, class 속성이 3순위, 태그 속성이 2순위, id 속성이 1순위로 가장 구체적이기 때문에 1순위로 설정됩니다.
따라서, 색상은 오렌지 색상으로 적용됩니다.

 

 

3. CSS 적용 방식에 따른 적용 순서

<link rel="stylesheet" href="./style.css">

<style> ~ </style>

<h1 style="color: red;">hello</h1>

Inline, Internal, External 적용 방식에 따라 적용 순서가 다릅니다.
External은 외부의 CSS 파일을 import하여 적용하기 때문에 가장 우선 순위가 낮습니다.
Internal은 내부에서 CSS를 적용하기 때문에 External보다는 우선 순위가 높지만 
Inline 방식이 직접적으로 특정 태그를 지정해서 CSS를 적용하기 때문에 가장 우선 순위가 높습니다.
따라서 위의 예시 코드에서 CSS는 빨간색 색상이 적용될 것입니다.

 

 

4. 중요도에 따른 CSS 적용 순서

color: red;
color: green !important;

!important 키워드를 넣음으로서 CSS 적용 우선 순위를 선점할 수 있습니다.
위의 예시코드에서 green 색상이 적용될 것입니다.