CSS 변수는 스타일링 작업의 효율성을 높이고 유지보수를 쉽게 만들어 주는 강력한 도구입니다. 이 글에서는 CSS 변수를 정의하고 사용하는 방법부터 실전 예제까지, 재사용 가능한 스타일을 만드는 방법을 알아봅니다.
1. CSS 변수란?
CSS 변수는 값의 이름을 지정하여 여러 곳에서 반복적으로 사용할 수 있는 기능입니다.
변수를 사용하면 코드의 가독성과 유지보수성이 크게 향상됩니다.
2. CSS 변수의 기본 문법
2-1. 변수 선언
CSS 변수는 --로 시작하며, 주로 :root 선택자에 선언합니다.
:root는 HTML 문서의 최상위 요소로, 글로벌 변수를 정의하는 데 사용됩니다.
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-size: 16px;
}2-2. 변수 사용
var() 함수를 사용해 변수를 호출합니다.
button {
background-color: var(--primary-color);
color: white;
font-size: var(--font-size);
}3. CSS 변수의 장점
1. 재사용 가능: 동일한 값을 반복적으로 사용할 때 유용합니다.
2. 유지보수 용이: 값 변경 시 변수만 수정하면 전체 스타일이 업데이트됩니다.
3. 테마 변경 가능: 다크 모드, 라이트 모드와 같은 테마를 쉽게 구현할 수 있습니다.
4. CSS 변수의 실전 활용
4-1. 버튼 스타일링 예제
:root {
--primary-color: #007bff;
--hover-color: #0056b3;
--font-size: 16px;
--padding: 10px 20px;
}
button {
background-color: var(--primary-color);
color: white;
font-size: var(--font-size);
padding: var(--padding);
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: var(--hover-color);
}
결과: 버튼에 마우스를 올리면 부드럽게 색상이 변경됩니다. 변수 사용으로 색상과 패딩을 쉽게 관리할 수 있습니다.
4-2. 다크 모드와 라이트 모드
:root {
--background-color: #ffffff;
--text-color: #000000;
}
body.dark-mode {
--background-color: #000000;
--text-color: #ffffff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
결과: body에 dark-mode 클래스를 추가하면 다크 모드가 적용됩니다.
4-3. 카드 레이아웃
:root {
--card-bg: #f9f9f9;
--card-border: #e0e0e0;
--card-padding: 20px;
--card-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card {
background-color: var(--card-bg);
border: 1px solid var(--card-border);
padding: var(--card-padding);
border-radius: 10px;
box-shadow: var(--card-shadow);
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
결과: 카드에 마우스를 올리면 그림자 효과가 강조되어 입체적인 디자인을 구현할 수 있습니다.
5. CSS 변수와 SCSS 변수의 차이
CSS 변수
브라우저에서 동적으로 변경 가능
:root 또는 특정 요소에 선언 가능
JavaScript로 제어 가능
SCSS 변수
컴파일 시 값이 고정됨
전역 또는 특정 SCSS 파일에 선언
JavaScript와 연동 불가
6. CSS 변수와 JavaScript 활용
CSS 변수는 JavaScript와 함께 사용하면 동적인 스타일 변경이 가능합니다.
6-1. JavaScript로 변수 변경
:root {
--primary-color: #007bff;
}
<button id="change-color">색상 변경</button>
document.getElementById('change-color').addEventListener('click', () => {
document.documentElement.style.setProperty('--primary-color', '#28a745');
});
결과: 버튼 클릭 시 --primary-color의 값이 녹색으로 변경됩니다.
7. CSS 변수 활용 팁
1. 계층적인 변수 정의: 특정 컴포넌트에만 적용되는 로컬 변수를 선언하세요.
.card {
--card-padding: 15px;
}
2. 브라우저 호환성 확인: CSS 변수는 IE를 제외한 대부분의 현대 브라우저에서 지원됩니다. IE 지원이 필요한 경우 폴백 스타일을 추가하세요.
button {
background-color: #007bff; /* 기본값 */
background-color: var(--primary-color);
}
3. 유지보수를 위한 이름 규칙: 변수 이름은 명확하고 일관성 있게 작성하세요. 예: --btn-primary-bg 대신 --primary-color.
CSS 변수는 코드의 반복을 줄이고, 유지보수를 쉽게 만들어주는 필수적인 도구입니다. 재사용 가능한 스타일을 작성하고, 다크 모드와 같은 테마 변경도 간단하게 구현할 수 있습니다. 이 글에서 소개한 예제를 실습하며 CSS 변수의 잠재력을 최대한 활용해 보세요.
다음 글에서는 CSS 커스텀 프로퍼티와 변수의 고급 활용법을 다룰 예정입니다.
