이번 글에서는 CSS값을 적용할 때 어떤 값이 우선 순위가 되는지 알아보겠습니다.
CSS는 Cascading Style Sheet의 약자입니다. CSS의 맨 앞을 차지하고 있는 Cascading이란 무엇일까요?
Cascading이란 계단식, 작은 폭포라는 뜻입니다. 계단식의 작은 폭포에 윗물과 아랫물이 있는 것처럼 CSS에는 우선순위가 있습니다. CSS를 적용할 때 사용되는 태그 선택자, id 선택자, class 선택자, 스타일 속성 등 중에서 어떤 것이 가장 우선으로 적용되는 지 함께 알아봅시다.
<head>
<style>
</style>
</head>
<body>
<ul>
<li> first </li>
</ul>
</body>
이런 html 문서가 있다고 가정해 봅시다. 첫번째 <li>요소에 태그 선택자, id 값, class 값, 스타일 속성을 한꺼번에 준다면 어떤 속성이 적용될까요?
<head>
<style>
li{
color:red;
}
#idcolor {
color:blue;
}
.classcolor{
color:green;
}
</style>
</head>
<body>
<ul>
<li style="color:orange" id="idcolor" class="classcolor"> first </li>
</ul>
</body>result
- first
orange 컬러가 적용되었습니다. style 속성이 가장 우선순위로 적용되었다는 뜻입니다. 적용 순서는 구체적일수록 우선순위가 됩니다. 가장 포괄적인 태그 선택자가 가장 하위로 밀려나고 중복가능한 class 선택자, 중복이 가능하지 않은 id 선택자, 가장 구체적인 style 속성 값 순서대로 우선순위가 적용됩니다 .
style 속성 > id 값 > class 값 > 태그
이번에는 <li> 요소에 같은 선택자를 적용해 보겠습니다.
<head>
<style>
.class3{
color:red;
}
.class2{
color:orange;
}
.class1{
color:green;
}
</style>
</head>
<body>
<ul>
<li class="class1" class="class2" class="class3"> first </li>
</ul>
</body>result
- first
같은 선택자를 적용하면 스타일 태그안에서 가장 나중에 적용된 것이 우선순위가 됩니다.
정리해보자면 다른 선택자들을 하나의 요소 에 적용한다면 우선순위는 style 속성 > id 값 > class 값 > 태그 이며
같은 선택자들을 하나에 요소에 적용할 시 우선순위는 가장 나중에 적용한 것이 우선순위가 됩니다.
이번시간에는 CSS Cascading과 그에 관련된 선택자들의 우선적용순위에 대해 알아보았습니다.
'CSS' 카테고리의 다른 글
| [CSS] 포지션 속성 (position property) (0) | 2021.01.01 |
|---|---|
| [CSS] 디스플레이 속성 (display property) (0) | 2021.01.01 |
| [CSS] 박스 모델 (Box Model) (0) | 2020.12.30 |
| [CSS] 선택자(Selector) (0) | 2020.12.28 |
| [CSS] CSS란 무엇일까? (0) | 2020.12.24 |
