03. CSS + Clock

3번째 예제에는 input을 통해서 즉각적으로 값을 변경하고 적용하며 CSS에서는 공통적으로 색상을 적용하는 방법에 대해서 나왔다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
:root {
    --base: #ffc600;
    --spacing: 10px;
    --blur: 10px;
}
img {
    padding: var(--spacing);
    background: var(--base);
    filter: blur(var(--blur));
}
/*var(--base)이 부분은 :root {--base:#ffc600;}에 설정된 색상값을 모두 적용한다.*/
.h1 {
    color: var(--base);
}
Colored by Color Scripter
cs

일단 국내에서 쓰는 CSS랑은 좀 차이가 있어보인다. 내가 에이전시에서 할때는 크로스브라우징 문제로 사용하지 못했던 부분이다.

1
2
3
4
5
6
7
8
9
const inputs = document.querySelectorAll('.controls input');
function handleUpdate() {
    console.log(this.value);
    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('moustmove, handleUpdate'));
cs