CSS Variables
:root {
--base: #ffc600;
--spcing: 10px;
--blur: 10px;
}
img {
padding: var(--spcing);
background: var(--base);
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}css 사용자 정의 속성
변수는 이름 앞에 --를 붙여 사용
var()를 사용하여 변수를 정의
querySelectorAll로 선택된 리스트들은 배열이 아닌 NodeList로
배열에서 사용하는 map, reduce 등의 일부 메서드는 사용할 수 없음
const inputs = document.querySelectorAll('.controls input');
function handleUpdate() {
console.log(this.value);
}
inputs.forEach(input => input.addEventListener('change', handleUpdate));
const inputs = document.querySelectorAll('.controls input');
function handleUpdate() {
const suffix = this.value;
console.log(this.name, suffix);
}
inputs.forEach(input => input.addEventListener('change', handleUpdate)); // 끝나는 시점에만 발생
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
const inputs = document.querySelectorAll('.controls input');
function handleUpdate() {
const suffix = this.dataset.sizing || '';
// spacing, blur의 단위 px을 sizing으로 가져오고, 컬러코드의 단위 ''를 ''로 가져옴
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
// suffix는 변수에 알맞은 단위를 붙여주기위해서 필요(예: px)
}
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
documentElement : 문서의 루트 요소를 반환 (HTML 문서의 <html>)
dataset : 사용자 지정 데이터 특성(data-*)에 대한 읽기와 쓰기 접근 방법을 제공하는 읽기 전용 속성
setProperty : css 개개체의 속성에 대한 새 값을 설정
- style.setProperty(propertyName, value, priority);
- priority를 생략할 수 있는 경우 style .cssPropertyName = 'value'; 로 간단하게 사용할 수 있음.
JavaScript30 강의를 보고 공부한 글입니다. (https://javascript30.com/)
'JavaScript30 Challenge' 카테고리의 다른 글
| [JavaScript30] Day 6 (0) | 2020.04.19 |
|---|---|
| [JavaScript30] Day 5 (0) | 2020.04.18 |
| [JavaScript30] Day 4 (0) | 2020.04.18 |
| [JavaScript30] Day 2 (0) | 2020.04.15 |
| [JavaScript30] Day 1 (0) | 2020.04.13 |
