안녕하세요 PNcoding입니다 :)
이번 포스팅에서는 A-2 타입인 그린 복지재단 jQuery 구현을 해보도록 하겠습니다 :)
HTML , CSS 코드가 궁금하신 분은 여기를 참고하시면 되겠습니다.
https://pncoding.tistory.com/19
[웹디자인기능사 실기] A-2 그린복지재단 HTML, CSS
안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 A-2 타입인 그린 복지재단 html, css 구현을 해보도록 하겠습니다. :) 공개문제를 받지 못하신 분들은 여기에서 받아주시면 되겠습니다. https://pncoding.
pncoding.tistory.com
이전 포스팅에서 만들어 둔 HTML, CSS 코드에 jQuery 연결을 먼저 진행해 주도록 하겠습니다.
jQuery도 동일하게 외부로 작성을 반드시 진행하여야 합니다.
또한 슬라이드의 경우 jQuery 혹은 JavaScript 로 구현이 안될 시 실격이므로 반드시 구현을 하실 수 있도록 반복연습이 꼭 필요합니다.
A-2 jQuery 작성하기
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Green복지재단</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.12.3.js"></script>
<script src="js/jquery.js"></script>
</head>
먼저 외부로 스크립트 파일을 연결해 줍니다.
제이쿼리 라이브러리가 필요하신 분은 여기서 받으시면 됩니다.
Download jQuery | jQuery
link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download
jquery.com
혹시 낮은 버전이 필요하신 분은 따로 올려드리도록 하겠습니다.
연결을 다 하신 분은 제이쿼리 작성을 시작하도록 하겠습니다.
$(document).ready(function(){
// 슬라이드
var i = 0;
setInterval(function(){
i++;
if(i > 2) {
i = 0;
}
$('.img_box').animate({
left: -1200 * i
});
}, 3000);
//팝업
$('.pop_click').click(function(){
$('.pop_up').fadeIn();
});
$('.close_btn').click(function(){
$('.pop_up').fadeOut();
});
});//end
구현이 잘 되는 것을 확인하셨다면 슬라이드의 부모인 section_1에게 가서 하나의 속성을 추가해 주도록 합니다.
.section_1 {
width: 100%;
height: 300px;
background-color: tan;
margin-top: 100px;
position: relative;
overflow: hidden;
}
여기까지 해서 그린복지재단 코딩 마무리를 하도록 하겠습니다.
코드를 참고하시어 좋은 결과가 있으시길 바라겠습니다 :)
'웹디자인기능사 실기' 카테고리의 다른 글
| [웹디자인기능사 실기] B-3 세계의 미술작품 jQuery (51) | 2023.11.05 |
|---|---|
| [웹디자인기능사 실기] B-3 세계의 미술작품 HTML, CSS (1) | 2023.11.05 |
| [웹디자인기능사 실기] A-2 그린복지재단 HTML, CSS (3) | 2023.11.04 |
| [웹디자인기능사 실기] 공개문제 분석 (37) | 2023.11.02 |
| [웹디자인기능사 실기] 유의사항 및 실격요인 (47) | 2023.11.02 |
