소스코드
<body>
<h2>Update CSS 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="10"
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" />
<style>
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}
.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>
<script>
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.addEventListener("mousemove", handleUpdate)
);
</script>
</body>결과
TIL
CSS variable
이번 챌린지는 CSS 변수를 활용하여 진행되었다. CSS에서도 자바스크립트와 같이 변수를 사용할 수 있는데 --변수명: 스타일 이런 식으로 작성하면 된다.
위 챌린지에서는 --base: #ffc600;, --spacing: 10px;, --blur: 10px; 이렇게 3개의 css 변수를 만들어 웹 문서 구조의 최상위 요소를 선택하는 가상 클래스 :root에 변수들을 담아 활용했다.
range 타입의 input 엘리먼트에 mousemove 이벤트 핸들러를 적용해 실시간으로 range bar가 늘어나거나 줄어들면 관련 변수의 값인 --spacing: 10px;, --blur: 10px;도 업데이트 되도록 했다.
function handleUpdate() {
const suffix = this.dataset.sizing || "";
document.documentElement.style.setProperty(--${this.name}`, this.value + suffix);
}단축 평가
여기서 '모던 자바스크립트 딥다이브'에서 배운 단축 평가가 사용되는 모습을 볼 수 있었다. 책만 보았을 때는 어떤 식으로 활용될지 감이 잘 잡히기 않았다. 이 챌린지에서는 css에 스타일을 적용시키기 위해 'px' 문자열이 필요한 것과 필요 없는 것을 구분하기 위해 사용되었다.
const suffix = this.dataset.sizing || "";
가장 어려워 하는 '기록'하기