하루에 글 하나씩은 올리기로 마음먹었으나 잠시 또 게으름을 피우고 말았다.
그럴때마다 작심삼일이 되지 않도록 다시한번 마음을 다잡는 수밖에 없겠지.
프론트단 웹개발을 위해서 피해갈 수 없는 요소중의 하나의 jQuery에 대해 책을 한권 사서 따라가보기로 했다. 첫번째 장의 내용은 HTML상의 객체를 지정하고 액션에 대해 css의 속성을 변경하는 작업이다.
- 실행결과 ==> CLICK
- 설명
– 텍스트박스를 마우스 클릭하면 강아지 사진이 나타난다.
– 링크가 걸린 텍스트 위에 마우스를 가져가면 강아지 사진이 나타난다. - 키워드
– $(document) : HTML DOM 객체의 Root를 가리킨다
– $(“#clickMe”) : DOM 내에서 Id=’clickMe’인 객체를 가리킨다
– .fadeIn(), .fadeOut() : ms 단위의 시간으로 나타나고 사라지게 하는 함수
– .slideToggle() : 접거나 펼치는 함수 - 결과
<HTML> jquery_ch01.html
<!DOCTYPE html>
<html>
<head>
<title>Furry Friends Campaign</title>
<link rel="stylesheet" type="text/css" href="styles/my_style.css">
</head>
<body>
<div id="clickMe">오늘의 털 많은 친구를 보여주세요</div>
<div id="picframe">
<img id="img_furry" src="images/furry_friend.jpg" alt="Our Furry Friend">
</div>
<hr />
<div id="showfriend">
<a href="#">
<h2>Our Furry Friends Need Your Help</h2>
</a>
<img src="images/furry_friend.jpg" alt="Our Furry Friend">
</div>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
var toggle_yn = false;
$(document).ready( function() {
$("#clickMe").click( function() {
if( !toggle_yn ) {
$("#img_furry").fadeIn(500);
$("#picframe").slideToggle("slow");
toggle_yn = true;
} else {
$("#img_furry").fadeOut(500);
$("#picframe").slideToggle("slow");
toggle_yn = false;
}
});
});
</script>
</body>
</html>
<CSS> my_style.css
#clickMe, #picframe{
background: #D8B36E;
padding: 20px;
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
color: #000;
border: 2px solid;
border-color: #444 #444 #444 #444;
text-align: center;
width: 280px;
display: block;
}
#picframe {
border-width: 0px 2px 2px 2px;
border-color: none #444 #444 #444;
display: none;
}
/*
a:link img, a:visited img {
display: none;
}
a:hover img, a:active img {
display: block;
}
*/
#showfriend img{
display: none;
}
#showfriend:hover img{
display: block;
}
a {
text-decoration: none;
color: #000;
}
