[JavaScript30] 3. CSS Variables | CSS 변수, setProperty()

📃 요구사항

spacing, blur, base color에 대한 input을 마우스로 조절하면, 해당하는 값으로 CSS 요소가 업데이트 된다.
css variable을 사용한다.
위의 이벤트는 마우스가 움직임에 따라 실시간으로 반영되어야 한다.

✨ 결과화면

💻 소스코드

🙄 내가 작성한 코드

HTML, CSS

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
    <script src="variables.js" defer></script>
  </head>
  <body>
    <h2>Update CSS Variables with <span class="hl">JS</span></h2>
    ...
    <style>
      :root {
        /* color, space, blur의 기본값 */
        --color-base: #ffc600;
        --space-base: 10px;
        --blur-base: 10px;
      }

      img {
        transform: translate(var(--space-base));
        filter: blur(var(--blur-base));
      }

      .hl {
        color: var(--color-base);
      }
    </style>
  </body>
</html>

css variable의 사용을 위해 :root에 각각 base variable을 선언해 주었고, 필요한 요소에 해당 css variable을 사용하여 값을 대입해 주었다.

"use strict";

// root에 선언된 css variable을 제어하기 위해 선언
let root = document.querySelector(":root");
// 각 input에 addEventListener로 이벤트를 추가하기 위해 선언
const color = document.getElementById("base");
const blur = document.getElementById("blur");
const spacing = document.getElementById("spacing");

// 1. blur 이벤트
blur.addEventListener("mousemove", (e) => {
  root.style.setProperty("--blur-base", `${e.target.value}px`);
});

// 2. spacing 이벤트
spacing.addEventListener("mousemove", (e) => {
  root.style.setProperty(
    "--space-base",
    `${e.target.value}px, ${e.target.value}px`
  );
});

// 3. color 이벤트
color.addEventListener("mousemove", (e) => {
  root.style.setProperty("--color-base", `${e.target.value}`);
});

필요한 input 요소들을 getElementById를 이용해서 가져온 후, 각각 addEventListener를 통해 mousemove 이벤트를 추가했다. 그리고 input의 값이 변함에 따라, setProperty를 통해 해당 css variable의 값을 변경했다.

이렇게 작성했을 때의 문제점은, addEventListener가 중복 사용되어 코드가 불필요하게 길어진다. 강의를 통해 개선한 코드는 다음과 같다.

🤗 개선된 강의 코드

HTML, CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Scoped CSS Variables and JS</title>
    <script src="variables_after.js" defer></script>
  </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 {
        /* color, space, blur의 기본값 */
        --base: #ffc600;
        --spacing: 10px;
        --blur: 10px;
      }
      /*
        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;
      }

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

      .hl {
        color: var(--base);
      }
    </style>

    <script></script>
  </body>
</html>

각 input에는 name이 선언되어 있는데, JS에서 제어하기 위해 css variable의 이름을 각 input의 name으로 선언해 주었다. 또, 이미지에 배경색을 주기 위해 padding을 주고, 값은 :root에 선언한 variable로 주었다. 따라서 padding값 또한 JS에서 제어된다.

"use strict";

// controls div의 모든 input 요소를 가져와서 어떤 이벤트가 발생하면 css를 변경한다.
const inputs = document.querySelectorAll(".controls input");

function handleUpdate() {
  const suffix = this.dataset.sizing || "";
  // px, or nothing은 type=color input을 가리킨다.
  // || ''을 명시하지 않으면 undefined 처리된다.
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}

inputs.forEach((input) => input.addEventListener("change", handleUpdate));
inputs.forEach((input) => input.addEventListener("mousemove", handleUpdate));

JS코드는 훨씬 줄어들었다. 각 요소를 일일히 가져와서 선언한 나의 방식과는 달리, input 요소를 한꺼번에 가져와서 해당 요소들에 변경이 발생하면 값을 적용해주는 식으로 작성하였다.

suffix 변수같은 경우에는, HTML에서 정의된 data-sizing을 가져오는데, input type="color"에는 data-*가 없으므로 dataset을 가져오는 부분 뒤에 or nothing(|| '')을 작성해 주어 undefined가 뜨는 현상을 방지하였다.

📖 TIL

css variable

CSS 변수는 문서 전반적으로 재사용할 임의의 값을 담을 수 있도록 한다. 어디서나 사용할 수 있게 하려면 :root에 정의하면 된다. 특정 element 내에서만 사용하도록 범위를 지정해서 사용할 수도 있다. CSS 변수는 CSS 변수를 정의할 때에는 변수 앞에 --를 붙여주며, 대소문자를 구분한다. 그리고 해당 변수에 접근하려면 var() 함수를 사용한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --color-one: #ff8080;
        --color-two: #80dfff;
      }
      .one {
        color: var(--color-one);
      }
      .two {
        color: var(--color-two);
      }
    </style>
  </head>
  <body>
    <h1 class="one">Hello!</h1>
    <h1 class="two">Bye!</h1>
  </body>
</html>

이 때, CSS 변수를 :root 하위의 특정 요소에 선언하게 되면, 해당 요소에 선언된 작은 범위의 CSS 변수가 먼저 적용된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --color-one: #ff8080;
        --color-two: #80dfff;
      }
      .one {
        --color-one: #ffdf80;
        color: var(--color-one);
      }
      .two {
        color: var(--color-two);
      }
    </style>
  </head>
  <body>
    <h1 class="one">Hello!</h1>
    <h1 class="two">Bye!</h1>
  </body>
</html>

CSS 변수는 상속 대상이므로, 특정 요소에 사용자 지정 값을 설정하지 않은 경우에는 그 부모의 값을 사용하게 된다. 그래서 CSS 변수를 계단식 변수라고도 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --color-one: #ff8080;
        --color-two: #80dfff;
      }
      .one {
        --color-one: #ffdf80;
        color: var(--color-one);
      }
      .two {
        color: var(--color-two);
      }
    </style>
  </head>
  <body>
    <div class="one">
      <h1>one</h1>
      <div class="two">
        <h1>two</h1>
        <div class="three"><h1>three</h1></div>
        <div class="four"><h1>four</h1></div>
      </div>
    </div>
  </body>
</html>

setProperty()

선언된 CSS 변수는 JS의 getPropertyValue(), setProperty() 등으로 제어할 수 있다.

var value = element.style.getPropertyValue(property);

getPropertyValue()는 인수로 지정된 CSS 속성의 값을 반환한다.

style.setProperty(propertyName, value, priority);

setProperty()는 인수로 지정된 CSS 속성의 값을 설정한다. priority(선택)는 !important의 사용 여부이다.

위 두개의 메소드를 사용해서 --color-two의 값을 가져오고 변경해보면 다음과 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --color-one: #ff8080;
        --color-two: #80dfff;
      }
      .one {
        --color-one: #ffdf80;
        color: var(--color-one);
      }
      .two {
        color: var(--color-two);
      }
      body {
        width: 100%;
        display: flex;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="one">
      <h1>one</h1>
      <div class="two">
        <h1>two</h1>
        <div class="three"><h1>three</h1></div>
        <div class="four"><h1>four</h1></div>
      </div>
    </div>
  </body>
  <script>
    document.documentElement.style.setProperty("--color-two", `#80ff80`);
    console.log(document.documentElement.style.getPropertyValue("--color-two"));
  </script>
</html>

--color-two가 #80dfff에서 #80ff80로 설정(변환)되었다.

👀 참고

youtube Wes Bos

https://www.youtube.com/watch?v=AHLNzv13c2I&list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH&index=3

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

'language > javascript' 카테고리의 다른 글

[JavaScript30] 5. Flexbox + JavaScript Image Gallery (0)	2021.12.10
[JavaScript30] 4. Array Cardio Practice (1) (0)	2021.12.09
[JavaScript30] 2. Clock \| setInterval(), transform, transition (0)	2021.12.04
[JavaScript30] 1. Drum Kit \| data-*, audio, transitionend (0)	2021.12.04
자바스크립트 기초 4. 클래스 \| 클래스 예제와 콜백 함수 최종 정리 (0)	2021.12.02