안녕하세요 PNcoding입니다 :)
이번 포스팅에서는 B-3 타입인 세계의 미술작품 jQuery 구현을 해보도록 하겠습니다 :)
HTML , CSS 코드가 궁금하신 분은 여기를 참고하시면 되겠습니다.
https://pncoding.tistory.com/21
[웹디자인기능사 실기] B-3 세계의 미술작품 HTML, CSS
안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 B-3 타입인 세계의 미술작품 html, css 구현을 해보도록 하겠습니다. :) 항상 문제를 풀기 전, 받은 시험지 내용을 꼼꼼하게 읽고 (하지만 10분은 넘지
pncoding.tistory.com
이전 포스팅에서 만들어 둔 HTML, CSS 코드에 jQuery 연결을 먼저 진행해 주도록 하겠습니다.
jQuery도 동일하게 외부로 작성을 반드시 진행하여야 합니다.
또한 슬라이드의 경우 jQuery 혹은 JavaScript 로 구현이 안될 시 실격이므로 반드시 구현을 하실 수 있도록 반복연습이 꼭 필요합니다.
B-3 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/script.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(){
//슬라이드
var i = 0;
setInterval(function(){
i++;
if(i > 2) {
i = 0;
}
$('.img_box').animate({
top: -300 * i
});
}, 3000);
// 팝업
$('.pop_click').click(function(){
$('.pop_up').css({
display: 'block'
});
});
$('.close_btn').click(function(){
$('.pop_up').css({
display: 'none'
});
});
});//end
항상 움직임을 확인을 다 하고, 오류가 없을시 마지막으로 CSS의 section_1에 가서 overflow:hidden을 넣어주시는 게 좋습니다.
움직임을 확인하지 않고 미리 넣어버리면 어디가 오류가 났는지 확인하기가 어려울 수 있습니다.
.section_1 {
width: 1200px;
height: 300px;
background-color: lightblue;
margin: 0 auto;
position: relative;
overflow: hidden;
}
여기까지 해서 세계의 미술작품의 코딩을 마무리 하도록 하겠습니다.
코드를 참고하시어 좋은 결과가 있으시길 바라겠습니다 :)
'웹디자인기능사 실기' 카테고리의 다른 글
| [웹디자인기능사 실기] 2024 공개문제 분석 (F타입 포함) (15) | 2024.03.03 |
|---|---|
| [웹디자인기능사 실기] 2024 공개문제 다운로드 (14) | 2024.03.03 |
| [웹디자인기능사 실기] B-3 세계의 미술작품 HTML, CSS (1) | 2023.11.05 |
| [웹디자인기능사 실기] A-2 그린복지재단 jQuery (53) | 2023.11.04 |
| [웹디자인기능사 실기] A-2 그린복지재단 HTML, CSS (3) | 2023.11.04 |
