Day 3 - CSS Variables

완성 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Scoped CSS Variables and JS</title>
</head>
<body>
<h2>Update CSS Variables with <span class="hl">JS</span></h2>

<div class="controls">
<label for="spacing">Spacing:</label>
<input
id="spacing"
type="range"
name="spacing"
min="10"
max="200"
value="10"
data-sizing="px"
/>

<label for="blur">Blur:</label>
<input
id="blur"
type="range"
name="blur"
min="0"
max="25"
value="10"
data-sizing="px"
/>

<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#ffc600" />
</div>

<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500" />

<style>
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}

img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}

.hl {
color: var(--base);
}

/*
misc styles, nothing to do with CSS variables
*/

body {
text-align: center;
background: #193549;
color: white;
font-family: 'helvetica neue', sans-serif;
font-weight: 100;
font-size: 50px;
}

.controls {
margin-bottom: 50px;
}

input {
width: 100px;2
}
</style>

<script>
const inputs = document.querySelectorAll(".controls input");

function handleUpdate() {
const suffix = this.dataset.sizing || "";
document.documentElement.style.setProperty(
`--${this.name}`,
this.value + suffix
);
}

inputs.forEach((input) => input.addEventListener("change", handleUpdate));
inputs.forEach((input) =>
input.addEventListener("mousemove", handleUpdate)
);
</script>
</body>
</html>

사용자 지정 CSS 속성 (CSS Variable)

CSS Variable을 사용하면 CSS에서 사용자가 임의로 변수를 선언하여 사용할 수 있다. 복잡한 웹사이트는 많은 양의 CSS를 가지고 있는데, 종종 많은 값을 반복적으로 사용한다. 이 때 CSS 속성을 변수로 선언해놓고 반복 사용할 수 있다.

예를 들어 #ffc600 색상이 CSS 속성에서 반복될 때 --main-color로 정해놓고 사용할 수 있어 헷갈리지도 않고 가독성도 훨씬 좋다.

기본 사용법

1
2
3
4
:root {
--main-color: #ffc600;
--sub-color: dodgerblue;
}

이렇게 사용자 지정 속성을 선언한다. 사용할 때는

1
2
3
4
element {
background-color: var(--main-color);
color: var(--sub-color);
}

이렇게 사용할 수 있다.

documentElement, HTMLElement.dataset

handleUpdate 함수 부분을 다시 보자.

1
2
3
4
5
6
7
function handleUpdate() {
const suffix = this.dataset.sizing || "";
document.documentElement.style.setProperty(
`--${this.name}`,
this.value + suffix
);
}

input 태그에서 변화가 일어날 때마다 이 handleUpdate 함수가 호출된다.

HTMLElement.dataset

여기서 const suffix = this.dataset.sizing || '';를 보면 setProperty에서 변경할 속성의 size를 나타냄을 알 수 있는데, 여기서 사용되는 것이 dataset이다.

이벤트가 일어나고 있는 객체 input에서 데이터 속성 data-를(이 예제에서는 data-sizing) 두어 그 데이터를 JavascriptCSS에서 불러올 수 있다.

document.documentElement

이전에 :root에서 CSS Variable을 선언했다. 이 값은 이벤트가 일어나면 바꿔져야 한다. 이 때 root element에 접근하기 위해 document.documentElement를 사용한다.

모든 비어있지 않은 HTML 문서의 documentElement는 항상 <html>요소를 가리킨다.