프로토타입이 상한가를 칠때 책을 통해 학습을 하고선 지금까지 프로토타입만 고집을 했습니다.
더 이상 미루면 안되겠다는 생각에 "어떤 놈이야?"라는 생각으로 접해보기로 했습니다.
어제부터 검색을 하면서 이런 저런 기능을 사용해봤는데 ㅡㅡ;; 이건 뭐냐는...
프로토타입보다 사용하기가 아주 편한 것 같습니다.
jQuery에서는 단 면줄로 원하는 효과를 만들어 낼수가 있었습니다.
졸린 시간을 이용해서 10여분 동안 만들어봤는데 마법같은 매력에 빠져들게되었습니다. @..@
일단 구글 트랜드에서 검색을 해본 결과 jQuery가 확실히 대세입니다.
또한 관심을 가지고 있는 모바일 환경에서도 jQuery가 자주 언급이 되고 있구요.
특히나 우니라나처럼 쏠림현상이 심한 곳은... jQuery 꼭 해야죠.
필요할때 검색해서 찾아가며 만들어도 될 것 같지만 큰 맘 먹고 책 한권 구입했습니다.
(개발서 사지 않겠노라는 다짐은 언제나 이렇게 쉽게 무너집니다. ㅠ.ㅠ)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>JQuery</title>
<link href="/js_css/fisheyMain.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#login_btn").click(function(){
if($("#join_box").is(":visible")){
$("#join_box").slideToggle("slow");
}
$("#login_box").slideToggle("slow");
});
$("#join_btn").click(function(){
if($("#login_box").is(":visible")){
$("#login_box").slideToggle("slow");
}
$("#join_box").slideToggle("slow");
});
});
//]]>
</script>
<style type="text/css">
#top_menu {
width:100%;
height:22px;
line-height:22px;
border-bottom:1px solid #B6BAC0;
background-color:#E1E1E1; /*#E1E1E1;*/
color:#fff;
margin-bottom:7px;
float:left;
}
#topUL{
margin:0 auto;
width:990px;
min-width:990px;
}
.to_home {
float: left;
}
.top_menu_li {
float: right;
cursor:pointer;
}
#wrap{
margin:0 auto;
width:1000px;
min-width:1000px;
}
#left_menu {
width: 200px;
background-color: #ccc;
float: left;
}
#content {
width: 580px;
margin-right:10px;
margin-left:10px;
float: left;
background-color:highlight;
}
#right_menu {
width: 200px;
background-color: #ccc;
float: left;
}
#login_box {
display: none;
height: 300px;
background-color: fuchsia;
}
#join_box {
display: none;
height: 300px;
background-color:lime;
}
</style>
</head>
<body>
<div id="top_menu">
<ul id="topUL">
<li class="to_home"><a href="/">HOME</a></li>
<li class="top_menu_li" id="login_btn">로그인</li>
<li class="top_menu_li"> | </li>
<li class="top_menu_li" id="join_btn">회원가입</li>
</ul>
</div>
<div id="wrap">
<div id="left_menu">left_menu</div>
<div id="content">
<div id="login_box">login_box</div>
<div id="join_box">join_box</div>
<div id="main_content">
main_content<br/>
main_content<br/>
main_content<br/>
main_content<br/>
main_content<br/>
main_content<br/>
main_content
</div>
</div>
<div id="right_menu">right_menu</div>
</div>
</body>
</html>