QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
자바스크립트 마무리 문제 (1)
이미지에 마우스 포인터를 올려 놓았을 때, 다른 이미지로 바뀌었다가 마우스 포인터를 다른 곳으로 이동하면 다시 원래 이미지로 바뀌는 소스를 작성해 보세요.
길라잡이
- img 태그에는 id나 class가 없습니다. 태그 이름을 사용하거나 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>
<style>
.container {
width: 1160px;
height: 800px;
margin: 0 auto;
padding: 120px 0;
text-align: center;
}
h1 {
font-size: 48px;
font-weight: normal;
}
.img {
width: 500px;
}
</style>
</head>
<body>
<div class="container">
<h1>우리집 강아지 귀여워</h1>
<img src="assets/img/img01.jpg" alt="다육이 화분 사진" class="img">
</div>
</body>
<script>
const img1 = document.querySelector(".container .img");
img1.addEventListener("mouseover", ()=>{
img1.src = "assets/img/img02.jpg";
});
img1.addEventListener("mouseout", ()=>{
img1.src = "assets/img/img01.jpg";
});
</script>
</html>- ocument.querySelector(".container .img")를 사용하여 HTML 문서의 이미지 요소를 선택합니다. 이 요소는 클래스가 "container"인 요소의 하위 요소 중 클래스가 "img"인 요소입니다.
- addEventListener()를 사용하여 이벤트 핸들러를 등록합니다. addEventListener()는 두 개의 인수를 취합니다. 첫 번째 인수는 이벤트 유형을 지정하고, 두 번째 인수는 해당 이벤트가 발생했을 때 실행될 함수를 지정합니다.
- 첫 번째 이벤트 유형은 "mouseover"이며, 이벤트가 발생하면 두 번째 인수로 전달된 함수가 실행됩니다. 이 함수는 img1의 src 속성을 "assets/img/img02.jpg"로 변경합니다.
- 두 번째 이벤트 유형은 "mouseout"이며, 마우스가 이미지 위에서 벗어나면 해당 이벤트가 발생합니다. 이벤트가 발생하면 두 번째 인수로 전달된 함수가 실행됩니다. 이 함수는 img1의 src 속성을 "assets/img/img01.jpg"로 변경합니다.
참고!
addEventListener("mouseover") : 마우스 포인터가 요소 위로 .이동할 때 발생합니다.
addEventListener("mouseout") : 마우스 포인터가 요소에서 벗어날 때 발생합니다.
자바스크립트 마무리 문제 (2)
이벤트를 활용해 필요에 따라 표시했다가 감추는 메뉴를 만들어 보겠습니다. 여기에서는 아이콘을 클릭하면 메뉴가 표시되고, 다시 클릭하면 메뉴가 숨겨지는 예제를 만들 것입니다. 버튼을 클릭할 때마다 변수와 메뉴에 .active 스타일을 토글하는 소스를 작성해 보세요.
길라잡이
- 웹 문서에 연결된 외부 스타일 시트 파일에 button.active와 nav.active 스타일이 미리 만들어져 있습니다.
- 버튼과 메뉴를 가져와서 각각 변수로 저장합니다.
- 버튼에 click 이벤트가 발생했을 때 실행할 함수를 연결하는데, 이 함수에서는 버튼과 메뉴에 active 클래스 스타일을 토글합니다.
코드
<!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>
<style>
* {
box-sizing: border-box;
}
ul, li {
list-style: none;
}
button {
position:fixed;
top:0px;
right:0px;
width: 50px;
height: 50px;
background-color:rgb(104, 135, 147);
padding: 15px;
transition: transform 0.3s ease-in-out;
}
button.active {
transform: translateX(-220px);
}
main {
position: fixed;
top: 0;
right: 0;
background-color: rgb(111, 147, 176);
width: 250px;
height: 100vh;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
main.active {
transform:translateX(0);
}
main ul {
padding:0;
margin:0;
}
main li {
margin-left: 20px;
padding: 20px 0;
}
main a {
color:white;
text-decoration: none;
}
</style>
</head>
<body>
<button>💛</button>
<main>
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">Typescript</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</main>
<script>
const button = document.querySelector("button");
const main = document.querySelector("main");
button.addEventListener("click", () => {
button.classList.toggle("active");
main.classList.toggle("active");
});
</script>
</body>
</html>- document.querySelector()를 사용하여 HTML 문서의 버튼 요소를 선택합니다. 선택된 요소는 button 상수에 할당됩니다. 그리고 document.querySelector()를 사용하여 HTML 문서의 main 요소도 선택하고, main 상수에 할당됩니다.
- 첫 번째 이벤트 유형은 "click"입니다. 이벤트가 발생하면 두 번째 인수로 전달된 함수가 실행됩니다. 이 함수는 button 요소와 main 요소의 classList.toggle() 메서드를 사용하여 클래스를 추가하거나 제거합니다.
- classList.toggle() 메서드는 인수로 전달된 클래스가 요소에 이미 존재하면 클래스를 제거하고, 그렇지 않으면 클래스를 추가합니다. 이를 통해 버튼을 클릭할 때마다 button 요소와 main 요소에서 "active" 클래스가 추가되거나 제거됩니다.
참고!
classList.toggle( ) : DOM 요소의 클래스 리스트에 지정된 클래스를 추가하거나 제거하는 데 사용됩니다. 만약 클래스 리스트에 지정된 클래스가 이미 존재하면 해당 클래스를 제거하고, 존재하지 않으면 해당 클래스를 추가합니다.
addEventListener("click") : DOM 요소에 이벤트 리스너를 등록하는 데 사용됩니다. 첫 번째 인수로 이벤트 타입(예: click, mouseover, keydown 등)을 지정하고, 두 번째 인수로 해당 이벤트가 발생했을 때 실행될 함수(이벤트 핸들러)를 지정합니다.
반응형
