CSS 사용자 정의 속성 활용법 (--변수명)

CSS 사용자 정의 속성, 일명 CSS 변수는 현재 많은 CSS 전처리/후처리 프로그램에서 관련된 빠른 컴파일 기능을 제공하고 있습니다.

기본 사용법은 무엇이 있을까요? 간단한 예제를 통해 살펴보겠습니다. 요구사항: 중앙에 정렬된 5개의 블록 요소를 생성하되, 홀수와 짝수 요소는 동일한 높이이지만 다른 너비를 갖도록 합니다.

먼저 결과물을 살펴보겠습니다:

HTML 구조:

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS 변수 활용 예제</title>
        <link rel="stylesheet" href="css/normalize.css" />
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <div class="container">
            <div class="item item-1">항목 1</div>
            <div class="item item-2">항목 2</div>
            <div class="item item-3">항목 3</div>
            <div class="item item-4">항목 4</div>
            <div class="item item-5">항목 5</div>
        </div>
    </body>
</html>

CSS 코드:

:root {
    /* 색상 변수 정의 */
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --background-color: #f8f9fa;
    --text-color: #2c3e50;
    
    /* 크기 변수 정의 */
    --small-width: 120px;
    --large-width: 180px;
    --uniform-height: 100px;
    --border-size: 2px;
    --border-color: #34495e;
    
    /* 레이아웃 변수 정의 */
    --main-padding: 20px;
    --item-margin: 15px;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    padding: var(--main-padding);
}

.container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--item-margin);
}

.item {
    height: var(--uniform-height);
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-size) solid var(--border-color);
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s ease;
}

/* 홀수 항목 스타일 */
.item:nth-child(odd) {
    width: var(--small-width);
    background-color: var(--primary-color);
    color: white;
}

/* 짝수 항목 스타일 */
.item:nth-child(even) {
    width: var(--large-width);
    background-color: var(--secondary-color);
    color: white;
}

/* 호버 효과 추가 */
.item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

위 예제에서 볼 수 있듯이, CSS 변수는 일반 CSS 속성과 유사하게 사용되며, "--" 접두사가 붙은 임의의 변수명을 정의할 수 있습니다. rem, 백분율, px 등 다양한 단위와 함께 사용할 수 있습니다.

CSS 변수의 장점은 다음과 같습니다:

한 번 정의하면 여러 곳에서 재사용할 수 있으며, 특정 요소에 국한되지 않습니다.
디버깅 시 동일한 스타일을 적용한 여러 요소를 한 번에 수정할 수 있어 편리합니다.

다만 다음과 같은 단점도 있습니다:

동일한 스타일을 가진 요소들을 서로 다른 스타일로 변경해야 할 경우 변수를 삭제하거나 새 변수를 추가해야 합니다. 동일 변수를 참조하는 다른 요소들의 스타일이 변경되므로 요소의 "개성화"에 어려움이 있을 수 있습니다.
변수명은 대소문자를 구분하며(--color와 --Color는 다른 변수), "--" 접두사가 반드시 필요합니다.

Less, Sass 등 많은 CSS 전처리 도구도 이러한 기능을 제공하지만, 여기서는 네이티브 CSS 변수의 기본 원리에 초점을 맞추어 살펴보았습니다.

태그: CSS 변수 사용자 정의 속성 CSS 전처리 웹 개발 스타일 시트

6월 16일 19:42에 게시됨

괴물 클럽

CSS 사용자 정의 속성 활용법 (--변수명)

인기 태그