JS30 - Playing with CSS Variables and JS

JS30을 진행하다 새로 알게된점을 기록해두려 합니다. 

CSS에서도 커스텀 변수를 만들어 활용이 가능한지 몰랐는데 새롭게 알게 되었다. 

<style>
:root {
      --base: rgb(255, 198, 0);
      --spacing: 20px;
      --blur: 10px;
    }
    
 img {
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }
</style>

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

    function handleUpdate() {
      suffix = this.dataset.sizing || ''; //여기서 this는 해당 DOM 요소. dataset은 HTML 태그에서 data-로 설정한 커스텀 attribute를 보여준다. 
      document.body.style.setProperty('--' + this.name, this.value + suffix)
    }

    inputs.forEach(input => input.addEventListener('change', handleUpdate));  //여러개에 DOM 요소에 이벤트 리스너를 추가할때 그냥 foreach를 쓰면 편하다.
    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));


</script>

css 문서에서 대쉬두번과 합쳐서 지정한 키워드는 해당 CSS 문서에서 커스텀 변수로 활용이 가능하다. 
이러한 방식을 쓰면 좋은점은 여러개의 수치값을 한번에 관리가 가능하다는 점이다. 

선언한 키워드를 활용할때는 var() 함수에 매개변수로 넣어주면 이용가능 하다.