...
728x90
반응형
마우스 오버 했을 때 이미지 바꿔주기
스크립트를 통해 이미지에 마우스를 올렸을 때, 이미지가 바뀌는 효과를 주도록 하겠습니다.
HTML 작성하기
<!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: 0px auto;
}
h1 {
font-size: 20px;
text-align:center;
margin-bottom:20px;
}
img {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div id="container">
<h1>마우스 오버하면 이미지 바꾸기</h1>
<img src="practice/img/Han-river1.png" alt="">
</div>
</body>
</html>HTML 정리해보기
html문서에는 간단하게 주제와 이미지 하나만을 넣어주었습니다. 밝은 한강의 사진을 넣어주었고, 스크립트를 통해 마우스 오버했을 때, 어두운 사진으로 바뀌면서 밤이 되는 느낌을 주도록 하겠습니다.
Javascript 작성하기
const Img = document.querySelector("#container img");
Img.addEventListener("mouseover", () => {
Img.src = "practice/img/Han-river2.png"
});
Img.addEventListener("mouseout", () => {
Img.src = "practice/img/Han-river1.png"
});javascript 정리해보기
- 이미지를 Img라는 변수에 선택자 그대로 저장해주었습니다.
- Img에 addEventListener를 통해 마우스 오버(mouseover)했을 때, 이미지의 속성(경로)을 변경해 주는 함수를 실행하는 이벤트를 추가했습니다.
- 반대로 마우스가 나갈 때(mouseout)했을 때, 다시 원래의 이미지 속성(경로)으로 변경해주는 함수 이벤트를 추가합니다.
클릭효과로 사이드 네비메뉴 나오게하기
우측 상단의 메뉴 표시를 눌렀을 때, 사이드에 있던 메뉴바가 나오도록 하는 효과를 만들어 보겠습니다.
HTML 작성하기
<!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="practice/css/PracticeQ2.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>
<div class="close">
<span>close</span>
</div>
</nav>
</body>
</html>HTML 정리해보기
html본문에는 버튼 한개와 사이드 메뉴에 들어가는 목록 세개를 만들어 주었습니다. 메뉴 버튼을 클릭해 메뉴를 열고 다시 닫아주는 버튼을 만들기 위해 close라는 이름의 박스를 하나 더 만들어 주었습니다.
CSS 작성하기
* {
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-color:#639;
padding:15px;
border:none;
outline: none;
color:white;
transition: transform 0.3s ease-in-out;
cursor: pointer;
}
button.active {
transform:translateX(-110px);
}
nav {
position:fixed;
top:0;
right:0;
background-color:#639;
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;
}
.close {
width: 30px;
height: 30px;
background-color: #000;
position: absolute;
top: 2px;
right: 1px;
cursor: pointer;
}
.close span {
color: #fff;
font-size: 11px;
}CSS 정리해보기
- 각각의 아이템들의 위치를 잡아주었습니다.
- button과 nav에 active class가 붙으면 X 축으로 이동하는 속성값을 주었습니다.
Javascript 작성하기
const Btn = document.querySelector("#bttn");
const Nav = document.querySelector("#nav");
const Cls = document.querySelector(".close");
Btn.addEventListener("click", () => {
Btn.classList.add("active");
Nav.classList.add("active");
});
Cls.addEventListener("click", () => {
Btn.classList.remove("active");
Nav.classList.remove("active");
});javascript 정리해보기
- button과 nav, close 모두의 선택자를 변수에 저장했습니다.
- Btn(#bttn) 에게 addEventListener를 통해 클릭 했을 때의 이벤트를 Btn과 Nav(#nav)의 classList에 active를 추가하는 함수로 적어주었습니다.
- 마찬가지로 Cls(.close)에게 addEventListener로 클릭 했을 때의 이벤트를 Btn과 Nav의 classList에서 active를 제거하는 함수로 적어주었습니다.
이상으로 스크립트를 이용하여 마우스오버 효과와 클릭이벤트를 넣어보았습니다 !
728x90
반응형