My Melody Kawaii

JAVASCRIPT/문제풀이

자바스크립트 문제 풀이

younajeong 2023. 3. 30. 23:16

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

자바스크립트 문제 풀이 

 

자바스크립트를 사용해서 사진에서 마우스를 움직이면 사진이 바뀌는 효과와 버튼을 누르면 메뉴가 뜨는 문제를 풀이했습니다.

 

 

마무리문제 1

<!DOCTYPE html>
<html lang="en">
<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>
</head>
    <style>
        .wrap {      
            width: 1200px;
        }
        .wrap img {
            margin: 0 auto;
            display: block;
            box-sizing: border-box;
            object-fit: cover;
            width: 500px;
            height: 500px;
        }
    </style>
<body>
    <div class="wrap">
        
        <img src="img/mouseEffect01-min.jpg">
    </div>
</body>
    <script>

        const mouse = document.querySelector(".wrap img");
            document.querySelector(".wrap img").addEventListener("mouseover",()=>{
                mouse.src = "img/mouseEffect01-min.jpg"
            })
            document.querySelector(".wrap img").addEventListener("mouseout",()=>{
                mouse.src = "img/mouseEffect02-min.jpg"
            })
    </script>
</html>

풀이

  • div 에 class로 wrap을 주고 난 후에 이미지 파일을 올려 두었습니다.
  • const로 변수를 선언해서 선택자로 .wrap img를 선택했습니다.
  • addEventListener를 사용해서 mouseover 효과를 준 후 선택자에서 mouse를 선택해서 img안에 src를 불러오고 이미지를 넣어두었습니다.
  • mouseout도 mouseover와 동일하게 코드 진행을 하였습니다.

<완성본>

 

마무리문제 2

<!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>finalQestion02</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul, li, ol {
            list-style: none;
        }
        button {
            position: fixed;
            right: 30px;
            top: 30px;
            width: 60px;
            height: 60px;
            font-size: 25px;
            background-color: #ff9b9b;
            transition: transform 0.3s ease-in-out;
        }
        button.active {
            transform: translateX(-170px);
        }
        nav {
            position: fixed;
            right: 0;
            top: 0;
            background-color: #ff6262;
            color: #fff;
            width: 200px;
            height: 100vh;
            transform:translateX(100%);
            transition: transform 0.3s ease-in-out;
        }
        nav.active {
            transform:translateX(0);
        }
        nav ul {
            margin: 0;
            padding: 0;
        }
        nav li {
            margin-left: 20px;
            padding: 30px 0;
        }
        nav a {
            text-decoration: none;
            color: #fff;
        }
    </style>
</head>
<body>
    <button>🦋</button>
    <nav>
        <ul>
            <li><a href="#">Javascript</a></li>
            <li><a href="#">Typerscript</a></li>
            <li><a href="#">Node.js</a></li>
        </ul>
    </nav>

    <script>
        let button = document.querySelector("button");
        let nav = document.querySelector("nav");

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

풀이

  • body에 button과 nav안에 ul,li태그를 사용해서 버튼과 메뉴안에 들어갈 리스트를 적어 두었습니다.
  • 스크립트는 선택자 button과 nav를 만들었습니다.
  • addEventListener로 버튼을 클릭하는 이벤트 효과를 주었고 화살표 함수를 사용한 후 button과 nav에 classList를 준 후 toggle를 사용해서 "active"효과를 주었습니다.

<완성본>

 

속성 알아보기

  • querySelector : 선택자를 선택할때 사용하는 속성 입니다. 다중이를 선택할 때 뒤에 All을 붙혀준다.
  • addEventListener : 사용자와 상호작용을 하며 마우스(키보드,펜,터치)를 조작할때 그에 대한 반응하는 이벤트 속성이다.
  • toggle : 특정 요소를 가시성 상태로 전환시키는  메서드입니다. 메서드 요소가 숨겨져있으면 보이게 보여져있으면 숨길 수 있습니다.