color picker를 만들어보자
변수 inp
에 모든 inp-picker
클래스를 querySelectorAll
로 모든 element를 선택한다
변수 root
는 CSS :root
로 접근하여 root element를 선택한 것.
inp.forEach()
함수로 inp
array의 각각의 배경색과 폰트색인 element를 item 으로 넘겨 forEach문으로 반복, 순회 한다
-> 이것은 유사배열객체 노드리스트 이기 때문에 -> forEach 문을 지원한다
콜백함수는 item인 input 을 차례대로 받아온다
이벤트 리스너를 등록하여 배경색과 폰트색인 item
element의 'input' 에 변화가 있을때
CSS 변수의 값을 변경하여 스타일을 사용자의 선택된 값으로 동적으로 변경하는 기능이다
사용자가 선택한 데이터 값을 가져오도록 item
요소의 data-
속성을 가져오는 객체이다. dataset
으로 id
(input 태그 속성 data-id)를 가져온다
item.dataset
을 통해 HTML 요소의data-
속성 값을 JavaScript에서 가져올 수 있다
--main-
문자열과 item
element 의 data-id
속성값이 결합된다
root의 스타일을 setProperty로 변화하고 싶은 속성(name), 변화값(item.value)로
CSS 스타일 선언 개체의 속성에 대한 새 값을 설정해준다