1.1 CSS 변수란?
CSS 변수, custom properties라고도 알려진 이것들은 CSS에서 선언할 수 있는 변수로, 색상, 크기, 폰트 및 기타 CSS 속성의 값을 저장하는 데 사용돼. 웹 페이지 스타일의 유연성과 유지 보수성을 높이는 데 효과적이야.
CSS 변수란?
CSS 변수는 CSS 속성의 값을 저장하고 여러 스타일 부분에서 반복적으로 사용할 수 있는 변수야. 더블 대쉬 (--)를 사용해 정의하고, 일반적으로 :root 셀렉터에서 정의해서 문서 전체에서 사용할 수 있도록 해.
예제:
CSS
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
CSS 변수의 주요 특징:
- 재사용성: CSS 변수는 값을 한 번 정의하면 여러 CSS 코드 부분에서 반복적으로 사용할 수 있어. 이는 중복을 피하고 스타일 관리를 쉽게 해줘.
- 유연성: CSS 변수의 값은 요소의 상태나 미디어 쿼리 같은 조건에 따라 변경될 수 있어. 이는 더욱 적응적이고 동적인 스타일을 만들어줘.
- 상속: CSS 변수는 부모 요소에서 자식 요소로 상속되어 스타일 관리와 조직을 쉽게 만들어줘.
- 관리 가능성: 변수 사용은 코드 유지 보수를 쉽게 해, 왜냐면 변수 값을 변경하면 그 변수를 사용하는 모든 요소에 자동으로 반영되거든.
1.2 CSS 변수 사용 예제
JavaScript에서 CSS 변수 사용 예제:
JavaScript
document.documentElement.style.setProperty('--main-color', '#e74c3c');
예제 1: 변수 정의와 사용
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
a {
color: var(--primary-color);
}
a:hover {
color: darken(var(--primary-color), 10%);
}
HTML
<body>
<p>이것은 단락입니다.</p>
<a href="#">이것은 링크입니다.</a>
</body>
설명:
- 이 예제에서는 세 가지 변수가 정의돼 있어:
--main-bg-color,--main-text-color,--primary-color - 이 변수들은 배경색, 텍스트 색상 및 링크 색상을 설정하는 데 사용돼
1.3 JavaScript에서 변수 값 변경
이 예제에서는 페이지의 테마를 설정하는 데 변수가 사용돼. 버튼을 클릭하면 변수 값이 변경되고, 이에 따라 배경과 텍스트 색상이 변화해:
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
HTML
<button id="toggle-theme">테마 전환</button>
<p>이것은 단락입니다.</p>
JavaScript
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--main-bg-color') === '#f0f0f0') {
root.style.setProperty('--main-bg-color', '#333');
root.style.setProperty('--main-text-color', '#f0f0f0');
} else {
root.style.setProperty('--main-bg-color', '#f0f0f0');
root.style.setProperty('--main-text-color', '#333');
}
});
GO TO FULL VERSION