CSS Variables

CSS Variables: 효율적인 스타일 관리

*CSS Variables(변수)**는 CSS에서 자주 사용하는 값을 변수로 정의하고, 이를 재사용하는 기능입니다. 이는 CSS 코드의 유연성을 높이고, 유지보수를 쉽게 만들어줍니다. 변수를 정의하면, 하나의 값을 여러 곳에서 쉽게 사용할 수 있고, 필요할 때마다 한 번의 수정으로 전체 스타일을 변경할 수 있습니다.

1. CSS Variables의 기본 개념

CSS 변수는 **--**로 시작하는 이름을 사용하여 특정 값을 저장하고, var() 함수를 통해 해당 값을 참조합니다. 변수를 주로 **루트(:root)**에서 정의하여, 전체 문서에서 사용할 수 있습니다.

기본 구문

:root {
  --main-color: #4CAF50; /* 변수 정의 */
  --main-padding: 20px;
}

.element {
  background-color: var(--main-color); /* 변수 참조 */
  padding: var(--main-padding);
}

-main-color: :root에서 정의한 전역 변수.
var(--main-color): 변수 값을 참조하여 백그라운드 색상에 적용.

2. 변수 정의와 사용

변수는 주로 **root**에 정의하지만, 특정 선택자 내에서도 정의할 수 있습니다. 선택자 내에서 정의된 변수는 해당 선택자 내부에서만 사용할 수 있습니다.

예시: 기본 변수 사용

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

button {
  background-color: var(--primary-color); /* 변수 참조 */
  color: white;
  font-size: var(--font-size);
  padding: 10px;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: var(--secondary-color); /* 변수 참조 */
}

-primary-color: 버튼의 기본 배경색으로 사용.
-secondary-color: 호버 시 버튼의 배경색으로 변경.
-font-size: 버튼의 글꼴 크기로 사용.

3. 지역 변수와 전역 변수

변수는 전역 변수(루트에서 정의된 변수)와 지역 변수로 나뉩니다. 특정 요소나 클래스 내에서 변수를 정의하면 해당 요소 내에서만 사용할 수 있는 지역 변수가 됩니다.

예시: 전역 변수와 지역 변수

:root {
  --main-padding: 15px;
}

.card {
  --main-padding: 30px; /* 지역 변수 정의 */
  padding: var(--main-padding); /* 지역 변수 사용 */
}

.header {
  padding: var(--main-padding); /* 전역 변수 사용 */
}

.card: 지역 변수로 -main-padding을 30px로 재정의.
.header: 전역 변수인 -main-padding(15px)을 그대로 사용.

4. 기본값 지정: `var()` 함수의 두 번째 인자

var() 함수는 변수를 참조할 때 두 번째 인자로 기본값을 설정할 수 있습니다. 만약 변수가 정의되지 않았을 때, 기본값이 사용됩니다.

예시: 기본값 지정

:root {
  --main-color: #3498db;
}

.button {
  background-color: var(--main-color, #e74c3c); /* 기본값 설정 */
  padding: 10px;
  border-radius: 5px;
}

이 코드는 **--main-color**가 정의되어 있으므로 **#3498db**가 적용됩니다. 만약 변수가 정의되지 않았을 경우, 기본값인 **#e74c3c**가 사용됩니다.

5. 실전 예시: 다크 모드와 라이트 모드 구현

CSS 변수를 사용하면 다크 모드와 라이트 모드 같은 테마 변경을 쉽게 구현할 수 있습니다. 각 테마에 맞는 변수를 정의한 후, HTML 클래스를 변경하여 모드를 전환할 수 있습니다.

예시: 다크 모드와 라이트 모드

<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="light-mode">
  <div class="content">
    <h1>Hello, World!</h1>
    <button class="toggle-mode">Toggle Mode</button>
  </div>
</body>
</html>

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

.dark-mode {
  --bg-color: #2c3e50;
  --text-color: #ecf0f1;
  --button-bg: #e74c3c;
}

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

button {
  background-color: var(--button-bg);
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

설명

라이트 모드: 기본적으로 흰색 배경과 검은색 텍스트가 적용됩니다.
다크 모드: .dark-mode 클래스가 적용되면, 어두운 배경과 밝은 텍스트로 변경됩니다.
버튼을 클릭해 body 클래스가 **.light-mode*에서 **.dark-mode*로 변경되면, CSS 변수가 업데이트되어 테마가 전환됩니다.

6. 실전 예시: 색상 테마 변경

CSS 변수를 사용하여 색상 테마를 빠르게 변경할 수 있습니다. 이를 통해 웹사이트의 스타일을 일관되게 유지하면서, 변수만 수정하여 다른 테마로 쉽게 변경할 수 있습니다.

예시: 테마 색상 변경

<div class="container">
  <h1>Welcome to My Website</h1>
  <p>Enjoy exploring different color themes.</p>
</div>

<button class="theme-button">Switch Theme</button>

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

.container {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
}

button {
  background-color: var(--secondary-color);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

.light-theme {
  --primary-color: #ecf0f1;
  --secondary-color: #e74c3c;
}

.container: 기본적으로 파란색 배경을 사용하며, 다크 모드에서는 밝은 색으로 변경됩니다.
버튼을 클릭하면 body 클래스가 변경되어 테마 색상이 전환됩니다.

7. CSS 변수의 장점

코드 재사용성 증가: 변수를 사용하면 일관된 스타일을 유지하면서도, 중복된 코드를 최소화할 수 있습니다.
유지보수 용이: 여러 곳에서 동일한 스타일 값을 사용하는 경우, 변수 값을 한 번만 변경해도 모든 곳에서 자동으로 업데이트됩니다.
반응형 디자인에 유용: CSS 변수는 미디어 쿼리 내에서도 사용할 수 있어, 화면 크기나 상황에 맞춰 동적으로 값을 변경할 수 있습니다.

*CSS Variables(변수)**는 스타일링을 더욱 효율적으로 관리할 수 있는 강력한 도구입니다. 변수를 정의해두면 반복적인 스타일을 쉽게 관리하고 수정할 수 있어, 유지보수가 쉬워집니다. 이를 통해 웹사이트의 재사용성을 높이고, 다양한 테마 전환 같은 기능을 간편하게 구현할 수 있습니다.

코딩 스쿨 CSS