jqueryBasic2.html
<!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>제이쿼리연습2</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
//일회용으로 이미지를 바뀌게
// $(document).ready(function(){
// $(".cooking > img").click(function(){
// //attr로 속성(value, class, html 등)을 변경할 수 있음
// $(this).attr("src","image/icon1.svg");
// });
// });
//클릭하면 이미지 2개 로테이션 되게 - 구글링으로 적용
$(document).ready(function(){
$('.cooking > img').on({
'click': function() {
var src = ($(this).attr('src') === 'image/icon0.svg')
? 'image/icon1.svg'
: 'image/icon0.svg';
$(this).attr('src', src);
}
})
});
//hover사용을 위한 제이쿼리 함수 사용
//마우스 가까이 갔을 때, 떨어질 때 총 함수를 두 번 써야함.
$(document).ready(function(){
$(".btn").hover(function(){
$(this).css({
"background" : "skyblue",
"transition" : "0.7s"
})
}, function(){
$(this).css({
"background" : "deeppink",
"transition" : "0.5s"
})
})
});
//모달을 버튼으로 켜고 끄는 제이쿼리 함수 사용
$(document).ready(function(){
$(".modal_btn").click(function(){
$(".popup_bg").css({"display" : "block"});
});
$(".popup_bg").click(function(){
$(this).css({"display" : "none"});
});
});
</script>
<style>
.popup_bg {
/* none으로 숨겨놨다가, 제이쿼리를 이용해서 뜨게 함 */
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
/* 흰색은 rgba(255,255,255, 0.7); */
background-color: rgba(0, 0, 0, 0.7);
}
.popup {
position: absolute;
/* 중앙정렬 : left, top위치는 calc(50% - 총높이)사용 */
left: calc(50% - 150px);
top: calc(50% - 250px);
width: 300px;
height: 500px;
background-color: #fff;
}
.modal_btn {
width: 100px;
height: 40px;
font-size: 30px;
line-height: 40px;
background-color: deeppink;
color: #fff;
text-align: center;
cursor: pointer;
}
.btn {
width: 100px;
height: 40px;
font-size: 30px;
line-height: 40px;
background-color: deeppink;
color: #fff;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 이미지속성? -->
<div class="cooking">
<img src="image/icon0.svg">
</div>
<!-- hover사용을 위한 버튼 -->
<div class="btn">메뉴1</div>
<div class="btn">메뉴2</div>
<div class="btn">메뉴3</div>
<div class="btn">메뉴4</div>
<div class="btn">메뉴5</div>
<!-- 모달 사용을 위한 버튼 -->
<!-- <div class="modal_btn">모달</div> -->
<!-- 모달 -->
<div class="popup_bg">
<div class="popup"></div>
</div>
</body>
</html>
안녕하세요!!