dom_node.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrap">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</div>
<script>
// ⭐ 해당 요소노드 접근
let ul = document.querySelector('ul');
console.log(ul.parentElement); // <div id="wrap">,..
console.log(ul.children); // 배열형태, HTMLCollection(4) [li, li, li, li]
console.log(ul.children[1]); // <li>..<li>
console.log(ul.firstElementChild); // <li>..<li>
console.log(ul.lastElementChild); // <li>..<li>
// ⭐ style 바꾸기
ul.lastElementChild.style.background = 'tomato';
ul.parentElement.style.background = 'green';
let lis = document.querySelectorAll('li');
lis[1].previousElementSibling.style.fontSize = '50px'; // [1]의 이전
lis[1].nextElementSibling.style.fontSize = '70px'; // [1]의 다음
// ⭐ li 추가하기
let newLi = document.createElement('li');
newLi.innerHTML = '새로운 li';
// 💜 ul 안에 추가
// ul.prepend(newLi); // 처음
// ul.append(newLi); // 마지막
// 💜 ul 바깥에 추가
// ul.before(newLi); // 이전
// ul.after(newLi); // 이후
// ■ 예전 방식, 원하는 위치에 추가
ul.insertBefore(newLi, lis[2]); // lis[2] 의 이전에 추가
</script>
</body>
</html>
translateZ.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
body {
width: 100%;
height: 23000px;
/* ↑ 스크롤 할 수 있게 */
}
section {
position: fixed;
/* ↑ 스크롤시 고정 */
width: 1200px;
height: 700px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 중앙 배치 */
/* ↓ 자식의 부모에게, 원근감 주기 위해 💚 */
perspective: 2300px;
}
section div {
width: 1200px;
height: 700px;
background:lightseagreen;
position: absolute;
top: 0;
left: 0;
font-size: 100px;
opacity: 0.3;
/* 글자 투명하게 */
}
/* 쭉 뒤로 밀어버린 것 */
section div:nth-child(1) {
transform: translateZ(0);
}
section div:nth-child(2) {
transform: translateZ(-5000px);
}
section div:nth-child(3) {
transform: translateZ(-10000px);
}
section div:nth-child(4) {
transform: translateZ(-15000px);
}
section div:nth-child(5) {
transform: translateZ(-20000px);
}
h1 {
position: fixed;
/* 스크롤시 고정위해 */
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<h1>0</h1>
<section>
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
<div>box5</div>
</section>
<script>
let divs = document.querySelectorAll('div');
console.log(divs); // 확인용
// ⭐ 스크롤 값 받아오기
document.addEventListener('scroll', function() {
let sct = document.documentElement.scrollTop;
document.querySelector('h1').innerHTML = sct;
console.log(sct);
// ⭐ 움직이기
// divs[0].style.transform = `translateZ(${0+sct}px)`
// divs[1].style.transform = `translateZ(${-5000+sct}px)`
// divs[2].style.transform = `translateZ(${-10000+sct}px)`
// divs[3].style.transform = `translateZ(${-15000+sct}px)`
// divs[4].style.transform = `translateZ(${-20000+sct}px)`
// ⭐ 반복문, NodeList는 forEach 사용가능 ⭐
divs.forEach((div, index) => { // 0*-5000 / 1*-5000 / 2*-5000,...
div.style.transform = `translateZ(${index*-5000+sct}px)`;
})
})
// (me)
// divs.forEach ((div, index) => {
// div.addEventListener('scroll', function() {
// window.scrollTo({top:index*wh});
// })
// })
</script>
</body>
</html>
