“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
자바스크립트 연습문제
마우스 포인터를 올려놨을때 이미지가 바뀌는 효과
💜마우스 포인터 효과
<mouse class="wrap">
<img src="img/mouseEffect01-min.jpg" class="img">
</mouse>우선 body 안에 mouse 태그를 만들어 class를 지정해줍니다.
<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>그리고 아래 script안에
이미지 선택자를 만들어주고
mouseover와 mouseout으로
마우스를오버했을때 나오는 사진과
마우스를 뺐을때 나오는 사진을 넣어줘 효과를 줍니다.
클릭하면 메뉴나오는 효과
💜마우스 클릭 효과
<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>body안에 button태그와 nav 태그 안에 각각의 메뉴를 지정해줍니다.
<style>
* {
margin: 0;
padding: 0;
}
ul, li, ol {
list-style: none;
}
button {
position: fixed;
right: 30px;
top: 30px;
width: 50px;
height: 50px;
font-size: 10px;
background-color: #ffffff;
transition: transform 0.3s ease-in-out;
}
button.active {
transform: translateX(-170px);
}
nav {
position: fixed;
right: 0;
top: 0;
background-color: #000;
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>그리고 style안에 css를 설정해줍니다.
<script>
let button = document.querySelector("button");
let nav = document.querySelector("nav");
button.addEventListener("click", () => {
button.classList.toggle("active");
nav.classList.toggle("active");
});
</script>script 안에 버튼을 클릭했을때의 효과를 설정해줍니다.
선택자를 먼저 만들어주고
버튼을 클릭했을때의 효과를 넣어줍니다.
💜toggle()
토글
on/off 스위치의 개념으로 스위치를 껐다 켰다 하는 기능을 가지고 있다.
add()와 remove() 메서드를 한번에 쓸 수 있는 합쳐진 개념.
반응형