1. css 우선순위 계산
- 동일한 속성을 적용할 경우 나중에 적용한 것이 우선
- 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선
- 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용
- 우선순위 계산식
- inline: 1,000점
- id 속성: 100점
- class, 속성 선택자: 10점
- element: 1점
- !important를 적용하면 0순위
|
<head> <style> #id-style { background-color: deeppink; }
#id-style2 { background-color: deepskyblue; }
div {
display: block;
padding: 30px;
margin: 30px;
background-color: gold;
}
.class-style3 {
background-color: beige !important;
}
.class-style {
background-color: greenyellow;
}
.class-style2 {
background-color: pink;
font-size: 25px;
}
ul > li.li-class {
background-color: orange;
}
ul > li {
background-color: violet;
}
</style>
<link rel="stylesheet" href="./css/style.css">
</head> <body>
<h2>CSS 우선순위</h2>
<div style="background-color: aqua;">div 1번</div>
<div id="id-style" class="class-style">div 2번</div>
<div class="class-style">div 3번</div>
<div class="class-style2 class-style">div 4번</div>
<div>div 5번</div>
<ul>
<li class="li-class">li 1번</li>
</ul>
<div id="id-style2" class="class-style3">div 6번</div>
</body>
|
 |
2. CSS Custom Properties
CSS의 속성값을 재사용하고 동적으로 변결할 수 있게 해주는 기능
- 적용예시
|
<head> <style> :root {
--background-color: deepskyblue;
--text-color: white;
}
.first-list{
background-color: var(--background-color);
color: var(var(--text-color));
}
.second-list{
background-color: var(--background-color);
color: var(--text-color);
}
@media screen and (max-width: 768px) {
:root {
--background-color: darkslateblue;
--text-color: ivory;
}
}
</style>
</head> <body>
<h2>css변수</h2>
<ul class="first-list">
<li>김사과</li>
<li>반하나</li>
</ul>
<ul class="second-list">
<li>오렌지</li>
<li>이메론</li>
<li>배애리</li>
</ul>
</body>
|
768px 이상일 때  768px 이하일 때  |
'Web > CSS' 카테고리의 다른 글
| 09. CSS Transform, Transition, Animation (0) | 2024.04.12 |
|---|---|
| 07. 미디어쿼리 (0) | 2024.04.11 |
| 06. flex (0) | 2024.04.09 |
| 05. CSS 디스플레이, 폼, 포지션 (0) | 2024.04.08 |
| 04. 박스모델 (0) | 2024.04.08 |
