css 스타일 적용 우선순위
important, id, class, element 순서대로 순위를 가진다
#id-style { background-color: deeppink; }
#id-style2 { background-color: deepskyblue; }
div {
padding: 30px;
margin: 30px;
background-color: gold;
}
.class-style3 { background-color: beige !important ; }
.class-style { background-color: greenyellow; }
.class-style2 { background-color: pink; font-style: 30px; }
ul>li.li-class{ background-color: orange; }
ul>li { background-color: violet; }
<div style="background-color: aqua;">1번 인라인 스타일 우선(패딩30px 마진30px 배경색 아쿠아)</div>
<div id="id-style" class="class-style">2번 id 우선(패딩30px 마진30px 배경색 딥핑크)</div>
<div class="class-style">3번 class 우선 (패딩30px 마진30px 배경색 그린옐로우)</div>
<div class="class-style2 class-style">4번 동일한 속성은 나중에 적용한 것이 우선 (패딩30px 마진30px 배경색 핑크, 폰트30px)</div>
<div>5번 (패딩30px 마진30px 배경색 골드)</div>
<ul>
<li class="li-class">6번 점수가 높은 속성이 우선 (배경색 오렌지)</li>
</ul>
<div id="id-style2" class="class-style3">7번 important는 0순위 (패딩30px 마진30px 배경색 베이지)</div>
css 변수
- css에서도 변수를 사용하면 동일한 값을 여러 번 설정하거나 수정할 때 보다 편리하다.
- 변수 설정: --변수이름
- 변수 사용: var(--변수이름)
설정한 변수: --background-color, --text-color
: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 (max-width: 768px) {
:root {
--background-color: deeppink;
--text-color: ivory;
}
}
<h2>CSS 변수</h2>
<ul class="first-list">
<li>만보</li>
<li>장군이</li>
<li>루미</li>
<li>쪼만이</li>
</ul>
<ul class="second-list">
<li>초코</li>
<li>깜시</li>
</ul>
'웹 > html & css' 카테고리의 다른 글
css 미디어 쿼리 (1) | 2024.11.04 |
---|---|
css 레이아웃 연습 (2단, 3단, 다단, flex) (0) | 2024.11.04 |
css semantic tag, position, float (1) | 2024.11.04 |
css form (0) | 2024.11.03 |
css box model (0) | 2024.11.03 |