마무리 문제 1. 이미지에서 마우스 포인터를 다른 곳으로 이동하면 그림이 바뀌는 소스를 작성해 보세요.
<!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;
}
.container {
width: 1200px;
height: 800px;
margin: 0 auto;
padding: 50px;
text-align: center;
}
.container h2{
width: 1200px;
text-align: center;
color: rgb(41, 15, 241);
}
.image {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<h2>마우스 오버하면 짱구가 움직여요!</h2>
<img src="img/1.jpg" class="image">
</div>
<script>
const cursor = document.querySelector(".container .image");
// const cursor = document.querySelector(".container");
cursor.addEventListener("mouseover", () => {
cursor.src="img/1.jpg"
});
cursor.addEventListener("mouseout", () => {
cursor.src="img/2.jpg"
});
// document.querySelector(".active").addEventListener("mouseover", function(){
// cursor.classList.add("active");
// });
// $img = document.querySelector(".container > img");
// $img.src = `change.img/pic-2.jpg`;
</script>
</body>
</html>
선택자를 지정하고 마우스 오버했을 때 선택자에 이벤트 메서드인 addEventListener("mouseover") 를 했을 때 변경 될 이미지가 나오게 설정합니다.
마우스 아웃했을 때 선택자에 이벤트 메서드인 addEventListener("mouseout") 를 적용하여 마우스가 그림에서 떨어졌을 때 그림이 원래대로 변하는 효과를 넣었습니다.
마무리 문제 2. 이벤트를 활용하여 필요에 따라 메뉴가 나타나고 감추어 지도록 만들어 봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 2</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin:0;
min-height:100vh;
}
button {
position:fixed;
top:20px;
right:20px;
background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
padding:15px;
border:none;
outline: none;
color:white;
transition: transform 0.3s ease-in-out;
}
button.active {
transform:translateX(-110px);
}
nav {
position:fixed;
top:0;
right:0;
background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
height:100vh;
padding:2em;
transform:translateX(100%);
transition: transform 0.3s ease-in-out;
border-radius: 10px;
}
nav.active {
transform:translateX(0);
}
nav ul {
padding:0;
margin:0;
list-style: none;
}
nav ul li {
padding:1em 0;
}
nav a {
color:white;
text-decoration: none;
}
</style>
</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>
</body>
<script>
const button1 = document.querySelector("#bttn")
const nav1 = document.querySelector("#nav")
button1.addEventListener("click", () => {
nav1.classList.toggle("active")
button1.classList.toggle("active")
});
</script>
</html>
버튼을 클릭 했을 때 버튼이 옆으로 이동하며 목록이 나오는 이벤트를 주기위해 addEventListener("click")를 써서 함수를 작성했습니다.
또한 버튼과 목록에 스타일을 주기 위해 classList를 적용하고 toggle 속성을 이용해서 add와 remove를 대체 하였습니다.
댓글