Javascript 30
막상 열어보면 기능은 쉬워보일 수 있다.
그런데 내가 생각한 코드랑 너무 다르게 (깔끔하게!!!) 짠다는 점이 특징이다.
화면상에서 이미지의 padding과 background-Color와 blur값을 변동시키는 자바스크립트 함수를 만들 때
나같으면 함수 3개 나왔다..
그리고 그 함수마다 dom 객체 불러오는 코드 다 한번씩 써줬다..
우리 웨스 코드 깔끔한거 보세요..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scoped CSS Variables and JS</title>
</head>
<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>
</html>1. 첫번째로 input을 다 한번에 querySelectorAll로 가져와서 nodeList를 만들었다.
2. 'px' 등의 suffix가 필요한 input은 HTML에 data-sizing이라는 dataset을 넣었다.
3. nodeList를 forEach해줘서 각각의 input에 이벤트리스너를 걸어주는데
4. 콜백함수에서 document.documentElement.style.setProperty해서 원하는 css변수를 바꿈
5. 그러려고 css에 전역변수를 넣어줌..... 전역변수명 = input name속성 값..
이게 내 수준에서는 구현 불가한 코드라는 것...
더 잘 정리된 블로그를 찾았으니 이 코드에 대한 자세한 설명을 듣고싶다면?
[JS30] 자바스크립트로 CSS 변수(사용자 정의 속성) 조절하기
🔥Javascript 30 - Day 03🔥 1. 마크업/스타일링 이번에는 CSS를 JS로 제어해 봅시다! 우선 적당히 마크업하고 적당히 스타일링 합니다(참 쉽죠?). 자세한 html, css코드는 Codepen 결과물 에 있어요! > 제어
nykim.work
SI업체에 다니는 나는 이렇게 깔끔한 프론트쪽 코드를 볼 기회가 적다.
우리회사에도 잘하는 사람들 많지만 내가 맡은 프로젝트는 제이쿼리를 썼었고,,
html css는 퍼블리셔님에게서 넘어온 것 그대로 갖다 쓰고, 그래서
나처럼 좋은 (CSS, DOM을 잘 활용한) 바닐라 자바스크립트 코드를 보고싶은 프망생이라면
wesbos강의를 보는 것을 추천한다.