“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
설명:
마우스를 오버하면 이미지가 바뀌는 효과를 넣은 자바스크립트와 버튼을 누르면 사이드에서 메뉴가 나오는 자바스크립트를 만들어 봤습니다.
설명하기 쉽게 body 부분의 코드를 각각 나눠서 보여드리겠습니다.
마우스 오버하면 화면 바꾸기
<body>
<div class="picture">
<img src="assets/ico/sunrise.jpg" alt="" class="sunrise">
</div>
<script>
const sunrise = document.querySelector(".picture .sunrise");
sunrise.addEventListener("mouseover", function(){
sunrise.src = "assets/ico/summer.jpg";
});
sunrise.addEventListener("mouseout", function(){
sunrise.src = "assets/ico/sunrise.jpg";
});
</script>
</body>우선, 이미지를 자바스크립트 파일 안에 저장해놓아야 합니다.
이미지의 이름을 각각 sunrise 와 summer 로 정했습니다.
이미지를 저장해놓은 경로를 코드에서 볼 수 있듯이(img src="assets/ico/sunrise/jpg"), 경로가 단순할 수록 덜 헷갈립니다.
화면에 나올 이미지를 sunrise 로 정해서 div 안에 넣었습니다.
이미지를 불러오면서, 효과를 넣으려면 class 가 필요하기 때문입니다.
sunrise 라는 이름으로 변수를 저장했습니다.
해당 이미지를 불러오는 변수입니다.
addEventListener 를 이용해서 마우스 오버(mouseover)를 했을 때에 다른 이미지 즉, summer 가 나오도록 설정했습니다.
이 때 .src를 이용해서 이미지 경로를 입력하면 간단하게 이미지를 불러올 수 있습니다.
마우스 오버가 끝난, 마우스가 이미지 위에 있지 않을 때에는 다시 원래의 sunrise 로 돌아가도록 mouseout 도 같은 형식으로 설정했습니다.
버튼을 누르면 나오는 메뉴
<body>
<button class="btn">press</button>
<nav class="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 btn = document.querySelector(".btn");
const nav = document.querySelector(".nav");
btn.addEventListener("click", function(){
btn.classList.add("active");
nav.classList.add("active");
});
</script>
</body>누를 버튼이 필요하기 때문에 버튼을 만든 후에, 메뉴를 만들었습니다.
각각 btn 과 nav 라는 class 를 정해서 변수를 만들었습니다.
마우스 오버효과를 설정했던 것처럼 addEventListener 를 쓰기 위해서 입니다.
classList 는 명시된 클래스를 추가하는 메서드입니다.
classList.add 로 추가를 하고, active로 활성화를 시켰습니다.