마무리 문제 1
이미지 위에 마우스 포인트러를 올려 놓았을때 다른 이미지로 바뀌엇다가 이미지에서 마우스 포인터를 다른 곳으로 이동하면 처음 사진으로 바뀌는 코드를 짜보았습니다.
HTML
<body>
<h2>이미지에 마우스를 오버해보세요</h2>
<div class="image1">
<img src="assets/img/m1.png" alt="너 마음대로 해 이미지">
</div>
<div class="image2">
<img src="assets/img/m2.png" alt="너 마음대로 해 이미지">
</div>JAVASCRIPT
<script>
const img1 = document.querySelector(".image1");
const img2 = document.querySelector(".image2");
img2.style.display = "none";
document.querySelector("img").addEventListener("mouseover", function(){
img1.style.display = "none";
img2.style.display = "block";
})
document.querySelector("img").addEventListener("mouseout", function(){
img1.style.display = "block";
img2.style.display = "none";
})
</script>코드 설명
우선 첫째 줄에서 img1 변수에는 HTML 문서에서 class가 "image1"인 요소를 가져와 저장합니다. 둘째 줄에서도 마찬가지로 img2 변수에는 class가 "image2"인 요소를 가져와 저장합니다.
그 다음 줄에서 img2 요소의 display 속성을 "none"으로 설정하여, 초기에는 img2가 보이지 않도록 합니다.
그 후, document.querySelector("img")를 사용하여 문서 내 첫 번째 <img> 요소를 가져와, 마우스 이벤트를 등록합니다.
마우스가 <img> 요소 위로 올라갈 때 발생하는 mouseover 이벤트에 대한 핸들러 함수에서는 img1 요소의 display 속성을 "none"으로 설정하여 img1을 숨기고, img2 요소의 display 속성을 "block"으로 설정하여 img2를 보이게 합니다.
마우스가 <img> 요소를 벗어나게 되면 발생하는 mouseout 이벤트에 대한 핸들러 함수에서는 img1 요소의 display 속성을 "block"으로 설정하여 img1을 다시 보이게 하고, img2 요소의 display 속성을 "none"으로 설정하여 img2를 숨깁니다.
이렇게 하면 마우스가 <img> 요소 위로 올라갈 때 img1이 img2로 교체되며, 마우스가 <img> 요소를 벗어나면 img2가 img1로 다시 교체되는 효과를 볼 수 있습니다.
마무리 문제 2
이벤트를 활용해 필요에 따라 표시했다가 감추는 메뉴를 만들어 보았습니다.
아이콘을 클릭하면 메뉴가 표시되고, 다시 클릭하면 메뉴가 숨겨지는 예제입니다.
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;
}
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;
}JAVASCRIPT
<script src="js/solution-2.js"></script>
<script>
const bttn = document.getElementById('bttn');
const nav = document.getElementById('nav');
bttn.addEventListener('click', () => {
nav.classList.toggle('active');
bttn.classList.toggle('active');
});
</script>코드 설명
이 코드는 "bttn" 요소를 클릭하면 "nav" 요소의 "active" 클래스를 추가하거나 제거하는 이벤트를 처리합니다.
const bttn = document.getElementById('bttn');: "bttn" 요소를 가져와 bttn 변수에 할당합니다.
const nav = document.getElementById('nav');: "nav" 요소를 가져와 nav 변수에 할당합니다.
bttn.addEventListener('click', () => { ... });: "bttn" 요소에 "click" 이벤트를 추가하고, 클릭 이벤트가 발생하면 화살표 함수를 실행합니다.
nav.classList.toggle('active');: "nav" 요소의 클래스 목록에 "active" 클래스를 추가하거나 제거합니다. 클래스가 없으면 추가하고, 있으면 제거합니다.
bttn.classList.toggle('active');: "bttn" 요소의 클래스 목록에 "active" 클래스를 추가하거나 제거합니다. 클래스가 없으면 추가하고, 있으면 제거합니다.
따라서, 이 코드는 "bttn" 요소를 클릭하면 "nav" 요소의 "active" 클래스와 "bttn" 요소의 "active" 클래스를 토글합니다. 이를 통해, 메뉴 버튼을 클릭하면 메뉴가 열리거나 닫히게 됩니다.