오늘은 자바스크립트 이벤트 객체와 관련된 마무리 문제들을 풀어보겠습니다.
자바스크립트 마무리 문제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() 메서드를 사용하면 지정한 클래스가 해당 요소에 이미 존재하는 경우 클래스를 제거하고, 클래스가 존재하지 않는 경우 클래스를 추가합니다.
완성된 페이지
오늘은 자바스크립트 이벤트 객체와 관련된 마무리 문제들을 풀어보겠습니다.
자바스크립트 마무리 문제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() 메서드를 사용하면 지정한 클래스가 해당 요소에 이미 존재하는 경우 클래스를 제거하고, 클래스가 존재하지 않는 경우 클래스를 추가합니다.
완성된 페이지