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) 두어 그 데이터를 Javascript나 CSS에서 불러올 수 있다.

document.documentElement

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

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