CSS 우선순위 계산
1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선
2. 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선
3. 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용
4. 우선순위 계산
- inline: 1000점
- id: 100점
- class, 속성 선택자: 10점
- element: 1점
5. !important를 적용하면 0순위<head>
<title>CSS 우선순위</title>
<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번(id 우선)</div>
<div class="class-style">div 3번(class 우선)</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번(!important 우선)</div>
</body>
CSS Custom Properties ( 변수 )
CSS의 속성 값을 재사용하고, 동적으로 변경할 수 있게 해주는 기능
정의
:root {
--main-color: #FF0000;
--font-size: 15px;
}
사용
.box {
background-color: var(--main-color);
font-size: var(--font-size);
}<head>
<title>css 변수</title>
<style>
:root {
--background-color: deepskyblue;
--text-color: white;
}
.first-list {
background-color: var(--background-color);
color: 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>
'Web' 카테고리의 다른 글
| [ JS ] JavaScript 이론 (0) | 2024.04.15 |
|---|---|
| [ HTML ] CSS 2D + 과제 (0) | 2024.04.12 |
| [ HTML ] CSS 미디어쿼리 (0) | 2024.04.11 |
| [ HTML ] CSS Float, Flex (0) | 2024.04.11 |
| [ HTML ] CSS Position ( 위치지정방식 ) (0) | 2024.04.09 |