오늘은 자바스크립트 이벤트 객체와 관련된 마무리 문제들을 풀어보겠습니다.
자바스크립트 마무리 문제1
이미지1에 마우스 포인터를 올려놓았을 때 이미지 2로 바뀌고, 다른 곳으로 이동할 때는 이미지1로 다시 돌아오는 이벤트를 만들어보겠습니다.
길라잡이
- img태그에는 id나 xlass가 없습니다. 태그 이름을 사용하거나 2개 이상의 선택자를 연결한 후 이미지를 가져와서 변수에 저장합니다.
-마우스 포인터를 이미지의 위에 올려놓을 때는 mouseover 이벤트가, 마우스 포인터를 다른 곳으로 이동할 때는 mouseout 이벤트가 발생합니다.
-이벤트가 발생했을 때 이미지의 src 속성값을 바꿉니다.
구조 짜기
<!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>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
.container {
width: 1160px;
height: 800px;
margin: 0 auto;
padding: 120px 0;
text-align: center;
}
h1 {
font-family: 'NexonLv1Gothic';
font-size: 50px;
font-weight: normal;
}
.img {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>마우스 오버하면 이미지 바꾸기</h1>
<img src="assets/img/img1.jpg" alt="이미지1" class="image">
</div>
</body>
</html>구조는 간단하게 div를 만들어 이름을 container라고 지정해줍니다.
그리고 h1 제목과, img 태그를 이용해 처음의 이미지를 설정해줍니다. 저는 그리고 나중에 선택자를 더 정확히 하기 위해 class를 이용해 image라는 이름을 붙여주었습니다.
또한 css를 설정해 폰트와, container에 기본값들을 먹여줍니다.
스크립트 짜기
const img1 = document.querySelector(".container .image");
img1.addEventListener("mouseover", () => {
img1.src = "assets/img/img2.jpg";
})
img1.addEventListener("mouseout", () => {
img1.src = "assets/img/img1.jpg";
})container 안에 image를 선택자로 만들어 img1이라는 변수에 저장시켜줍니다.
그리고 addEventListener메서드를 활용해 mouseover 됐을 때 함수를 실행시켜줍니다.
img1의 src (이미지)의 경로를 두 번째 이미지로 바꿔줍니다.
반대로 돌아가려면 다시 addEventListener 메서드를 활용해 mouseout됐을 때 함수를 실행시켜줍니다.
반대로 두 번째 이미지를 첫 번째 이미지로 바꿔줍니다.
addEventListener("mouseover") : 요소 위에 포인터 요소 위치가 있을 때
addEventListener("mouseout") : 요소 위에 포인터 요소 위치가 벗어났을 때
완성된 페이지
자바스크립트 마무리 문제2
이벤트를 활용해 필요에 따라 표시했다가 감추는 메뉴를 만들어보겠습니다. 여기서 아이콘을 클릭하면 메뉴가 표시되고, 다시 클릭하면 메뉴가 숨겨지는 예제를 만들 것입니다.
길라잡이
-css에 button.active와 nav.active 스타일이 미리 만들어져 있습니다.
-버튼과 메뉴를 가져와서 각각 변수로 저장합니다.
-버튼에 click이벤트가 발생했을 때 실행할 함수를 연결하는데, 이 함수에서는 버튼과 메뉴에 active 클래스 스타일을 토글합니다.
구조 짜기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 2</title>
</head>
<body>
<button class="bttn">☰</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>
</body>
</html>일단 구조를 먼저 짜줍니다. 클릭할 버튼과, 메뉴 안에 목록들이 있는 구조이므로
button을 만들어 이름을 bttn으로 하고, nav를 만들어 메뉴 이름을 nav라 해줍니다. 그리고 ul 안에 li를 만들어 목록들을 만들어줍니다. 이름을 잘 지어주어야 선택자를 만들기 편해집니다!
CSS 설정하기
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<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(255, 144, 207);
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-color:rgb(255, 144, 207);
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>외부 파일로 연결해도 되지만, 코드가 길지 않으므로 HTML 안에 넣어줍니다.
스크립트 짜기
const btn1 = document.querySelector(".bttn");
const nav1 = document.querySelector(".nav");
btn1.addEventListener("click", () => {
btn1.classList.toggle("active");
nav1.classList.toggle("active");
});첫 번째 문제와 같이 선택자를 만들어 변수에 저장시켜주겠습니다.
btn1이라는 변수에 버튼의 선택자를 만들고, nav1이라는 변수에 목록의 선택자를 만들어줍니다. 마찬가지로 document.querySelector를 이용해줍니다.
btn1를 클릭했을 때 이벤트를 줄 것이므로, addEventListener를 사용해 "click"을 쓰고 함수를 써줍니다.
그 함수 안에는 btn1.classList.toggle를 적어 active의 스타일을 추가해줍니다.
여기서 classList.toggle은 처음 들어보는데 무엇인지 살펴보겠습니다!
classList.toggle?
classList.toggle()은 JavaScript에서 DOM 요소의 클래스를 추가하거나 제거하는 메서드 중 하나입니다. toggle() 메서드를 사용하면 지정한 클래스가 해당 요소에 이미 존재하는 경우 클래스를 제거하고, 클래스가 존재하지 않는 경우 클래스를 추가합니다.
완성된 페이지
