기본 구현 사항: spacing, blur, base color를 사용자의 입력을 받아 변경
1) 페이지 전역으로 적용될 색상, 이미지 프레임의 간격(두께), 이미지의 흐림 정도의 default 값을 전역 변수 선언 후 할당
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
--fontSize: 20px;
}
2) 이미지(img)에 padding, background, filter(blur) 속성에 각각 var() 함수를 사용하여 --spacing, --base, --blur로 값을 할당
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}
3) JS 파일에서, document.querySelectorAll()을 통해 controls 클래스 내 모든 input들을 inputs 변수에 할당
const inputs = document.querySelectorAll(".controls input");
4) handleUpdate 함수생성 -> inputs 변수에 포함된 모든 input에 handleUpdate 함수를 listen 시키기-> change, mousemove 이벤트 발생 시 함수를 실행하도록
const inputs = document.querySelectorAll(".controls input");
function handleUpdate() {}
inputs.forEach((input) => {
input.addEventListener("change", handleUpdate);
});
inputs.forEach((input) => {
input.addEventListener("mousemove", handleUpdate);
});
5) input이 변화함에 따라, input의 value로 --base, --spacing, --blur의 값을 update 해줘야 한다.
const inputs = document.querySelectorAll(".controls input");
function handleUpdate() {
const suffix = this.dataset.sizing || "";
}
inputs.forEach((input) => {
input.addEventListener("change", handleUpdate);
});
inputs.forEach((input) => {
input.addEventListener("mousemove", handleUpdate);
});
6) document.documentElement.style.setProperty()에 첫번째로 '값을 변화시킬 변수'를, 두번째로는 '그 값+접미사'를 인자로 삽입
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);
});
내가 추가한 기능: 페이지 제목의 font-size를 제어하는 input을 추가
1) font-size를 입력받을 input 요소 추가: type은 text로 설정하여 직접 숫자로 입력받음
<p class="title">Update CSS Variables with <span class="hl">JS</span></p>
(...생략...)
<label for="fontSize">Font Size:</label>
<input
id="fontSize"
type="text"
name="fontSize"
value="20"
data-sizing="px"
/>
2) :root 클래스에 --fontSize 변수 추가 후, 20px를 기본값으로 지정
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
--fontSize: 20px;
}
document와 documentElement를 각각 사용하면서 둘의 차이점이 궁금해졌다.
즉, document는 말 그대로 코드의 처음부터 끝까지, 즉, 태그 바깥에 존재하는 요소( 과 같이)를 포함한 모든 요소들을 통틀어 지칭한다.
document.documentElement는 딱 html 태그와 그 안에 존재하는 것들만을 지칭한다는 차이점이 있다.
event를 요소들에 listen 시키는 과정에서 forEach() 함수를 사용하는데, 비슷해 보이는 배열 형태의 것(?)들 사이에도 forEach()로 요소 하나하나에 접근할 수 있거나 없을 수 있다는 것을 검색을 통해 알게 되었다.
<div class="hello">
<div class="hi">안녕</div>
<div class="hi">안녕</div>
<div class="hi">안녕</div>
</div>
다음과 같은 코드가 있을 때,
const hiNode = document.querySelectorAll(".hi");
const hiCollection = document.getElementsByClassName("hi");
이렇게 상이한 방식으로 변수에 할당하면
이렇게 querySelectorAll을 이용하면 NodeList가, getElementsByClassName을 사용하면 HTMLCollection이 할당된다.
const hiNode = document.querySelectorAll(".hi");
const hiCollection = document.getElementsByClassName("hi");
console.log(hiNode.item(0));
console.log(hiCollection.item(0));
이렇게 두 가지 경우 모두 item() 메소드의 인자로 넣은 수를 index로 한 div 요소를 반환한다.