일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- react
- parent padding
- CustomHook
- accordian
- ?? #null병합연산자
- createPortal
- 제어컴포넌트
- alias설정
- QueryClient
- DOM
- twoarrow
- BFC
- 문제해결
- 함수형프로그래밍
- es6
- 화살표2개
- Carousel
- 조건부스타일
- useQueryClient
- BlockFormattingContext
- ㅡ
- tailwindCSS
- vite
- 서초구보건소 #무료CPR교육
- 리액트
- 부모요소의 패딩 무시
- debouncing
- ignore padding
- 부모패딩
- transition
- Today
- Total
프론트엔드 첫걸음
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속성 값..
이게 내 수준에서는 구현 불가한 코드라는 것...
더 잘 정리된 블로그를 찾았으니 이 코드에 대한 자세한 설명을 듣고싶다면?
SI업체에 다니는 나는 이렇게 깔끔한 프론트쪽 코드를 볼 기회가 적다.
우리회사에도 잘하는 사람들 많지만 내가 맡은 프로젝트는 제이쿼리를 썼었고,,
html css는 퍼블리셔님에게서 넘어온 것 그대로 갖다 쓰고, 그래서
나처럼 좋은 (CSS, DOM을 잘 활용한) 바닐라 자바스크립트 코드를 보고싶은 프망생이라면
wesbos강의를 보는 것을 추천한다.
나의 실습
'후기 > 강의' 카테고리의 다른 글
패스트캠퍼스 인터랙티브 웹 개발 강의 (0) | 2023.02.27 |
---|---|
udemy - Git&Github 실무활용 완벽 가이드 (0) | 2022.07.07 |