CSS의 할당 패턴(Assignment Pattern)

2025. 3. 16. 19:14

CSS의 할당 패턴(Assignment Pattern)은 CSS 변수(Custom Properties)를 활용하여 스타일을 동적으로 할당하는 방법입니다. 이 패턴은 CSS의 재사용성과 유지보수성을 크게 향상시킬 수 있습니다. 이 글에서는 할당 패턴의 개념을 쉽게 설명하고, 실제 예제를 통해 어떻게 사용할 수 있는지 알아보겠습니다.

CSS의 할당 패턴

CSS의 할당 패턴

1. 할당 패턴이란?

2. 기본 사용법

3. 할당 패턴의 활용 예제

4. 할당 패턴의 장점

5. 결론

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

목차 1에 해당하는 링크

할당 패턴은 CSS 변수를 사용하여 스타일 값을 동적으로 할당하는 방법입니다. CSS 변수는 --로 시작하며, var() 함수를 통해 값을 참조할 수 있습니다. 이 패턴은 다음과 같은 장점이 있습니다.

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

목차 2에 해당하는 링크

CSS 변수를 선언하고, var() 함수를 통해 값을 할당합니다.

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

.button {
  background-color: var(--primary-color);
  color: white;
}

.link {
  color: var(--secondary-color);
}

:root에서 전역 변수를 선언합니다.
var(--primary-color)를 사용하여 변수 값을 할당합니다.

할당 패턴의 활용 예제

1) 테마 변경

할당 패턴을 사용하면 테마를 쉽게 변경할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <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()">Toggle Theme</button>
</body>

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

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

2) 반응형 디자인

할당 패턴을 사용하면 미디어 쿼리에서도 변수를 활용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    :root {
      --font-size: 16px;
    }

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

    p {
      font-size: var(--font-size);
    }
  </style>
</head>

<body>
  <p>Hello, World!</p>
</body>

</html>

화면 크기에 따라 폰트 크기를 동적으로 변경합니다.

3) 컴포넌트 스타일링

할당 패턴을 사용하면 컴포넌트별로 스타일을 유연하게 적용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    :root {
      --button-padding: 10px 20px;
      --button-radius: 5px;
    }

    .button {
      padding: var(--button-padding);
      border-radius: var(--button-radius);
    }

    .button.primary {
      --button-padding: 15px 30px;
      --button-radius: 10px;
    }
  </style>
</head>

<body>
  <button class="button">Normal Button</button>
  <button class="button primary">Primary Button</button>
</body>

</html>

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

4) 동적 스타일링

JavaScript를 사용하여 CSS 변수를 동적으로 변경할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <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>

할당 패턴의 장점

재사용성: 동일한 값을 여러 곳에서 사용할 수 있습니다.
유지보수성: 변수 하나만 수정하면 관련된 모든 스타일이 변경됩니다.
동적 스타일링: JavaScript를 통해 변수 값을 변경하여 동적으로 스타일을 적용할 수 있습니다.
테마 관리: 테마를 쉽게 변경할 수 있습니다.
반응형 디자인: 미디어 쿼리에서도 변수를 활용할 수 있습니다.

결론

CSS의 할당 패턴은 CSS 변수를 활용하여 스타일을 동적으로 할당하는 강력한 방법입니다. 이 패턴을 사용하면 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있으며, 테마 변경, 반응형 디자인, 동적 스타일링 등 다양한 상황에서 유용하게 활용할 수 있습니다.

저작자표시 비영리 변경금지

'기록하고 싶은 모든 것 > 지식' 카테고리의 다른 글

자바스크립트 리터럴 표기법: 왜 사용해야 할까? (Object(), Array() 대신 리터럴 표기법을 선택해야 하는 이유) (1)	2025.03.16
탄핵이란 무엇인가? (1)	2024.12.18
javascript 에서 document 는 네이티브 함수가 맞아? (0)	2024.11.22
노드JS 와 크롬브라우저의 엔진은 같은거니? (0)	2024.11.22
ISO 국제표준화기구 세탁기호 (한국 외 다른나라) (1)	2024.11.05

열공의 기록