한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
마무리 문제 원 투!
원
투!
이벤트 객체를 이용하여 마무리 문제를 풀어보았습니다!
첫 번째 예제
<!DOCTYPE html>
<html lang="ko">
<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>연습문제 1</title>
<style>
#container {
width: 600px;
margin: 20px auto;
}
img {
width: 600px;
height: 600px;
}
h1 {
font-size:1.5rem;
text-align:center;
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="container">
<h1>마우스 오버하면 이미지 바꾸기</h1>
<img src="img/123.png" alt="">
</div>
<script>
const cover = document.querySelector("#container img")
cover.addEventListener("mouseover",()=>{
cover.src="img/pc2.jpg"
})
cover.addEventListener("mouseout",()=>{
cover.src="img/pc.png"
})
cover.addEventListener("click",()=>{
cover.src="img/123.png"
})
</script>
</body>이미지에 마우스를 오버하면 이미지가 바뀌고 아웃해도 바뀌고 클릭해도 바뀌는 효과를 주어 보았습니다!
첫 째 container img를 선택자로 설정해 변수를 만들어 줍니다.
그 변수 cover에 src를 바꿔줄건데 언제 바꾸냐를 이벤트로 설정해줍니다.
addEventListener("mouseover”) 에드이벤트 리스너를 주어 이벤트를 추가 시킨뒤 효과는 마우스 오버 로 줍니다.
오버했을때 이미지의 src를 "img/pc2.jpg” 로 변경해준다~ 로 설정해 주었습니다.
밑에
addEventListener("mouseout”) ,addEventListener("click”)도 같은 방법으로 src를 다르게 설정해주면 끝이 납니다!
두번째 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 2</title>
<link rel="stylesheet" href="css/solution-2.css">
</head>
<body>
<button id="bttn">☰</button>
<nav id="nav">
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">Typescript</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</nav>
<script>
const clickMenu = document.querySelector("#bttn");
const showMenu = document.querySelector("#nav");
clickMenu.addEventListener("click",() => {
showMenu.classList.toggle("active");
clickMenu.classList.toggle('active');
showMenu.addEventListener("mouseout",()=>{
showMenu.classList.remove("active");
clickMenu.classList.remove("active");
});
})
</script>
</body>
</html>두번 째 예제는 버튼을 클릭 했을 경우 메뉴바가 나오고 마우스가 밖으로 나올 경우 메뉴창이 닫히는 효과를 줬습니다.
핵심은 classList 로 css에서 만들어놓은 속성을 추가해주는 것입니다!
button.active {
transform:translateX(-110px);
}
nav.active {
transform:translateX(0);
}button과 nav에 액티브를 추가 했을 경우 위치 값이 바뀌게 설정해주었다.
이제 스크립트로 넘어가보겠습니다.
앞의 예제와 같이 button 과 nav를 선택자로 만들어줍니다. cilckMenu에 ,addEventListener로 click 이벤트 설정해 줍니다.
그 클릭 이벤트가 실행 됬을 경우 css값을 변경 시켜줄것이기 때문에 속성을 추가/제거 해주 classList의 toggle 를 넣어
active라는 속성 값을 추가 시켜줍니다. active가 붙으면 위치 값이 바뀌어 메뉴창이 나오는 효과를 준다. 가 예제의 제시지만
저는 mouseout 마우스를 아웃 했을때의 효과도 추가해 보았다 마우스아웃 했을 경우 추가한 active 가 사라지게 classList.remove로 active 속성값을 없애주었습니다.