웹디자인 기능사 실기 슬라이드 fade / html css jQuery
웹디자인 기능사 실기를 준비하면서 개인적으로 가장 어려웠던 게 슬라이드 fade입니다.
그래도 "외운다", 라는 생각 말고 "이해한다"로 접근하면 못할 거는 없습니다!
html 소스
<body>
<div id="slide">
<ul>
<li class="active"><a href="#"><img src="http://placehold.it/1200x300/332255?text=slide1" alt="slide1"></a></li>
<li><a href="#"><img src="http://placehold.it/1200x300/442255?text=slide2" alt="slide2"></a></li>
<li><a href="#"><img src="http://placehold.it/1200x300/556655?text=slide3" alt="slide3"></a></li>
</ul>
</div>
</body>html은 간단하지 않나요?
<ul> , <li>를 이용해서 1200/ 300 사진 세장을 넣어주었고 첫 번째 li에 class="active"를 넣어주었습니다!
넣은 이유는 css에서 얘기하도록 하겠습니다.
css 소스
div#slide {
width: 1200px;
height: 300px;
margin: 0 auto;
}
div#slide ul {
width: 1200px;
height: 300px;
position: relative;
}
div#slide ul li {
width: 1200px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
div#slide ul li.active {
z-index: 1;
}
slide를 가운데 정렬해주었고, 슬라이드 기준이 되는 <ul>에 position: relative를 잡고 움직여야 할 사진인 <li>에 position: absolute를 주었습니다.
position: absolute를 주면 꼭 위치 값과 크기 값을 정해줘야 합니다!
여기서 중요한 것은 li.active인데요
아까 html에서 첫 번째 <li>에 class="active"를 줬던 거 기억하시나요?
fadein, out을 할 것이기 때문에 z-index와 opacity를 이용하려고 합니다
그래서 첫 번째 <li>에 active를 주어서 제일 위로 올려준 것입니다.
이해하셨으면 jQuery 소스를 보러 가볼까요?
jQuery 소스
$(document).ready(function(){
var now, next;
setInterval(function(){
now = $('div#slide ul li').eq(0);
next = $('div#slide ul li').eq(1);
next.addClass('active').css('opacity',0).animate({'opacity':1},1000,function(){
$('div#slide ul').append(now);
now.removeClass('active');
})
},3000);
})
jQuery 시작을 알리고
now, next라는 변수를 만들었다.
몇 초 동안(할 일
변수 now는 선택자'div#slide ul li'의 첫 번째 <li>이다.
변수 next는 선택자'div#slide ul li'의 두 번째 <li>이다.
next에. active라는 class를 더하고. css("투명도"를 0을 주겠다.). 움직임({'투명도'를 1로 움직이고},1초 동안, (할 일
선택자'div#slide ul'. 더할 거다('div#slide ul li'의 첫 번째);
now에. active라는 class를 뺄 것이다;
},3초 동안);
풀어서 쓰면 이렇게 됩니다.
jQuery는 대명사로 순서만 외우면 나머지는 기능 이름들과 선택자 이름을 넣으면 되기 때문에 전체적으로 외우기보다는 기능들을 외우고 이해해서 응용해야 합니다.
마지막으로 영상 첨부와 슬라이드 배너가 위로 이동하는 것을 기록한 링크로 마무리하겠습니다.
웹디자인 기능사 실기 자동 슬라이드 top / html css jQuery
웹디자인 기능사 실기 자동 슬라이드 top / html css jQuery
웹디자인 기능사 실기 자동 슬라이드 top / html css jQuery 다가오는 웹디자인 기능사 실기를 앞두고 개인적으로 학원을 다니는 사람들, 국비 지원을 받아서 학원을 다니는 사람들 혹은 혼자
dfen.tistory.com
'디노 code.html' 카테고리의 다른 글
| 반응형 웹 메뉴 만들기 @media css / html css (0) | 2021.08.09 |
|---|---|
| 웹디자인 기능사 실기 탭 메뉴 구현 / html css jQuery (0) | 2021.08.06 |
| 웹디자인 기능사 실기 자동 슬라이드 top / html css jQuery (0) | 2021.08.05 |
| 웹디자인 기능사 실기 전체메뉴 슬라이드 다운 / html css jQuery (0) | 2021.08.05 |
| 웹디자인 기능사 실기 개별 메뉴 slideDown html css js (0) | 2021.08.04 |
댓글