[JavaScript30] #3 Playing with CSS Variables and JS

코드

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

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

      .hl {
        color: var(--base);
      }

<script>
      const inputs = document.querySelectorAll(".controls input"); // input 3개 전체

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

      inputs.forEach((input) => input.addEventListener("change", handleUpdate)); // base color
      inputs.forEach(
        (input) => input.addEventListener("mousemove", handleUpdate) // spacing, blur
      );
    </script>

getElementById(), querySelecotr()

• getElementById() : id로 가져올때 많이 사용
  • id 속성값으로 요소를 가져온다
  • 같은 id가 여러 개 있으면 첫 번째 요소를 가져온다
  • 반환값 : 해당 id의 요소(없으면 null)
    
    
• querySelector() : 복합한 css 선택자가 필요할때
  • css 선택자 문법으로 요소 가져옴
    • h1, div 같은 태그, id, 클래스 복합 가져오는거 가능

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

• 이 코드에서는 css 변수를 사용해서 ‘--변수명: 스타일 ‘ 로 작성되었다.
• --base, --spacing, --blur 3개의 변수를 만들어 :root에 변수를 담아 활용
• 이벤트 핸들러를 적용해 실시간으로 값이 업데이트 될 수 있게 했다.

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

Dom 이벤트

• 자바스크립트가 각 요소를 조작하고, 그 요소에서 발생하는 이벤트를 감지하고 처리할 수 있게 해준다.

• 그래서 addEventListener( )를 호출할 때 이벤트 이름을 문자열로 전달

• click : 요소를 클릭할 때

• change : input 이나 select 값이 바뀌고 포커스가 빠져나올 때

• input : input 값이 실시간으로 바뀔 때

• mousemove : 마우스를 움직일 때

• keydown : 키보드 키를 눌렀을 때

• submit : form을 제출할 때

const suffix = this.dataset.sizing || "";

<input
        id="blur"
        type="range"
        name="blur"
        min="0"
        max="25"
        value="10"
        data-sizing="px"
 />

data-* 속성

• 사용자 지정 데이터 특성 > 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법

• 속성의 시작은 data-로 시작

• 하나의 태그에 사용할 수 있는 속성 개수 제한 없다.

• 자바스크립트를 통한 데이터 접근이 간단해진다.

• suffix는 data-sizing 이라는 커스텀 속성이 있으면 그 값을 저장, 속성 값이 없으면 빈 문자열 사용
  > spacing과 blur는 px 값이 필요하지만 base는 px가 필요없다.