remove.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>
<script>
let nDiv = document.createElement('div');
nDiv.innerHTML = '<strong>안녕하세요😊</strong><br><br>중요메시지를 확인하셨습니다.'
document.body.append(nDiv);
// 3초 이후 삭제하기 setTimeout(함수, 시간)
setTimeout(() => nDiv.remove(), 1500)
</script>
</body>
</html>
inputEvent.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>
<input type="text" id="myInput">
<script>
// ⭐타자게임
// input이벤트로 단어가 맞는지 비교
// 단어 배열 만들고 배열에 있는 단어를 랜덤하게 뿌려줌
// input 이벤트
let input = document.querySelector('#myInput');
input.addEventListener('input', function () {
console.log(input.value);
})
</script>
</body>
</html>
scrollTop.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>
*{padding: 0; margin: 0; box-sizing: border-box;}
div {
width: 100%;
height: 100vh;
}
div:nth-child(2) {
background: lightblue;
}
div:nth-child(3) {
background: lightcoral;
}
div:nth-child(4) {
background: lightseagreen;
}
#menu {
position: fixed;
width: 200px;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
/* 화면 세로로 중앙 배치 ↑ */
}
#menu li {
line-height: 40px;
color: #fff;
padding-left: 30px;
font-size: 20px;
transition: 0.5s;
}
#menu li.on {
font-size: 32px;
}
</style>
</head>
<body>
<ul id="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<div>box01</div>
<div>box02</div>
<div>box03</div>
<script>
let lis = document.querySelectorAll('li');
let wh = window.innerHeight; // 화면 100% 높이 값을 wh에 할당, window의 높이
// (1)
// lis[0].addEventListener('click', function() {
// window.scrollTo({top:0, behavior: 'smooth'}); // 0번 누르면 맨위로 이동, 부드럽게 이동 ★
// })
// lis[1].addEventListener('click', function() {
// // window.scrollTo({top:959, behavior: 'smooth'});
// window.scrollTo({top:1*wh, behavior: 'smooth'});
// })
// lis[2].addEventListener('click', function() {
// // window.scrollTo({top:1918, behavior: 'smooth'});
// window.scrollTo({top:2*wh, behavior: 'smooth'});
// })
// (2) ⭐반복문 forEach로 변경
lis.forEach( (li, index) => {
li.addEventListener('click', function() { // 클릭일 때 함수실행
window.scrollTo({top:index*wh, behavior: 'smooth'}); // 순번을 index가 들고있음 ★
})
})
// ⭐스트롤 이벤트 발생
document.addEventListener('scroll', function() {
let sct = document.documentElement.scrollTop; // scroll 값을 알아옴
console.log(sct);
// ⭐MENU 크게 작게 ★
// (1)
// 0 보다 작거나 크고, 100vh보다 작을 때,...
// if(sct >= 0 && sct < wh) {
// lis.forEach(li => li.classList.remove('on'));
// lis[0].classList.add('on');
// }
// if(sct >= wh && sct < wh*2) {
// lis.forEach(li => li.classList.remove('on'));
// lis[1].classList.add('on');
// }
// if(sct >= wh*2 && sct < wh*3) {
// lis.forEach(li => li.classList.remove('on'));
// lis[2].classList.add('on');
// }
// (2)
for (let i=0; i<lis.length; i++) {
if(sct >= wh*i && sct < wh*(i+1)) {
lis.forEach(li => li.classList.remove('on'));
lis[i].classList.add('on');
}
}
})
</script>
</body>
</html>
