03. CSS Variables and JS with Puzzle KiKi

javascript 내에서 padding이나 blur의 px값을 동적으로 제어할 수 있도록 만들어 보았다. CSS에서 변수로 설정한 값을 자바스크립트에서 동적으로 제어하는 방식으로 구현했다.

(참고로 사진은 직접 사서 맞춘 키키 퍼즐 입니다.😁😁😁)

Learning Point

• :root를 이용한 css내에서의 변수 설정하기
• javascript에서 css 변수를 동적으로 제어하기
• html label tag, input tag에 대해 알아보기

HTML Part

<h2>Picture of <span class="hl">KiKi</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="img/puzzle.jpg" />

CSS Part

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

      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 {
        width: 1000px;
        height: 500px;

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

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

Javascript Part

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

      function handleUpdate() {
        //this에 <input id="base" type="color" name="base" value="#ffc600" /> 가 전달됨
        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>

• style.setProperty(propertyName, value, priority); 형식으로 사용하면 자바스크립트에서 동적으로 CSS 변수를 제어할 수 있다.

정리

lable, input tag란?

• <label> tag는 사용자 인터페이스 항목의 대한 설명을 나타낸다.
• <label>은 보통 <input> tag와 같이 사용됨. 이 때 <label> tag에 for 속성을 달아서 어떤 <input>에 대한 <label>인지 알려주어야 한다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/input

Data attribute

• user-define attribute로 data-*으로 정의 할 수 있다.
• dataset은 data-*로 정의된 모든것 들을 담은 nodeList을 return한다.
• element.dataset.keyname으로 접근 가능하다.

주의점

• eventhandler를 적용할 때 change는 값이 변한 이후에만 적용되므로 실시간으로 적용하려면 mousemove event도 같이 추가해 주어야 한다!!

• this.dataset.sizing || "" 코드는 data-sizing attribute가 없으면 null이 아닌 빈 문자열("")을 return 하게 하기 위함이다.

• css에서 :root를 사용해서 변수를 정의하는 방식 되게 괜찮은것 같다... SCSS나 PostCSS도 얼른 공부해 보고싶다!