CSS 변수는 CSS Custom Properties라고도 불리며, 반복적으로 사용하는 값을 변수처럼 저장하고 재사용할 수 있게 도와줍니다. CSS에서 코드의 유연성을 높이고, 유지보수를 쉽게 할 수 있도록 설계된 기능으로, 동일한 값이 여러 군데에 사용될 때 특히 유용합니다. 이 변수를 사용하면, 나중에 변경이 필요할 때 모든 값을 하나하나 수정할 필요 없이 변수만 변경하면 됩니다.
CSS 변수의 선언과 사용
CSS 변수는 일반적인 CSS 속성과는 달리, -- (이중 대시)로 시작하는 이름으로 선언됩니다. 변수를 선언하는 방법은 다음과 같습니다:
:root {
--main-color: #3498db;
--padding-size: 20px;
}:root는 문서의 최상위 요소로, 전역에서 변수를 사용할 수 있도록 정의하는 데 사용됩니다. 이후 이 변수를 CSS 속성 내에서 활용할 때는 var() 함수를 사용합니다.
.button {
background-color: var(--main-color);
padding: var(--padding-size);
}위 예제에서, .button 클래스는 background-color로 --main-color, padding 값으로 --padding-size 변수를 사용하고 있습니다. 만약 --main-color를 다른 색상으로 바꾸고 싶다면, --main-color 변수를 정의한 부분만 수정하면 됩니다.
기본값 설정
CSS 변수는 값을 설정하지 않았을 때 사용할 기본값을 지정할 수도 있습니다. 이 기능은 변수를 사용할 때, 값이 없거나 정의되지 않은 경우에 기본값을 대신 사용할 수 있게 해줍니다.
.button {
background-color: var(--main-color, #2ecc71); /* 변수가 없을 때 #2ecc71 사용 */
}이 경우, --main-color가 정의되지 않았다면 #2ecc71이 기본값으로 적용됩니다.
예제: 테마 적용하기
CSS 변수는 테마를 적용할 때 매우 유용합니다. 예를 들어, 다크 모드와 라이트 모드를 지원하는 사이트에서 테마에 따라 색상을 쉽게 바꿀 수 있습니다.
:root {
--background-color: white;
--text-color: black;
}
.dark-mode {
--background-color: black;
--text-color: white;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}여기서 .dark-mode 클래스가 적용되면, --background-color와 --text-color 값이 변경되어 다크 모드가 구현됩니다. 이를 통해 간단히 테마 전환을 구현할 수 있습니다.
변수의 범위와 상속
CSS 변수는 선언된 요소와 그 하위 요소에서만 사용할 수 있습니다. 예를 들어, 특정 클래스 내에서만 변수를 사용할 수 있도록 정의할 수도 있습니다:
.container {
--main-color: #e74c3c;
}
.button {
background-color: var(--main-color); /* .container의 하위에 있는 경우에만 사용 가능 */
}여기서 .container 내의 요소만 --main-color 변수를 사용할 수 있습니다. CSS 변수는 상속되기 때문에, 하위 요소에서도 변수를 사용할 수 있는 특징이 있습니다.
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 {
--button-bg-color: #3498db;
--button-padding: 10px;
--button-font-size: 16px;
}
.button {
background-color: var(--button-bg-color);
padding: var(--button-padding);
font-size: var(--button-font-size);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="button">Click Me</button>
</body>
</html>
이 예제에서는 --button-bg-color, --button-padding, --button-font-size 변수를 선언하여 버튼 스타일을 정의하고 있습니다. 나중에 버튼 스타일을 변경하고 싶다면 변수만 수정하면 됩니다.
결론
CSS 변수는 코드의 유지보수와 유연성을 높여주는 강력한 도구입니다. 이를 통해 동일한 값을 여러 번 사용할 때 효율적으로 관리할 수 있으며, 테마 적용 및 다양한 스타일 변경 작업을 훨씬 간편하게 처리할 수 있습니다.
참고 사이트
'HTML&CSS' 카테고리의 다른 글
| [CSS] 애니메이션의 기본 원리 (0) | 2024.11.03 |
|---|---|
| [CSS] 함수 (calc(), min(), max()) (0) | 2024.10.26 |
| [CSS] 유닛 (px, em, rem, vw, vh) (0) | 2024.10.26 |
| [CSS] 16. 브라우저 호환성 및 최적화 (0) | 2024.09.21 |
| [CSS] 14. 반응형 웹 디자인 - 뷰포트 설정 (0) | 2024.09.20 |
| [CSS] 13. 반응형 웹 디자인 - 미디어 쿼리 (0) | 2024.09.20 |
| [CSS] 12. 변형과 애니메이션(웹사이트에 동적 요소 추가하기) (0) | 2024.09.20 |
| [CSS] 11. 색상과 배경(색상 모델과 배경 속성) (0) | 2024.09.18 |