📌 선택자 우선순위
선택자 우선순위에는 3가지 원칙이 있습니다.
1. 후자 우선의 원칙
2. 구체성의 원칙
3. 중요성의 원칙
1. 후자 우선의 원칙
동일한 선택자가 연속으로 사용되었을 경우 후자가 우선합니다.
2. 구체성의 원칙
한 선택자가 다른 선택자보다 더 구체적으로 작성되었다면 구체적인 선택자가 우선합니다.
ul#navigation li.item {}
id 선택자 100점 + 타입선택자2개 2점 + class 선택자 10점 = 112점또한, 선택자의 우선순위는 상위 선택자의 우선순위를 넘지 못합니다!
동메달을 10개 가지고 있다고 해도 은메달, 금메달보다는 가치가 없는 것처럼 id > class > type 의 우선순위가 지켜집니다.
<head>
<style>
.h1 {
color: red;
}
html body div div div div div div div div div h1 {
background: #000;
color: blue;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<h1 class="h1">hello</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
타입선택자로 13점이지만 class가 가지는 10점이 더 우선합니다!
따라서 클래스 하나보다 중요도가 낮습니다!3. 중요성의 원칙
!important : 절대적인 우선순위. 가중치 점수를 무시하고 무조건적인 우선순위를 가집니다. 불가피한 상황이 아니라면 사용하지 않는 것이 좋습니다! (순위 계산을 어렵게 만들기 때문)
🔥 !important 끼리 우선순위는 어떻게 될까?
=> 절대자라고 하더라도! 점수는 중요하다!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
button.im {
background-color: blue !important;
}
/* 절대자라고 하더라도 점수는 중요하다! */
button {
background-color: lightblue !important;
}
</style>
</head>
<body>
<button class="im" style="background-color:red">버튼</button>
</body>
</html>
📌 가변 크기
- em :배수 단위 (부모의 글자크기에 따라 기준점이 달라짐)
- rem : root em (최상위 요소의 글자크기에 따라 달라짐)
- vw : 화면비 백분율 단위
- vh : 화면비 백분율 단위
안녕하세요. 프론트엔드 개발자 이현섭입니다.