JAVASCRIPT

마무리 문제 풀이 3

hyejeong3283 2023. 3. 30. 19:48
728x90
반응형

마무리 문제 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: 600px;
      margin: 20px auto;
    }
    h1 {
      font-size:1.5rem;
      text-align:center;
      margin-bottom:20px;
    }
    img {
        width: 600px;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>마우스 오버하면 이미지 바꾸기</h1>
    <img src="../javascript/assets/img/cherry01_01.jpg" alt="체리">
  </div>
  <script>
    const imgCherry = document.querySelector("#container > img");

    imgCherry.addEventListener("mouseover",()=>{
        imgCherry.src="../javascript/assets/img/cherry01_02.jpg"
    });
    imgCherry.addEventListener("mouseout",()=>{
        imgCherry.src="../javascript/assets/img/cherry01_01.jpg"
    });
  </script>
</body>
</html>

 

#container > img 태그 안의 이미지를 document.querySelector()를 사용해 imgCherry 변수명에 저장해줍니다.

이벤트 메서드 함수를 이용해 이벤트를 줍니다.

imgPic에 mouseover(마우스 포인터를 올려놓을 때), mouseout(마우스 포인터가 벗어났을 때)의 이벤트를 등록합니다.

이벤트메서드 함수 안에 각각 다른 속성값(이미지)을 부여하여 이벤트를 호출해줍니다.

 

이미지 위에 마우스 포인터를 올려놓으면 기존이미지01에서 이미지02로 교체되고,

마우스 포인터가 이미지를 벗어나면 이미지02에서 다시 이미지01로 교체됩니다.

 

 

마무리 문제 2번

이벤트를 활용해 필요에 따라 표시했다가 감추는 메뉴를 만드는 문제입니다. 아이콘을 클릭하면 메뉴가 표시되고, 다시 클릭하면 메뉴가 숨겨지는 예제입니다.

 

길라잡이

  • 웹 문서에 연결된 외부 스타일 시트 파일에 button.active와 nav.active 스타일이 미리 만들어져 있습니다.
  • 버튼과 메뉴를 가져와서 각각 변수로 저장합니다.
  • 버튼에 click 이벤트가 발생했을 때 실행할 함수를 연결하는데, 이 함수에서는 버튼과 메뉴에 active 클래스 스타일을 토글합니다.

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;
}

예제 파일에 있던 css를 그대로 가져왔습니다.

 

HTML 코드

<!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 id="bttn">&#9776;</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.querySelector("#bttn");
    const nav = document.querySelector("#nav");

    bttn.addEventListener("click",()=>{
      nav.classList.toggle("active");
      bttn.classList.toggle("active");
    });
  </script>

</body>
</html>

 

document.queryselector를 사용해 button과 nav 태그를 변수 bttn과 nav에 각각 저장해줍니다.

bttn.addEventListener("click", () => {});

bttn요소에 "click" 이벤트를 추가하고, 클릭 이벤트가 발생하면 함수를 실행합니다.

nav.classList.toggle("active");

nav 요소의 클래스 목록에 "active" 클래스를 추가하거나 제거합니다. 클래스가 없으면 추가하고, 있으면 제거합니다.

 

bttn.classList.toggle("active");

bttn 요소의 클래스 목록에 "active" 클래스를 추가하거나 제거합니다. 클래스가 없으면 추가하고, 있으면 제거합니다.

bttn(아이콘)를 클릭하면 "nav" 요소의 "active" 클래스와 "bttn" 요소의 "active" 클래스를 토글합니다. 이를 통해, 메뉴 버튼을 클릭하면 메뉴가 열리거나 닫히게 됩니다.