hyunwkim

Javascript30 - Day3 CSS Variable

  • 2021년 09월 08일

강의링크

주제 설명

JS를 사용하여 CSS Variable 요소 spacing, blur, size, color 실시간으로 변경하기

결과물

See the Pen by hyunwk (@hyunwk) on CodePen.

HTML

<h2>Update <span class='hl'>CSS</span> 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="0" data-sizing="px">

    <label for="size">Size</label>
    <input id="size" type="range" name="size" min="0" max="2000" value="600" 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">

label 태그

  • <label> 태그사이에 위치한 text, checkbox, radio 등은 클릭 가능 영역이 텍스트로 확장됩니다.
  • <label for=""> 와 <태그 id="">값은 서로 그룹을 형성합니다.
  • <label> 태그는 <input> 태그를 도와주는 역할입니다. <input> 태그가 디자인 하기 힘들 때 <label> 태그로 연결해서 쉽게 디자인하거나 클릭 편의성을 높일 수 있습니다.

HTML Dataset 데이터 속성 (data attributes)

이미 지정된 속성 외에 추가로 사용해야 될 속성이 있을 경우 사용한다.

어느 element에나 사용할 수 있음.

예시) data-sizing

html
	<input id="size" type="text" **data-sizing**="px">
css
	--blur: 0px;

—blur 변수를 수정하려면 숫자와 함께 'px'가 필요하다.

따라서 'px'를 가져올 수 있게 element에 data-sizing 이라는 커스텀 속성으로 지정한다.

javascript 에서는 dataset을 이용하여 값을 불러올 수 있다.

function handleUpdate() {
      const suffix = this.dataset.sizing || '';
}
const inputs = document.querySelectorAll('.controls input');
inputs.forEach(input => input.addEventListener('change', handleUpdate)

|| '' 으로 가져오는 이유는 data-sizing이 없는 color라는 변수가 있기 때문이다.

|| 없을 경우 suffix 에는 undefined라는 값이 들어간다. 하지만 ||을 쓸 경우에는 null이 들어가게 된다.

CSS

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

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

    .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;
    }
  </style>

root

:root는 최상위 엘리먼트를 의미한다.

HTML에서 최상위 엘리먼트란 html 태그를 의미한다. 하지만 html 태그를 선택자 사용하는 대신 :root라는 가상선택자를 이용한다.

이유는 :root 가상 선택자는 class로 간주되어 html 태그보다 우선순위가 높기 때문이다.

:root {
   --base: #ffc600;
   --spacing: 10px;
   --blur: 0px;
   --size: 600px;
}

css cascade, scope

HTML의 element는 하나 이상의 style에 영향을 받을 수 있다.

따라서 어떤 style을 적용할지 우선순위가 있어야 한다.

CSS가 Cascading Style Sheets의 약자인만큼 cascade는 중요하다.

:root은 html 선택자보다 명시도가 더 낮다는 점을 제외하면와 똑같다.

:root는 document 전체에 영향을 미친다.

명시도를 기준으로 우선순위 나누어보겠다.

  • style > id > class > 태그

JS

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

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

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

this

this는 누가 this를 불렀냐, 즉 호출자에 따라 다라진다.

eventHandler 안에서 사용한 경우에는 event를 받는 HTML 요소를 가리킨다.

예시

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

handleUpdate안에서 this를 호출한 경우에는 input을 가리킨다.

출처 :

    © hyunwkim 2021,