- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
문제1번
이미지의 위에 마우스 포인터르르 올려 놓았을때 바뀌었다가 이미지에서 마우스 포인터를 다른곳으로 이동하면 다시 원복하는 소스를 작성해보세요.
<!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;
}
</style>
</head>
<body>
<div id="container">
<h1>마우스 오버하면 이미지 바꾸기</h1>
<img src="images/pic-1.jpg" alt="">
</div>
<script>
const img = document.querySelector("img");
console.log(img)
img.addEventListener("mouseover", ()=>{
img.src = "images/pic-2.jpg"
})
img.addEventListener("mouseout", ()=>{
img.src = "images/pic-1.jpg"
})
</script>
</body>
</html>- 마우스 오버 효과와 마우스 아웃 효과만 알면 쉽게 풀수 있는 문제입니다.
- 변수안에 img를 저장하고 이미지에 마우스오버를 하면 그림을 바꿔주고
- img에 마우스아웃이 되면 다시 원래 이미지로 변경하면 됩니다.
문제2번
네비게이션 바를 클릭하면 메뉴가 표시되고 다시 클릭하면 메뉴가 숨겨지는 소스를 작성해보세요
<!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>
<style>
* {
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;
}
</style>
<body>
<button id="bttn">☰</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",(e)=>{
if(bttn.classList.contains("active")){
nav.classList.remove('active');
bttn.classList.remove('active');
xo = false;
} else {
bttn.classList.add("active");
nav.classList.add("active");
}
})
</script>
</body>
</html>- css 에서 active 효과를 작성했습니다. 자바스크립트에서 가져와서 불러오면 됩니다.
- 먼저 변수에 버튼과 id=nav를 가져옵니다.
- 그리고 버튼을 클릭하면 이벤트를 줄꺼니까 addEventListener를 써서 함수를 작성했습니다.
- if문을 써서 해당 변수 안에 있는 클래스에 active가 붙여있는지 확인하고 있으면 active를 제거합니다.
- 그게 아니면 각 변수에 class="active"를 추가해줍니다.
- 그럼 처음 클릭할때 열리고 다시 클릭하면 닫힙니다.
- toogle메서드를 쓰면 쉬운데 이렇게도 작성해 보았습니다.
완성화면
See the Pen 연습문제1 by ture403 (@ture403) on CodePen.