css 우선순위, 변수

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>