By aPOST in CSS — 2023년 12월 23일

CSS 기초 - 변수(Variable) 오버라이딩(Overriding)을 이용한 디자인 테마 구현

CSS 변수를 사용하면 웹페이지의 테마 디자인 기능을 빠르게 구현할 수 있습니다.

아울러 테마 관리와 테마 확장도 간편하게 할 수 있습니다.

다음과 같은 간단한 홈페이지 메인을 구성한 HTML을 예를 들어 설명하겠습니다.

<!DOCTYPE html>
<html lang="en">
<body>
    <header>
        <ul id="navbar" class="menu">
            <li>홈</li>
            <li>상품</li>
            <li>오시는길</li>
            <li>문의</li>
        </ul>
    </header>
    <main>
        <div class="content">
            <div class="item"><h2>커피</h2><button>상세보기</button></div>
            <div class="item"><h2>음료</h2><button>상세보기</button></div>
            <div class="item"><h2>케잌</h2><button>상세보기</button></div>
            <div class="item"><h2>굿즈</h2><button>상세보기</button></div>
        </div>
    </main>
    <footer>
        <p>Copyright 2020 Baristas All right reserved.</p>
    </footer>
</body>
</html>

CSS로 레이아웃을 다음과 같이 작성하면

:root{
    --textcolor: #484848;
    --hover: #080;
    --pagebgcolor: #fff;
    --bgcolor: #f0f0f0;
    --buttonbg: #e0e0e0;
}
html, body{
    color: var(--textcolor);
    background-color: var(--pagebgcolor);
}
header, main, footer{
    display: block;
    max-width: 933px;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: var(--bgcolor);
}
.menu{
    display: grid;
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
}
.menu li{
    font-size: 1.125em;
    font-weight: bold;
    grid-area: 1;
    padding: 1.25em 0;
}
.content{
    display: grid;
    grid-template-columns: 49% 49%;
    column-gap: 2%;
    row-gap: 1em;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.content .item{
    display: inline-block;
    text-align: center;
    padding: 3em 0;
    background-size: cover;
    border-radius: 2em;
}
.content .item:nth-child(1){background-image: url(./backup/827/img/var1.jpg);}
.content .item:nth-child(2){background-image: url(./backup/827/img/var2.jpg);}
.content .item:nth-child(3){background-image: url(./backup/827/img/var3.jpg);}
.content .item:nth-child(4){background-image: url(./backup/827/img/var4.jpg);}
.content .item button{
    background-color: var(--buttonbg);
    color: var(--textcolor);
    padding: 1em 3em;
    border: 0;
    font-size: 1.125em;
    font-weight: bold;
}
.menu li:hover, .content .item button:hover{
    color: var(--hover);
    cursor: pointer;
}
footer{
    padding: 1em 0;
    text-align: center;
}

간단하지만 구조가 갖춰진 다음과 같은 웹 페이지가 완성됩니다.

":root" 가상 클래스에 정의된 변수는 기본 테마 변수입니다.

다크 테마로 사용할 클래스를 하나 추가로 정의합니다.

테마로 추가 선언하는 변수는 클래스 안에 선언하기 때문에 CSS 파일 안의 위치는 무관합니다.

.darktheme{
    --textcolor: #fff;
    --hover: #800;
    --pagebgcolor: #000;
    --bgcolor: #404040;
    --buttonbg: #484848;
}

추가 선언한 클래스를 HTML 파일의 "<body>" 태그에 클래스 속성으로 추가 선언합니다.

<body class="darktheme">

CSS 변수는 같은 변수명이 하위에 정의되면, 변수 값이 오버라이딩(덮어쓰기) 되는 특성이 있습니다.

":root" 가상 클래스에 정의된 변수는 최상위 선언이기 때문에 "<body>" 태그에 클래스로 선언한 같은 변수명은 모두 덮어쓰기가 되면서 다음과 같이 ".darktheme" 클래스의 변수가 적용됩니다.

같은 방식으로 여러개의 테마 클래스를 정의해 테마 클래스를 바꿔서 다양한 테마가 적용되는 웹페이지를 구현할 수 있습니다.