[HTML&CSS] CSS 스타일 우선순위
- Language & Solution/HTML&CSS
- 2019. 10. 2. 18:22
| CSS 스타일 우선순위 (CSS Style Precedence)
CSS의 C는 캐스캐이딩(Cascading)의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻입니다. 이러한 방식으로 CSS는 중복되는 스타일 규칙을 '위에서 아래로' 적용되며 방지하는 방법을 채택하고 있습니다. 즉 스타일에 우선순위를 두어서 HTML의 요소가 어떤 CSS 스타일에 영향을 받을 지 결정하는 것이죠.
스타일의 우선순위는 다음과 같이 먼저 사용자와 제작자 그리고 중요 스타일인지 일반 스타일인지에 따라서 결정됩니다. (1이 가장 중요한 순서, 5가 가장 낮음)
1. 사용자 스타일 시트, 중요
2. 제작자 스타일 시트, 중요
3. 제작자 스타일 시트, 일반
4. 사용자 스타일 시트 일반
5. 브라우저 스타일 시트
여기서 사용자 스타일 시트라는 것은 저시력자나 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에 맞게 구성해 놓은 스타일 시트라는 것을 의미합니다. 또한 중요 스타일이라는 것은 !important 키워드가 적용된 CSS 스타일이라는 것을 의미합니다. (제작자 스타일 시트는 웹페이지에서 보통 적용하는 CSS 모듈들)
하지만 보통 위에 있는 중요도는 CSS를 적용할 때 자주 고려해야하는 요소는 아닙니다. 실제로 중요하게 생각해야하는 것은 다음 태그간, 선택자 간에 대한 우선순위입니다. (1이 가장 중요한 순서, 5가 가장 낮음)
1. 속성값 뒤의 !important
2. 태그에 inline으로 style 속성 지정
3. 선택자가 #id
4. 선택자가 .class 및 pseudo 클래스(:hover같은 것)
5. 선택자가 tag 이름
만약 우선순위가 같다면 개수가 많이 나온 것이 우선시 된다는 설명도 있지만 어느 정도 맞는 말이지만 정확하지 않습니다. 정확한 설명은 스타일에 적용되어진 조합들을 토대로 특정도값을 계산해서 가장 많은 점수를 받은 것이 우선됩니다!
특정도 계산식은 다음과 같습니다.
- 인라인 스타일 1000점
- ID 선택자 100점
- 클래스 선택자 및 가상 클래스(:before 같은), 속성 10점
- 태그 선택자 1점
* {
} /* a=0 b=0 c=0 d=0 => 0점 */
ul {
} /* a=0 b=0 c=0 d=1 => 1점 (태그)*/
li:first-child {
} /* a=0 b=0 c=1 d=1 => 11점 (pseudo-class, 태그)*/
ul li {
} /* a=0 b=0 c=0 d=2 => 2점 (2태그)*/
ul ol .red-tag {
} /* a=0 b=0 c=1 d=2 => 12점 (1클래스 2태그) */
#blue-tag {
} /* a=0 b=1 c=0 d=0 => 100점 (1아이디)*/
또한 개수마저 같다면 태그와 같은 경우는 <style> 태그나 CSS 파일에서 나중에 나온 것이 class나 id 지정자 같은 경우 태그에 먼저 나온 것이 우선순위를 가져갑니다.
| CSS 스타일 우선순위 예제 (CSS Style Precedence Example)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 우선순위</title>
<style>
#id-style-with-important {
background-color: yellow; !important;
}
.class-style {
background-color: blue;
}
#id-style {
background-color: red;
}
div {
display: block;
padding: 30px;
margin: 30px;
background-color: white;
}
/* 태그에서는 나중에 온 것이 먼저 온 것을 덮는다*/
div {
display: block;
padding: 30px;
margin: 30px;
background-color: purple;
}
#id-style-2 {
background-color: skyblue;
margin: 50px;
padding: 50px;
}
div #id-style-3 {
background-color: salmon;
margin: 60px;
padding: 60px;
}
ul {
color: black;
}
li > ul {
color: aqua;
}
li > .ul-class {
background-color: salmon;
color: mediumpurple;
}
</style>
</head>
<body>
<div id="id-style-with-important" stlye="background-color: green" id="id-style" class="class-style" >
!important 적용 우선!
</div>
<div style="background-color: green" id="id-style" class="class-style" >
인라인 스타일 적용 우선!
</div>
<div id="id-style" >
클래스 스타일 적용 우선
</div>
<div class="class-style" >
id 스타일 적용 우선!
</div>
<div>
태그에서는 나중에 온 것이 먼저 온 것을 덮는다
</div>
<div id="id-style-2" id="id-style">
id나 class는 먼저 나온 것이 적용된다
</div>
<li>
<ul class="ul-class">특정도에 의해 li > .ul-class 스타일이 적용된다</ul>
</li>
</body>
</html>
| 참고자료 (References)
http://www.yes24.com/Product/Goods/34890410?scode=032&OzSrank=4
https://www.zerocho.com/category/CSS/post/588cb95ca63e64132496a5d5
'Language & Solution > HTML&CSS' 카테고리의 다른 글
| [HTML&CSS] 테두리(border) 영역 (0) | 2019.10.07 |
|---|---|
| [HTML&CSS] 박스모델 (Box Model) (0) | 2019.10.07 |
| [HTML&CSS] 블록 레벨, 인라인 레벨 요소 (Block Level Element, Inline Level Element) (1) | 2019.10.02 |
| [HTML&CSS] 목록 작성하기 // <ul>, <ol>,<li>, <a href="#">, <dl>, <dt>, <dd> (0) | 2018.12.10 |
| [HTML&CSS] 제목, 문단, 연락처, 인용문 // <h1>~<h6>, <address>, <blockquote>, <hr>, <footer>, <pre> (0) | 2018.12.10 |
