2.1 CSS 변수 선언하기
CSS 변수는 사용자 정의 속성(Custom Properties)이라고도 불리며, CSS 코드의 다양한 부분에서 재사용할 수 있는 값을 정의할 수 있게 해줘. 스타일 관리를 크게 단순화하고 유연성을 높여줘.
CSS 변수는 더블 대시(--)를 사용하여 선언되며, 어떤 선택자에서도 설정할 수 있어. 하지만 문서 전체에서 변수를 활용할 수 있도록 하기 위해 종종 루트 선택자 :root에 정의해.
문법:
선택자 {
--변수-이름: 값;
}
예제:
이 예제에서는 네 가지 변수를 선언했어: --main-bg-color, --main-text-color, --primary-color, and --font-size.
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
CSS 변수 사용하기
변수의 값을 사용하기 위해 var() 함수를 사용하며, 이 함수는 변수 이름을 인수로 받아.
문법:
선택자 {
속성: var(--변수-이름);
}
예제:
이 예제에서는 변수 값을 사용하여 배경색, 텍스트 색상, 폰트 크기, 링크 색상을 지정해.
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
2.2 CSS 변수 사용 예제
예제 1: 변수의 기본 사용
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
<body>
<p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
</body>
결과:
- 페이지 배경은 밝은 회색이 될 거야
- 텍스트는 어두운 회색이 될 거야
- 폰트 크기는 16픽셀이 될 거야
- 링크는 파란색이 될 거야
예제 2: 개별 컴포넌트에서 변수 재정의하기
CSS 변수는 개별 요소나 컴포넌트에 대해 재정의할 수 있어서 스타일링에 유연성을 제공해:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
color: var(--main-bg-color);
}
.footer {
--primary-color: #e74c3c; /* 변수 재정의 */
background-color: var(--primary-color);
color: var(--main-bg-color);
}
<div class="header">
<p>This is the header.</p>
</div>
<div class="footer">
<p>This is the footer.</p>
</div>
결과:
- 헤더의 배경은 파란색이고, 텍스트는 밝은 회색이 될 거야
- 푸터의 배경은 빨간색(재정의된 변수)이고, 텍스트는 밝은 회색이 될 거야
예제 3: 다른 값들과 조합하여 변수 사용하기
CSS 변수는 다른 CSS 값 및 함수와 조합하여 사용할 수 있어:
:root {
--padding: 10px;
--margin: 20px;
}
.container {
padding: var(--padding);
margin: var(--margin) auto;
border: 1px solid black;
}
<div class="container">
<p>This is a container with padding and margin.</p>
</div>
결과:
- 컨테이너는 변수를 사용하여 설정된 패딩과 마진을 가질 거야
2.3 JavaScript에서 CSS 변수 사용하기
JavaScript에서 CSS 변수 사용 예
CSS 변수는 JavaScript를 사용하여 동적으로 변경할 수 있어, 실시간 스타일 적용을 가능하게 해:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
<button id="toggle-theme">Toggle Theme</button>
<p>This is a paragraph.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
root.style.setProperty('--bg-color', '#333333');
root.style.setProperty('--text-color', '#ffffff');
} else {
root.style.setProperty('--bg-color', '#ffffff');
root.style.setProperty('--text-color', '#000000');
}
});
설명:
버튼을 클릭하면 --bg-color와 --text-color 변수의 값이 변경되어 페이지의 배경색과 텍스트 색상이 바뀌어.
GO TO FULL VERSION