“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
✈ . 자바스크립트 MOUSEOVER, MOUSEOUT 이벤트를 활용해서 이미지를 바꿔주는 효과를 만들어 보았습니다.
🏴. 완성화면
🏁. HTML/ CSS
<!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>Document</title>
<style>
/* 웹폰트 */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
* {
margin: 0 auto;
padding: 0;
}
h1 {
font-family: 'NexonLv1Gothic';
text-align: center;
color: #584d4d;
}
.img_wrap {
width: 100%;
height: 100vh;
}
.img_box {
width: 90%;
height: inherit;
margin: 0 auto;
}
img {
width: 100%;
height: inherit;
cursor: pointer;
}
</style>
</head>
<body>
<div class="img_wrap">
<h1>마우스 오버하면 이미지 바꾸기</h1>
<div class="img_box">
<img src="assets/img/img1.jpg" alt="" >
</div>
</div>
</body>
</html>
🏁. JAVASCRIPT
<script>
const imgBox = document.querySelector(".img_box img");
imgBox.addEventListener("mouseover", () => {imgBox.src="assets/img/img1.jpg";});
imgBox.addEventListener("mouseout", () => {imgBox.src="assets/img/img2.jpg";});
</script>
이벤트를 활용하여 필요에 따라 표시했다가 감추는 메뉴를 만들어 보겠습니다.
🏴. 완성화면
🏁. HTML/ CSS
<style>
* {
box-sizing: border-box;
font-family: 'NexonLv1Gothic';
}
body {
display: flex;
justify-content: center;
align-items: center;
margin:0;
min-height:100vh;
}
button {
position:fixed;
top:20px;
right:20px;
background-color:rgb(220, 162, 228);
padding:15px;
border:none;
outline: none;
color:white;
border-radius: 10%;
transition: transform 0.5s ease-in-out;
}
button.active {
transform:translateX(-150px);
}
nav {
position:fixed;
top:0;
right:0;
background-color:rgb(5, 100, 68);
height:100vh;
padding:2em;
transform:translateX(100%);
transition: transform 0.3s ease-in-out;
}
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>
<div class="wrap">
<button class="btn">✈<br>click</button>
<nav class="nav">
<ul class="ul">
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">TYPESCRIPT</a></li>
<li><a href="#">NODE.JS</a></li>
</ul>
</nav>
</div>
🏁. JAVASCRIPT
const btn1 = document.querySelector(".btn");
const nav1 = document.querySelector(".nav");
btn1.addEventListener("click", () => {
btn1.classList.toggle("active");
nav1.classList.toggle("active");
});