30 JavaScript Day 3 - Playing with CSS & JS

세번째 챌린지인 CSS와 JS 가지고 놀기를 해보자.

 

웹페이지 사진. 각 버튼을 이동시키면 사진의 각 요소가 변한다.

웹페이지

Scoped CSS Variables and JS

 

🐶Day3 Playing with CSS & JS🐶

---

이번 챌린지엔 딱히 덧붙일 요소가 떠오르지 않았기 때문에 구현된 코드를 좀 더 자세히 뜯어보도록 하자.

 

📃 HTML 📃

    <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="image/dog.jfif">

range타입 input태그를 이용해 각 spacing, blur의 정도를 조정할 수 있게 한다.

color타입 input태그로 베이스 컬러를 조정할 수 있도록 했다.

range타입 input태그는 연결해도 크게 의미는 없으나 label 태그가 해당 input태그와 관련이 있다는걸 알기 쉽게 돼있다.

🌈 CSS 🌈

:root {
    --base: #ffc600;
    --spacing: 10px;
    --blur: 10px;
}
 
img{
    padding: var(--spacing);
    background: var(--base);
    filter: blur(var(--blur));
}
 
.hl{
    color: var(--base);
}
 
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;
}

이번에 주목해야할 점은 --로 시작하는 CSS속성이 있다는 점, 그리고 이 속성을 var()에 넣어 마치 변수처럼 활용하고 있다는 점이다. 그리고 이 var()로 변수로 만든 속성을 자바스크립트 코드에서 활용하고 있다.

💻 JavaScript 💻

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));

Line 1에서 .controls 클래스를 가진 모든 input 태그를 지정해 배열로 만들어 inputs라는 변수로 지정한다.

 

Line 8, 9에서 마우스가 그위에서 움직이거나, range value값이 변화할때마다 handleUpdate라는 함수를 작동시키도록 코딩돼있다.

여기서 change 이벤트만 받도록하면 range를 조정하는 도중에는 변화가 일어나지않고,

mousemove 이벤트만 받도록하면 range를 건드리지않고 range input위에서 마우스만 이동해도 제멋대로 값이 변해버리기때문에 두 이벤트를 받도록 코딩되어있다.

 

여기서 handleUpdate()함수를 뜯어보자.

 

Line 4에서 suffix라는 변수를 지정해 해당 dataset의 sizing변수가 지정되도록 한다.

dataset은 "data-*"로 지정한 *부분의 attribute를 key로 가지고있는 object다.

그래서 해당 object중 sizing이라는 key 값을 가지고 있는 value를 suffix로 지정해서 활용.

 

Line 5에서는 document.documentElement라는 element읽기 전용 속성을 활용해 element를 반환받은 뒤, 

해당 element의 style 속성(property)을 설정하는 setProperty 메소드를 사용하여 아까 CSS파트에서 '--'을 붙이고 변수화 시킨 CSS속성을 지정하여 value에 suffix를 더하여 속성을 갱신해준다.