<div id="readability-page-1" class="page"><div><h2 id="웹디자인기능사">웹디자인기능사</h2>
웹디자인기능사 실기를 준비하는 과정에서 jQuery가 필요한 부분들에 대해 정리합니다. 
작성된 함수는 <a href="http://www.yes24.com/Product/Goods/73268276">웹디자인기능사 실기 7일완성(김승일)</a> 도서에서 도움받았습니다.

메뉴 유형에 따라서 선택자는 .navi_box 혹은 .navi_box &gt; ul &gt; li가 된다.
<pre><code>$(".navi_box").mouseover(function(){
 $(this).children(".menu_box").stop().slideDown();
});

$(".navi_box").mouseleave(function(){
 $(this).children(".menu_box").stop().slideUp();
});</code></pre>
<h3 id="--image-slide">- Image Slide</h3>
<h4 id="좌우상하-슬라이드">좌우/상하 슬라이드</h4>
적용하는 css의 margin만 다르다.(margin-left:-1000px / margin-top:-400px)
<pre><code>start();
var imgs = 2;
var now = 0;

function start(){
 $(".imgs&gt;img").eq(0).siblings().css({"margin-left:":"-1000px"});
 setInterval(function(){slide();},3000);
}
 
function slide(){
 now=now==imgs?0:now+=1;
 $(".imgs&gt;img").eq(now-1).css({"margin-left":"-1000px"});
 $(".imgs&gt;img").eq(now).css({"margin-left":"0px"});
}</code></pre>
<h4 id="fade-in--fade-out">Fade in / Fade out</h4>
<pre><code>start();
var imgs = 2;
var now = 0;

function start(){
 $(".imgs&gt;img").eq(0).siblings().fadeOut('slow');
 setInterval(function(){slide();},3000);
}
 
function slide(){
 now=now==imgs?0:now+=1;
 $(".imgs&gt;img").eq(now-1).fadeOut('slow');
 $(".imgs&gt;img").eq(now).fadeIn('slow');
}</code></pre>

.tab_menu&gt;li형식에 탭메뉴와 해당 메뉴의 내용을 작성한다. 형식은 다음과 같다.
<pre><code>&lt;ul class="tab_menu"&gt;
	&lt;li&gt;&lt;a href="#"&gt;공지사항&lt;/a&gt;
 	&lt;div class="contents"&gt;공지사항 내용&lt;/div&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;갤러리&lt;/a&gt;
 	&lt;div class="contents"&gt;갤러리 내용&lt;/div&gt;
 &lt;/li&gt;
&lt;/ul&gt;</code></pre>
스크립트는 다음과 같다.
<pre><code>$(".tab_menu&gt;li&gt;a").click(function(){
 $(this).parent().addClass("on").siblings().removeClass("on");
 return false;
});</code></pre>

레이어 팝업/모달 레이어 팝업으로 나뉘는데 모달 레이어 팝업에 어두운 배경만 추가될 뿐 스크립트는 동일하다.
<pre><code>$(".partner img").click(function(){
 $("#popup").addClass("active");
});
$("#popup button").click(function(){
 $("#popup").removeClass("active"); 
});</code></pre></div></div>

eunjeong.log

웹디자인기능사
웹디자인기능사 실기를 준비하는 과정에서 jQuery가 필요한 부분들에 대해 정리합니다.
작성된 함수는 웹디자인기능사 실기 7일완성(김승일) 도서에서 도움받았습니다.
- Menu Navigation
메뉴 유형에 따라서 선택자는 .navi_box 혹은 .navi_box > ul > li가 된다.
$(".navi_box").mouseover(function(){
 $(this).children(".menu_box").stop().slideDown();
});
$(".navi_box").mouseleave(function(){
 $(this).children(".menu_box").stop().slideUp();
});
- Image Slide
좌우/상하 슬라이드
적용하는 css의 margin만 다르다.(margin-left:-1000px / margin-top:-400px)
start();
var imgs = 2;
var now = 0;
function start(){
 $(".imgs>img").eq(0).siblings().css({"margin-left:":"-1000px"});
 setInterval(function(){slide();},3000);
}
function slide(){
 now=now==imgs?0:now+=1;
 $(".imgs>img").eq(now-1).css({"margin-left":"-1000px"});
 $(".imgs>img").eq(now).css({"margin-left":"0px"});
}
Fade in / Fade out
start();
var imgs = 2;
var now = 0;
function start(){
 $(".imgs>img").eq(0).siblings().fadeOut('slow');
 setInterval(function(){slide();},3000);
}
function slide(){
 now=now==imgs?0:now+=1;
 $(".imgs>img").eq(now-1).fadeOut('slow');
 $(".imgs>img").eq(now).fadeIn('slow');
}
- Tab Menu
.tab_menu>li형식에 탭메뉴와 해당 메뉴의 내용을 작성한다. 형식은 다음과 같다.
<ul class="tab_menu">
 <li><a href="#">공지사항</a>
 <div class="contents">공지사항 내용</div>
 </li>
 <li><a href="#">갤러리</a>
 <div class="contents">갤러리 내용</div>
 </li>
</ul>
스크립트는 다음과 같다.
$(".tab_menu>li>a").click(function(){
 $(this).parent().addClass("on").siblings().removeClass("on");
 return false;
});
- Popup
레이어 팝업/모달 레이어 팝업으로 나뉘는데 모달 레이어 팝업에 어두운 배경만 추가될 뿐 스크립트는 동일하다.
$(".partner img").click(function(){
 $("#popup").addClass("active");
});
$("#popup button").click(function(){
 $("#popup").removeClass("active"); 
});

웹디자인기능사 실기 함수

댓글