CSS 변수(CSS Custom Properties) 사용법 - 반복 사용을 줄이는 변수 설정법

CSS 변수를 사용하면 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있습니다. CSS 변수는 반복적으로 사용되는 값을 한 곳에서 관리할 수 있도록 도와주며, 전체 스타일에서 일관성을 유지하는 데 매우 유용합니다. 이 글에서는 CSS 변수(CSS Custom Properties)를 사용하는 방법과 이를 통해 반복 사용을 줄이는 변수 설정법에 대해 알아보겠습니다.

1. CSS 변수(CSS Custom Properties)란?

CSS 변수는 특정 값을 변수로 정의하고, 이를 필요할 때마다 재사용할 수 있게 해줍니다. CSS 변수는 --로 시작하며, var() 함수를 사용해 변수를 호출할 수 있습니다.

변수 정의 예시:

:root {
    --main-bg-color: #4CAF50;
    --main-text-color: #ffffff;
    --padding-size: 15px;
    --border-radius: 5px;
}

설명:

• :root: CSS 변수는 :root 선택자 안에서 정의되면 전역적으로 사용 가능합니다. :root는 문서의 최상위 요소(html)를 가리킵니다.
• --main-bg-color: 변수 이름은 --로 시작하며, 이 예시에서는 배경색을 지정하는 변수를 정의했습니다.

2. CSS 변수 사용법

한번 정의된 CSS 변수는 var() 함수를 사용하여 스타일 속성 내에서 호출할 수 있습니다. 이를 통해 반복적인 값 설정을 피하고, 일관된 스타일을 유지할 수 있습니다.

변수 사용 예시:

.button {
    background-color: var(--main-bg-color);
    color: var(--main-text-color);
    padding: var(--padding-size);
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: var(--main-bg-color-hover, #45a049); /* 기본값 설정 가능 */
}

설명:

• var(--main-bg-color): 변수 --main-bg-color에 정의된 값을 background-color에 적용합니다.
• var(--main-bg-color-hover, #45a049): 두 번째 인자로 기본값을 지정할 수 있습니다. --main-bg-color-hover 변수가 정의되지 않았을 경우, 기본값으로 #45a049가 사용됩니다.

3. 반응형 디자인에서 CSS 변수 사용

CSS 변수는 반응형 디자인에서도 매우 유용하게 사용할 수 있습니다. 예를 들어, 화면 크기에 따라 변수가 다른 값을 가지도록 설정할 수 있습니다.

반응형 디자인에서 변수 사용 예시:

:root {
    --font-size: 16px;
    --padding-size: 15px;
}

@media (max-width: 768px) {
    :root {
        --font-size: 14px;
        --padding-size: 10px;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size: 12px;
        --padding-size: 8px;
    }
}

body {
    font-size: var(--font-size);
    padding: var(--padding-size);
}

설명:

• 기본값: 기본적으로 --font-size와 --padding-size 변수를 설정합니다.
• 미디어 쿼리: 화면 크기가 768px 이하일 때와 480px 이하일 때 각각 다른 값을 가지도록 설정합니다. 이를 통해, 반응형 디자인에서 동일한 변수를 사용해 다른 값을 적용할 수 있습니다.

4. 테마 설정에 CSS 변수 활용

CSS 변수를 활용하면 다크 모드와 같은 테마 설정을 쉽게 구현할 수 있습니다. 각 테마에 맞는 색상 변수들을 정의하고, 이를 조건에 따라 변경할 수 있습니다.

테마 설정 예시:

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

body.dark-mode {
    --bg-color: #333333;
    --text-color: #ffffff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

설명:

• 기본 모드: 기본적으로 밝은 배경과 어두운 텍스트 색상을 사용하도록 설정합니다.
• 다크 모드: body에 dark-mode 클래스를 추가하면, 배경색과 텍스트 색상이 다크 모드에 맞게 변경됩니다.

5. 공통 스타일의 변수화

자주 사용되는 스타일 속성 값(예: 간격, 색상, 폰트 크기 등)을 변수로 정의하면, 코드의 반복을 줄이고 스타일을 일관되게 유지할 수 있습니다.

공통 스타일의 변수화 예시:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-family: 'Arial, sans-serif';
    --border-width: 2px;
    --spacing: 10px;
}

.header {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: var(--spacing);
    border-bottom: var(--border-width) solid var(--secondary-color);
    font-family: var(--font-family);
}

.footer {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: var(--spacing);
    border-top: var(--border-width) solid var(--primary-color);
    font-family: var(--font-family);
}

설명:

• 색상, 폰트, 간격 등: CSS 변수로 공통 스타일 값을 정의하고, 이를 여러 요소에 재사용하여 스타일링을 일관되게 유지합니다.
• var(--변수명): 정의된 변수를 호출하여 스타일 속성에 적용합니다.

결론

CSS 변수를 사용하면 코드의 유지보수성과 가독성을 크게 향상시킬 수 있습니다. 반복적으로 사용되는 값들을 변수로 정의하고, 이를 필요할 때마다 재사용함으로써 코드의 중복을 줄이고 일관성을 유지할 수 있습니다. 반응형 디자인이나 테마 설정에서도 CSS 변수는 매우 유용하며, 다양한 상황에서 효율적으로 활용할 수 있습니다.

이 글에서 소개한 방법을 바탕으로 CSS 변수를 활용해보세요. 이를 통해 코드의 복잡성을 줄이고, 더욱 깔끔하고 관리하기 쉬운 스타일시트를 작성할 수 있습니다.