[JS30] day 3 - playing with CSS variables and JS

CSS 에도 variables(변수)이 존재한다

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

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

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

</style>

문서 전반적으로 재 사용할 값을 담아 root값을 변경하면 —variables를 가진 모든 개체의 값이 변경

사용은 var();로 사용

CSS variables를 JS로 조작

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

function handleUpdate() {
		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.addEventListner('mousemove', handleUpdate));

• dataset (day1 에서도 사용!!)현재에서는 data-sizing="px"에 접근하여 이를 가져와 표시한다
  html내의 요소에 data-** 속성을 정의하고 js에서 그 data 속성에 접근하기 위한 메서드
• setProperty
  CSS 선언 블록에서 새 CSS 속성을 설정하거나 기존 CSS 속성을 수정
• forEach
  반복문으로 array 객체에서만 사용 가능한 메서드
• addEventListener
  이벤트를 등록하는 메서드로 addEventListener('이벤트 타입', 호출될 이벤트 함수) 를 받는다