“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- 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 : 특정 요소를 가시성 상태로 전환시키는 메서드입니다. 메서드 요소가 숨겨져있으면 보이게 보여져있으면 숨길 수 있습니다.