버튼을 클릭하면 명언이 나와요
-이름이 나와요
1번 문제.
이미지 위에 마우스 포인터를 올려 놓으면 다른 이미지로 변하고. 마우스가 밖으로 이동하면 원래의 이미지가 돌아옵니다.
(자바스크립트는 mouseover와 mouseout을 사용해야합니다.)
완성된 모습
HTML+CSS코드
<!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>마우스가 들어오면 이미지가 바뀌네요</title>
<style>
.img1 {
/* display: none; */
width: 500px;
height: 500px;
background-image: url("./img/img1.jpg");
}
/* .img1:hover {
width: 100%;
height: 500px;
background-image: url("./img/img2.jpg");
background-size: cover;
} */
.img2 {
display: none;
width: 500px;
height: 500px;
background-image: url("./img/img2.jpg");
}
</style>
</head>
<body>
<div class="img">
<div class="img1"></div>
<div class="img2"></div>
</div>
</body>
</html>코드 설명
1. div태그 .img1을 만듭니다.(여기는 재가 좋아하는 교촌치킨 윙봉 사진이 들어갑니다.)
2. div태그 .img2을 만듭니다.(여기도 재가 좋아하는 교촌치킨 닭다리만 사진이 들어갑니다.)
3. CSS에서는 .img1에다가 background-image로 이미지를 불러오고 width값과 height값을 줍니다.
4. .img2에다가 똑같이 background-image로 이미지를 불러오고 width값과 height값을 줍니다.
(그리고 .img2태그는 화면상에 안보이게 숨겨줍니다.)
JAVASCRIPT코드
<script>
const Img = document.querySelector(".img");
const Img1h = Img.querySelector(".img1");
const Img2h = Img.querySelector(".img2");
Img1h.addEventListener("mouseover", function(){
console.log("asd");
Img1h.style.display = "none";
Img2h.style.display = "block";
});
Img2h.addEventListener("mouseout", function(){
Img1h.style.display = "block";
Img2h.style.display = "none";
});
</script>코드설명
1.querySelector("대상")으로 .img1과 .img2를 찾아냅니다.
2.img1에 마우스가 올라오면 .img1을 숨깁니다. 그리고 .img2을 보여줍니다.
3.마우스가 사진 밖으로 이동하면 img2는 숨기고. .img1을 보여줍니다.
ㅎ_ㅎ
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
2번 문제.
이벤트를 활용해 필요에 따라 표시했다가 감추는 메뉴를 만들어야 합니다.
(click이벤트를 쓰라고 합니다.)
완성본
HTML+CSS코드
<!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>토글 메뉴를 만들어 보래요.-_-</title>
<style>
* {
padding: 0;
margin: 0;
}
.menu {
position: relative;
width: 40px;
height: 40px;
background-color: #5f5656;
color: #fff;
cursor: pointer;
}
.menu .one {
position: absolute;
left: 12px;
top: 5px;
}
.menu .two {
position: absolute;
left: 12px;
top: 10px;
}
.menu .three {
position: absolute;
left: 12px;
top: 15px;
}
/* menu__style */
.menu__box {
position: absolute;
left: 0;
top: 0;
}
.menu__style {
display: none;
width: 300px;
height: 1000px;
background-color: #5f5656;
}
li {
list-style: none;
}
a {
display: inline-block;
text-align: center;
font-size: 20px;
color: #fff;
text-decoration: none;
padding: 10px;
}
.transparent {
display: block;
}
.left {
margin-left: 300px;
}
</style>
</head>
<body>
<div class="menu">
<div class="one">ㅡ</div>
<div class="two">ㅡ</div>
<div class="three">ㅡ</div>
</div>
<div class="menu__box">
<div class="menu__style">
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">Typescript</a></li>
<li><a hrefe="#">Node.js</a></li>
</ul>
</div>
</div>
</body>
</html>코드설명
1.div태그 .menu에는 .one과 .two과 .three가 있습니다.(메뉴 입니다.)
(원래는 클릭시에 애니메이션 효과를 위해 사용하였지만... 내일 시험 공부도 있어서 패스 했습니다.)
2.div태그 .menu__box는 안에 들어가는 메뉴 내용 전체를 옮겨줍니다.
(.menu__box는 숨김 처리 중입니다 / div태그 .menu를 클릭하면 / .menu__box를 보여줍니다)
3.div태그 .menu__style에는 li태그가 있습니다. 이제 유저가 선택할 메뉴입니다.~
4..one와 .two와 .three는 애니메이션을 위해 만들었는데. 안만들기로 해서 설명할게 없네요.
5..transparent와 .left 클릭할떄마다 class이름을 부여해서 CSS Style을 주기 위해서입니다.
JAVASCRIPT코드
<script>
const Menu = document.querySelector(".menu");
const menuStyle = document.querySelector(".menu__style");
Menu.addEventListener("click", function(){
console.log("클릭")
menuStyle.classList.toggle("transparent");
Menu.classList.toggle("left");
})
</script>코드설명
1.querySelector("대상");으로 .menu와 .menu__style을 찾습니다.
2..menu클래스를 클릭하면 .menu__style을 display: none, block을 반복합니다.
(toggle효과 : 1번 클릭하면 class를 부여하고 / 1번 더 클릭하면 class를 지웁니다.)
3..menu클래스를 클릭했을때 .menu의 위치도 옮겨줍니다.
