var() 함수, css 변수 설정
1. CSS 변수 설정
CSS 변수를 설정할 때는 --로 시작하는 이름을 사용합니다. 변수 이름은 소문자, 숫자, 밑줄(_) 등을 포함할 수 있지만, 항상 --로 시작해야 합니다.
전역 변수로 설정 및 사용
전역 변수를 설정할 때는 보통 :root 선택자를 사용합니다. :root는 HTML 문서의 최상위 요소를 가리키므로, 모든 곳에서 접근할 수 있는 변수를 정의할 수 있습니다. 이렇게 정의된 변수는 index.html에서 로드되는 다른 CSS 파일이나 스타일 태그에서도 사용할 수 있습니다. 사용은 함수 var()를 이용하며, 아래 var(--padding, 10px) 의 경우는 --padding 설정값이 없으면 디폴트로 10px이 적용됩니다.
:root {
--main-font: 'Arial, sans-serif';
--button-color: #e74c3c;
--main-color: #3498db;
--padding: 15px;
--url: url('images/bg.jpg');
}
body {
font-family: var(--main-font);
}
button {
background-color: var(--button-color);
color: white;
padding: var(--padding, 10px);
}지역 변수로 설정
특정 요소나 클래스 안에서만 사용할 변수를 설정할 수도 있습니다. 이때 변수는 해당 요소 내부에서만 접근 가능합니다. 여기서 --card-padding은 .card 클래스 내부에서만 사용할 수 있는 변수입니다. CSS 변수는 기본적으로 상속되므로, 부모 요소에서 설정된 변수를 자식 요소에서 참조할 수 있습니다.
.card {
--card-padding: 20px;
padding: var(--card-padding);
}
HTML에서 변수 설정하기 - CSS 변수를 HTML의 style 속성으로 설정할 수도 있습니다. 이를 통해 JavaScript에서 동적으로 설정하거나 HTML 구조 내에서 특정 요소에 지역 변수를 지정할 수 있습니다:
<div class="soda-can" style="--url: url(images/example.jpg);"></div>
2. CSS 변수 변경 - JavaScript에서 설정 및 변경
CSS 변수는 JavaScript로 동적으로 변경할 수 있어, 스타일을 실시간으로 업데이트할 때 유용합니다. 이를 위해 JavaScript의 setProperty() 메서드를 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
:root {
--main-color: #3498db;
}
body {
background-color: var(--main-color);
}
</style>
</head>
<body>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
document.documentElement.style.setProperty('--main-color', '#e74c3c');
}
</script>
</body>
</html>3. CSS 변수와 calc(), 혼합 사용
CSS 변수는 calc()와 같은 함수에서 연산에 사용할 수 있습니다
:root {
--spacing: 15px;
}
.container {
width: calc(100% - var(--spacing) * 2);
margin: var(--spacing);
}요약
- 변수 정의: --로 시작하여 :root나 특정 요소에 설정.
- 변수 참조: var(--변수이름, 기본값).
- JavaScript와 동적 적용: setProperty()로 변수 값을 실시간 변경.
- 연산 가능: calc() 등 함수와 혼합하여 활용.