자바스크립트 마우스 오버 사진, 토글 메뉴 만들기
마우스를 사진에 올리면 바뀌게 만들고, 토글 메뉴 만들기 두가지를 준비했습니다~
1번 문제 마우스 오버
이 문서에는 1번 이미지가 삽입되어 있습니다.
이미지 위에 마우스 포인터를 올려 놓았을 때 2번 이미지로 바뀌었다가,
이미지에서 마우스 포인터를 다른 곳으로 이동하면 1번 이미지로 바뀌는 소스를 작성해 보세요.
[ 사진에 마우스 커서를 올려보세요~ ]
VSCode
<!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>마무리문제(javascript 220~221)</title>
</head>
<body>
<img src="img/2.png">
</body>
<script>
let imgsrc = document.querySelector("img");
imgsrc.addEventListener("mouseover",() => {
imgsrc.src = "img/1.png";
});
imgsrc.addEventListener("mouseout", () => {
imgsrc.src = "img/2.png";
});
</script>
</html>
이 코드는 HTML과 JavaScript를 사용하여 마우스 오버(mouseover) 이벤트와 마우스 아웃(mouseout) 이벤트를 처리하는 방법을 보여줍니다.
HTML 코드는 img 태그를 사용하여 이미지를 표시합니다. 이미지의 src 속성은 "img/2.png"로 설정되어 있습니다.
JavaScript 코드는 먼저 img 태그를 선택하는 document.querySelector 함수를 사용하여 imgsrc 변수에 저장합니다. 그리고 imgsrc 변수에 대해 마우스 호버 이벤트 및 마우스 아웃 이벤트를 등록합니다.
마우스 호버 이벤트는 imgsrc 변수에 대해 addEventListener 함수를 호출하여 등록합니다. 이벤트 리스너는 화살표 함수를 사용하여 정의되며, 마우스가 이미지 위로 올라갈 때 실행됩니다. 그리고 imgsrc 변수의 src 속성을 "img/1.png"로 변경합니다.
마우스 아웃 이벤트도 imgsrc 변수에 대해 addEventListener 함수를 호출하여 등록합니다. 이벤트 리스너는 화살표 함수를 사용하여 정의되며, 마우스가 이미지 밖으로 나갈 때 실행됩니다. 그리고 imgsrc 변수의 src 속성을 다시 "img/2.png"로 변경합니다.
즉, 마우스가 이미지 위로 올라가면 이미지가 변경되고, 마우스가 이미지 밖으로 나가면 이미지가 다시 변경됩니다.
이를 통해 마우스 호버 이벤트와 마우스 아웃 이벤트를 처리할 수 있습니다.
문제 2번 토글 메뉴
이벤트를 활용해 필요에 따라 표시했다가 감추는 메뉴를 만들어보겠습니다.
여기서에서는 아이콘을 클릭하면 메뉴가 표시되고, 다시 클릭하면 메뉴가 숨겨지는 예제를 만들 것입니다.
버튼을 클릭할 때마다 변수와 메뉴에 .active 스타일을 토글하는 소스를 작성해 보세요.
[ 메뉴를 눌러보세요~ ]
VSCode
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 2</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin:0;
min-height:100vh;
}
button {
position:fixed;
top:0px;
right:0px;
background-color:rgb(216, 43, 187);
padding:15px;
border:none;
outline: none;
color:white;
transition: transform 0.3s ease-in-out;
cursor: pointer;
}
button.active {
transform:translateX(-135px);
}
nav {
position:fixed;
top:0;
right:0;
background-color:rgb(216, 43, 187);
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>
</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>
</body>
<script>
const bttn = document.getElementById('bttn');
const nav = document.getElementById('nav');
bttn.addEventListener('click', () => {
nav.classList.toggle('active');
bttn.classList.toggle('active');
});
</script>
</html>이 코드는 HTML, CSS, JavaScript를 사용하여 메뉴버튼을 클릭하면 나타나는 토글형 메뉴를 만드는 방법을 보여줍니다.
HTML 코드는 메뉴버튼과 토글 메뉴를 표시합니다. 메뉴버튼은 button 태그를 사용하여 생성되며, 토글메뉴는 nav 태그를 사용하여 생성됩니다. 토글 메뉴는 ul 태그와 li 태그를 사용하여 목록으로 표시되며, a 태그를 사용하여 링크가 추가되어 있습니다.
CSS 코드는 박스 모델(box model)을 사용하여 요소의 크기 및 위치를 제어합니다. body 태그에 대해서는 flexbox 레이아웃을 사용하여 가운데 정렬을 수행하고, button과 nav 요소에 대해서는 position 속성과 top, right 속성을 사용하여 화면 우측 상단에 고정됩니다. 그리고 transform 속성을 사용하여 화면에 보이지 않도록 초기 상태를 지정합니다.
JavaScript 코드는 먼저 button과 nav 요소를 선택하는 getElementById 함수를 사용하여 bttn 변수와 nav 변수에 저장합니다. 그리고 bttn 변수에 대해 클릭 이벤트를 등록합니다. 클릭 이벤트가 발생하면 nav 요소의 클래스 리스트와 bttn 요소의 클래스 리스트에 대해 toggle 함수를 호출하여 active 클래스를 추가하거나 제거합니다. 이를 통해 메뉴 버튼을 클릭하면 토글 메뉴가 나타나고, 다시 클릭하면 메뉴가 사라지는 효과를 구현합니다.
즉, 이 코드는 HTML, CSS, JavaScript를 사용하여 메뉴 버튼을 클릭하면 나타나는 토글 메뉴를 만드는 방법을 보여줍니다. 이를 통해 사용자가 더욱 쉽게 웹 사이트를 탐색할 수 있도록 도와줍니다.