안녕하세요 PNcoding입니다 :)
이번 포스팅에서는 C-1 타입인 해운대 빛축제 jQuery 구현을 해보도록 하겠습니다 :)
HTML, CSS 코드가 궁금하신 분들은 여기를 참고해 주시면 되겠습니다.
https://pncoding.tistory.com/47
[웹디자인기능사 실기] C-1 해운대 빛축제 HTML, CSS
안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 C-1 타입인 해운대 빛축제 html, css 구현을 해보도록 하겠습니다 :) 항상 문제를 풀기 전, 받은 시험지 내용을 꼼꼼하게 읽고 (하지만 10분은 넘지 않
pncoding.tistory.com
이전 포스팅에서 만들어 둔 HTML, CSS 코드에 jQuery 연결을 먼저 진행해 주도록 하겠습니다.
jQuery도 동일하게 외부로 작성을 반드시 진행하여야 합니다.
또한 슬라이드의 경우 jQuery 혹은 JavaScript로 구현이 안될 시 실격이므로 반드시 구현을 하실 수 있도록 반복연습이 꼭 필요합니다.
C-1 jQuery 작성하기
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>해운대 빛축제</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.12.3.js"></script>
<script src="js/jquery.js"></script>
</head>
먼저 외부로 스크립트 파일을 연결해 줍니다.
항상 외부로 연결되는 파일명들은 영어로 해주셔야만 오류를 방지할 수 있습니다.
제이쿼리 파일이 따로 필요하신 분은 여기로 가셔서 받으시면 되겠습니다 :)
https://pncoding.tistory.com/20
[웹디자인기능사 실기] A-2 그린복지재단 jQuery
안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 A-2 타입인 그린 복지재단 jQuery 구현을 해보도록 하겠습니다 :) HTML , CSS 코드가 궁금하신 분은 여기를 참고하시면 되겠습니다. https://pncoding.tistory.c
pncoding.tistory.com
제이쿼리 작성을 시작하도록 하겠습니다.
$(document).ready(function(){
//slide
var i = 0;
setInterval(function(){
i++;
if(i > 2) {
i= 0;
}
$('.section_1>a').fadeOut();
$('.section_1>a').eq(i).fadeIn();
}, 3000);
//popup
$('.pop_click').click(function(){
$('.pop_up').fadeIn();
});
$('.close_btn').click(function(){
$('.pop_up').fadeOut();
});
});//end
여기까지 해서 해운대 빛축제의 코딩을 마무리 하도록 하겠습니다.
코드를 참고하시어 좋은 결과가 있으시길 바라겠습니다 :)
'웹디자인기능사 실기' 카테고리의 다른 글
| [웹디자인기능사 실기] C-1 해운대 빛축제 HTML, CSS (2) | 2024.03.03 |
|---|---|
| [웹디자인기능사 실기] 2024 공개문제 분석 (F타입 포함) (15) | 2024.03.03 |
| [웹디자인기능사 실기] 2024 공개문제 다운로드 (14) | 2024.03.03 |
| [웹디자인기능사 실기] B-3 세계의 미술작품 jQuery (51) | 2023.11.05 |
| [웹디자인기능사 실기] B-3 세계의 미술작품 HTML, CSS (1) | 2023.11.05 |
