나눔웹 실무 꿀팁
CSS 변수로 유지보수와 테마 기능을 한 번에! (CSS Custom Properties)
웹사이트 제작 시, 수많은 CSS 파일에서 같은 색상 코드나 폰트 크기 값을 반복해서 입력하고 계신가요?
나중에 디자인을 변경하려면 모든 CSS 파일을 다 뒤져야 하는 번거로움에 CSS 변수가 강력한 해결책을 제시합니다.
💡 CSS 변수란 무엇일까요?
자바스크립트의 변수처럼 CSS에서도 값을 저장하고, 그 이름을 호출해서 사용할 수 있는 기능입니다. 디자인 요소를 한곳에서 중앙 관리할 수 있게 도와줍니다.
1. CSS 변수 정의하고 사용하기
CSS 변수는 주로 :root라는 특별한 선택자에 정의합니다. 이렇게 정의된 변수는 웹사이트 전체에서 사용할 수 있습니다.
변수 이름은 반드시 두 개의 하이픈(`--`)으로 시작해야 하며, 사용할 때는 `var()` 함수로 감싸서 호출합니다.
/* CSS 변수 정의 ( :root 에 정의 ) */
:root {
/* 디자인 토큰 정의 */
--main-color: #cc2b2b; /* 메인 컬러 */
--accent-color: #f59f00; /* 포인트 컬러 */
--text-main: #111111; /* 메인 텍스트 컬러 */
--text-sub: #555555; /* 서브 텍스트 컬러 */
--font-base: 'Pretendard', sans-serif; /* 기본 폰트 */
}
/* 정의한 CSS 변수 사용 */
.header {
background-color: var(--main-color); /* 변수 사용 */
color: #fff;
font-family: var(--font-base); /* 변수 사용 */
}
.button {
background-color: var(--accent-color); /* 변수 사용 */
color: var(--text-main); /* 변수 사용 */
}
2. CSS 변수로 테마 기능 쉽게 구현하기
CSS 변수의 진가는 다크 모드나 다양한 디자인 테마를 구현할 때 발휘됩니다.
특정 클래스나 속성에 따라 CSS 변수 값을 다른 값으로 재정의하기만 하면 됩니다.
/* 다크 모드 테마 정의 */
.body[data-theme="dark"] {
--main-color: #9a0007; /* 다크 모드 메인 컬러 */
--text-main: #ffffff; /* 다크 모드 메인 텍스트 컬러 */
--text-sub: #dddddd; /* 다크 모드 서브 텍스트 컬러 */
--background: #111111; /* 다크 모드 배경 컬러 */
}
/* 다크 모드 적용 예시 */
.body[data-theme="dark"] .nw-board-notice {
background: var(--background); /* 변수 사용 */
color: var(--text-sub); /* 변수 사용 */
}
.body[data-theme="dark"] .nw-board-notice-title {
color: var(--text-main); /* 변수 사용 */
}
나눔웹은 복잡한 CSS를 효율적으로 관리하여 사이트의 확장성을 높입니다.
CSS 변수를 통해 디자인 변경이나 다크 모드 같은 테마 기능을 쉽게 구현해 보세요.