728x90
마우스 오버하면 이미지 바뀌는 효과
코드블럭
<!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: 800px;
margin: 0px auto;
}
img {
width: 800px;
height: 500px;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="container">
<img src="assets/img/ww.jpg" alt="">
</div>
<script>
const Img = document.querySelector("#container img");
Img.addEventListener("mouseover", () => {
Img.src = "assets/img/ww2.jpg"
});
Img.addEventListener("mouseout", () => {
Img.src = "assets/img/ww.jpg"
});
</script>
</body>
</html>보충설명
addEventListener를 이용하여 mouseover (마우스를 올렸을때)와 mouseout(마우스를 뺏을때) 효과를 넣어 이미지가 바뀌는 효과를 줍니다.
img는 container박스를 만들어 margin 0 auto CSS를 적용해 이미지가 가운데 오게 해줍니다.
클릭하면 사이드 메뉴 나오기
코드블럭
<body>
<button id="bttn">aaa;</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>
<div class="close">
<span>close</span>
</div>
</nav>
<script>
const Btn = document.querySelector("#bttn");
const Nav = document.querySelector("#nav");
Btn.addEventListener("click", () => {
Btn.classList.add("active");
Nav.classList.add("active");
});
</script>
</body>보충설명
버튼을 클릭하면 메뉴가 나오도록 하는 코드입니다.
변수를 선언한 후 addEventListener("click", () => { })를 입력해 버튼을 클리하면 Btn과 Nav요소에 active 클래스가 추가됩니다.