CSS 변수(Custom Properties) 활용법

2025. 3. 16. 19:31

CSS 변수(Custom Properties)는 동일한 값을 재사용할 때 중복을 피하고, 코드의 유지보수성을 높이는 강력한 도구입니다. 이 글에서는 CSS 변수의 기본 개념부터 실제 사용 예제까지, SEO 규칙에 맞춰 자세히 설명드리겠습니다.

CSS 변수 활용법

CSS 변수 활용법

1. CSS 변수란?

2. CSs 변수의 장점

3. CSS 변수 사용 예제

4. 결론

※ 위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

CSS 변수란?

CSS 변수는 --로 시작하며, var() 함수를 통해 값을 참조할 수 있습니다. 이 변수는 전역적으로 선언하거나 특정 요소에만 적용할 수 있습니다.

:root {
  --primary-color: #3498db; /* 전역 변수 선언 */
}

.element {
  background-color: var(--primary-color); /* 변수 사용 */
}

CSS 변수의 장점

재사용성: 동일한 값을 여러 곳에서 사용할 수 있습니다.
유지보수성: 변수 하나만 수정하면 관련된 모든 스타일이 변경됩니다.
동적 스타일링: JavaScript를 통해 변수 값을 변경하여 동적으로 스타일을 적용할 수 있습니다.

CSS 변수 사용 예제

1) 기본 사용법

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    :root {
      --primary-color: #3498db; /* 전역 변수 선언 */
      --secondary-color: #2ecc71;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: var(--primary-color); /* 변수 사용 */
    }

    .text {
      color: var(--secondary-color); /* 변수 사용 */
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <p class="text">이 텍스트는 보조 색상으로 표시됩니다.</p>
</body>
</html>

:root에서 전역 변수를 선언하고, .box와 .text에서 변수를 사용합니다.

2) 테마 변경

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    :root {
      --background-color: #ffffff;
      --text-color: #333333;
    }

    .dark-theme {
      --background-color: #333333;
      --text-color: #ffffff;
    }

    body {
      background-color: var(--background-color);
      color: var(--text-color);
    }
  </style>
</head>
<body>
  <p>Hello, World!</p>
  <button onclick="toggleTheme()">테마 전환</button>

  <script>
    function toggleTheme() {
      document.body.classList.toggle('dark-theme');
    }
  </script>
</body>
</html>

:root와 .dark-theme에서 각각 다른 변수 값을 정의합니다.
JavaScript를 사용하여 테마를 전환할 수 있습니다.

3) 반응형 디자인

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    :root {
      --font-size: 16px;
    }

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

    p {
      font-size: var(--font-size);
    }
  </style>
</head>
<body>
  <p>이 텍스트는 화면 크기에 따라 폰트 크기가 변경됩니다.</p>
</body>
</html>

미디어 쿼리를 사용하여 화면 크기에 따라 폰트 크기를 동적으로 변경합니다.

4) 컴포넌트 스타일링

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    :root {
      --button-padding: 10px 20px;
      --button-radius: 5px;
    }

    .button {
      padding: var(--button-padding);
      border-radius: var(--button-radius);
      background-color: #3498db;
      color: white;
    }

    .button.primary {
      --button-padding: 15px 30px;
      --button-radius: 10px;
    }
  </style>
</head>
<body>
  <button class="button">일반 버튼</button>
  <button class="button primary">기본 버튼</button>
</body>
</html>

.button과 .button.primary에서 각각 다른 변수 값을 정의합니다.
컴포넌트별로 스타일을 유연하게 적용할 수 있습니다.

5) 동적 스타일링

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    :root {
      --box-size: 100px;
    }

    .box {
      width: var(--box-size);
      height: var(--box-size);
      background-color: #3498db;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <input type="range" min="50" max="200" oninput="changeSize(this.value)">

  <script>
    function changeSize(size) {
      document.documentElement.style.setProperty('--box-size', `${size}px`);
    }
  </script>
</body>
</html>

input 요소를 통해 박스 크기를 동적으로 변경합니다.

결론

CSS 변수는 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있는 강력한 도구입니다. 테마 변경, 반응형 디자인, 동적 스타일링 등 다양한 상황에서 유용하게 활용할 수 있습니다.

저작자표시 비영리 변경금지 (새창열림)

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

JS - 바닐라js로 FadeIn, FadeOut 기능 구현 (0)	2025.03.16
JS - var 선언과 호이스팅(Hoisting) (0)	2025.03.16
JS - 자바스크립트(javascript) 만으로 font (폰트) CSS 속성 조작하기 (0)	2022.05.03
JS - 자바스크립트(javascript) 만으로 border-style(border, 보더스타일) CSS 속성 조작하기 (0)	2022.05.02
JS - 자바스크립트(javascript) 만으로 background (이미지, 위치, 반복, 모드 등등) CSS 속성 조작하기 (0)	2022.04.29

열공의 기록