프로그래밍/CSS

CSS 변수: 웹 디자인의 혁신적인 도구

shimdh 2025. 7. 1. 07:48
728x90

CSS 변수는 현대 웹 디자인에서 필수적인 요소로 자리 잡고 있습니다. 사용자 정의 속성으로도 알려진 CSS 변수는 스타일시트 전반에 걸쳐 재사용할 수 있는 값을 저장할 수 있게 해주며, 이는 개발자에게 많은 이점을 제공합니다. 이번 포스트에서는 CSS 변수의 정의, 사용법, 그리고 그 이점에 대해 자세히 알아보겠습니다.

CSS 변수가 필요한 이유

CSS 변수는 웹 개발자에게 다음과 같은 여러 가지 이점을 제공합니다:

  1. 재사용성: 변수를 한 번 정의하면, 그 값을 여러 곳에서 사용할 수 있습니다. 이는 코드의 중복을 줄이고, 일관성을 유지하는 데 큰 도움이 됩니다.
  2. 유지 관리 용이성: 변수를 한 곳에서 값만 변경하면, 그 변수가 사용된 모든 인스턴스가 자동으로 업데이트됩니다. 이는 대규모 프로젝트에서 특히 유용하며, 스타일 변경 시 발생할 수 있는 오류를 줄여줍니다.
  3. 동적 변경: JavaScript를 사용하여 런타임 중에 변수의 값을 변경할 수 있어, 사용자 상호작용에 따라 동적으로 스타일을 변경할 수 있습니다. 이는 사용자 경험을 향상시키는 데 중요한 요소입니다.

CSS 변수 정의하기

CSS 변수는 선택자 내에서 정의되며, 일반적으로 전역 범위를 위해 :root를 사용합니다. 정의하는 구문은 다음과 같습니다:

--variable-name: value;

이중 하이픈(--)은 사용자 정의 속성을 나타내며, 다음은 몇 가지 색상 변수를 정의하는 예입니다:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size-large: 20px;
}

CSS 변수 사용하기

정의된 변수를 스타일시트의 다른 곳에서 사용하려면 var() 함수를 사용합니다:

body {
    background-color: var(--primary-color);
    font-size: var(--font-size-large);
}

h1 {
    color: var(--secondary-color);
}

이 예제에서 본문은 배경색이 #3498db로 설정되고, 제목(h1) 텍스트는 #2ecc71로 표시됩니다.

728x90

실용적인 예제

CSS 변수를 적용하여 테마를 설정한 간단한 웹페이지를 만들어 보겠습니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables Example</title>
<style>
    :root {
        --background-color-light: #ffffff;
        --background-color-dark: #34495e;
        --text-color-light: #34495e;
        --text-color-dark: #ecf0f1;

        /* 브레이크포인트 정의 */
        --mobile-breakpoint: 600px; 
    }

    body.light-mode {
        background-color: var(--background-color-light);
        color: var(--text-color-light);
    }

    body.dark-mode {
        background-color: var(--background-color-dark);
        color: var(--text-color-dark);
    }

    @media (max-width: var(--mobile-breakpoint)) {
      h1 {
          font-size: 24px; /* 모바일에서 작은 크기 */
      }
   }
</style>
</head>
<body class="light-mode">
<h1>Hello World!</h1>

<button onclick="toggleTheme()">Toggle Theme</button>

<script>
function toggleTheme() {
   const body = document.body;
   if (body.classList.contains('light-mode')) {
       body.classList.remove('light-mode');
       body.classList.add('dark-mode');
   } else {
       body.classList.remove('dark-mode');
       body.classList.add('light-mode');
   }
}
</script>

</body>
</html>

이 예제에서는 CSS 변수를 사용하여 밝은 모드와 어두운 모드의 배경색과 텍스트 색상을 정의합니다. 버튼을 클릭하면 <body> 요소에서 클래스를 추가하거나 제거하여 동적으로 밝은 모드와 어두운 모드 간에 전환됩니다.

결론

CSS 변수를 사용하면 스타일 관리가 간소화될 뿐만 아니라, 개발자가 보다 동적이고 반응적인 디자인을 쉽게 만들 수 있도록 합니다. 재사용성과 유지 관리의 용이성을 활용함으로써, 웹 애플리케이션 전반에 걸쳐 일관된 테마를 통해 사용자 경험을 향상시키면서 작업 흐름을 크게 간소화할 수 있습니다. CSS 변수는 현대 웹 디자인의 혁신적인 도구로, 모든 웹 개발자가 반드시 익혀야 할 기술입니다.

728x90