문제 연습 1
이미지가 마우스 오버를 했을 때 첫번째 이미지에서 두번째 이미지가 나오는 소스를 작성해보세요.
마우스를 이미지 위에 올리면 이미지가 바뀝니다!
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>
* {
margin: 0;
padding: 0;
}
.img__wrap {
width: 600px;
margin: 20px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
h1 {
font-size:1.5rem;
text-align:center;
margin-bottom:20px;
}
</style>
</head>
<body>
<div class="img__wrap">
<h1>마우스 오버 이미지 변경</h1>
<div class="img1">
<img src="../homework/assets/img/i01.jpg" alt="사진1">
</div>
<div class="img2">
<img src="../homework/assets/img/i02.jpg" alt="사진2">
</div>
</div>
</body>
</html>
script
<script>
const imgMouse1 = document.querySelector(".img1");
const imgMouse2 = document.querySelector(".img2");
imgMouse2.style.display = "none";
document.querySelectorAll("img").forEach(img => {
img.addEventListener("mouseover",() => {
imgMouse1.style.display = "none";
imgMouse2.style.display = "block";
})
img.addEventListener("mouseout",() => {
imgMouse1.style.display = "block";
imgMouse2.style.display = "none";
});
});
</script>먼저 선택자로 이미지 두 개를 각각 선택합니다.
그리고 처음에 두번째 이미지가 나타나지 않도록 스타일에 display = "none";을 주었습니다.
선택자로 이미지를 모두 선택하고 forEach문을 통해 마우스를 오버했을때 두번째 이미지가 나타나도록 첫번째 이미지를 display ="none"으로 가리고 두번째 이미지는 display = "block"을 주었습니다.
그리고 마우스가 빠졌을때 효과가 없는 원래의 이미지로 돌아가야 하므로 반대로 주었습니다 이렇게 하면 위와 같은 페이지가 완성됩니다.
문제 연습 2
이벤트 함수를 활용해 필요에 따라 표시했다가 감추는 메뉴 만들기
버튼을 클릭할 때 마다 변수와 메뉴에 .active 스타일을 토글하는 소스를 작성해보세요.
햄버거 메뉴를 누르면 메뉴가 나옵니다!
css
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:rgb(138, 194, 247);
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(138, 194, 247);
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;
}
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>숙제2</title>
<link rel="stylesheet" href="css/homework_2.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>
</nav>
<script>
const bttn = document.getElementById('bttn');
const nav = document.getElementById('nav');
bttn.addEventListener('click', () => {
nav.classList.toggle('active');
bttn.classList.toggle('active');
});
</script>
</body>
</html>JavaScript를 사용하여 햄버거 아이콘과 탐색 메뉴를 만드는 방법입니다.
button 요소와 nav 요소를 만들었습니다.
button 요소에는 "☰" 이모지가 들어가며, nav 요소에는 ul과 li 요소로 구성된 목록이 들어갑니다.
JavaScript 부분에서는 const 키워드를 사용하여 button 요소와 nav 요소를 변수 bttn과 nav에 할당합니다.
그리고 addEventListener 메서드를 사용하여 bttn 요소에 클릭 이벤트를 추가합니다.
클릭 이벤트가 발생하면 nav 요소와 bttn 요소에 active 클래스를 토글합니다.
이렇게 함으로써 클릭할 때마다 메뉴가 나타나거나 사라지게 됩니다.
이 코드를 실행하면 웹 페이지에서 햄버거 아이콘을 클릭하면 탐색 메뉴가 나타나고 다시 클릭하면 사라지게 됩니다.
반응형 디자인에서 주로 이런 방식을 사용합니다!
toggle( )이란?
문제에서 나온 토글이 뭔지 모르겠어서 찾아봤는데 토글이란, on/off switch의 개념으로 스위치를 켰다, 껐다 하는 기능을 가지고 있고, add()와 remove() 메서드를 한번에 쓸 수 있는 개념이라고 합니다.