단원 김홍도 선생의 금강산 산수화 갤러리를 구성
1. HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>갤러리</title>
<script src="js/gallery.js" charset="UTF-8"></script>
</head>
<body>
<div id="wrap">
<!-- 갤러리 시작 -->
<div id="gallery"></div>
<!-- 갤러리 끝 -->
</div>
</body>
</html>
2. Javascript (외장 파일)
/**
*
*/
window.onload = function() {
// 카운터 변수 : 파일 구성시 접미사로 사용 ex) kimhongdo_1.png
var count = 1;
// document.all['counter_fld'].value = count;
// body 마진/패딩 초기화
document.querySelector("body").style.margin = 0;
document.querySelector("body").style.padding = 0;
/*
* 문-1) 처음 출력할 그림을 아래의 조건에 맞게 출력합니다.
* 파일명 : kimhongdo_1.png
* Hint) 우선 이미지 태그를 변수로 정의하고, gallery 레이어 내에
* 정의된 이미지 태그 내용을 삽입합니다.
*/
// 처음 그림 출력
// TODO
/*
* 문-2) 이미지를 갤러리(gallery) 내부에 중앙정렬합니다.
* Hint) div에서의 중앙정렬 기법을 이용하되, 높이에 대한 성분은 "%"가 정확히 적용되지 않기 때문에
* viewport(가용공간)을 구하는 속성을 사용합니다. 단위는 반드시 붙이도록 합니다.
*/
// 갤러리 중앙 정렬
// TODO
/*
* 문-3) 그림을 누르면 다음 그림으로 넘어가는 부분을 작성합니다.
* 초기에는 투명도가 0으로 설정된 상태에서 setTimeout 함수를 활용하여
* 0.8초 후에 이미지가 출력되도록 하되,
* 변환 효과(transition)로 이미지의 투명도가 다시 1로 서서히 변환되어 출력되며,
* 지속시간(duration)은 0.7초, 지연시간은 0.1초로 하여 변환 효과를 처리하도록 합니다.
*/
// 그림을 누르면 다음 그림 출력
img_gal.onclick = function() {
// 그림 갯수 한계치를 넘어가면 다시 카운터 초기화
// TODO
var img_pad = document.getElementById("img_pad");
var img_file = './image/kimhongdo_'+count+'.png';
// 변환 효과 : 투명도
img_gal.style.opacity = 0;
setTimeout(function() {
// TODO
// 변환 효과
// 참고) https://cssreference.io/property/transition/
}, 800);
} // onclick
} // onload
답 js
/**
*
*/
window.onload = function() {
// 카운터 변수 : 파일 구성시 접미사로 사용 ex) kimhongdo_1.png
var count = 1;
// document.all['counter_fld'].value = count;
// body 마진/패딩 초기화
document.querySelector("body").style.margin = 0;
document.querySelector("body").style.padding = 0;
/*
* 문-1) 처음 출력할 그림을 아래의 조건에 맞게 출력합니다.
* 파일명 : kimhongdo_1.png
* Hint) 우선 이미지 태그를 변수로 정의하고, gallery 레이어 내에
* 정의된 이미지 태그 내용을 삽입합니다.
*/
// 처음 그림 출력
// TODO
var img_gal = document.getElementById("gallery");
var start_img = "<img id='img_pad' src='./image/kimhongdo_"+ count +".png'>";
img_gal.innerHTML = start_img;
/*
* 문-2) 이미지를 갤러리(gallery) 내부에 중앙정렬합니다.
* Hint) div에서의 중앙정렬 기법을 이용하되, 높이에 대한 성분은 "%"가 정확히 적용되지 않기 때문에
* viewport(가용공간)을 구하는 속성을 사용합니다. 단위는 반드시 붙이도록 합니다.
*/
// 갤러리 중앙 정렬
// TODO
var wrap = document.getElementById("wrap");
wrap.style.width = "100%";
wrap.style.heigth = "100%";
wrap.style.display = 'flex';
wrap.style.alignItems = "center";
wrap.style.justifyContent = "center";
/*
* 문-3) 그림을 누르면 다음 그림으로 넘어가는 부분을 작성합니다.
* 초기에는 투명도가 0으로 설정된 상태에서 setTimeout 함수를 활용하여
* 0.8초 후에 이미지가 출력되도록 하되,
* 변환 효과(transition)로 이미지의 투명도가 다시 1로 서서히 변환되어 출력되며,
* 지속시간(duration)은 0.7초, 지연시간은 0.1초로 하여 변환 효과를 처리하도록 합니다.
*/
// 그림을 누르면 다음 그림 출력
img_gal.onclick = function() {
// 그림 갯수 한계치를 넘어가면 다시 카운터 초기화
// TODO
if (count <= 10) {
count++; // 한개씩 계속 숫자를 늘려줌
} else {
// 10개가 넘어가면 다시 1로 돌려줌
count = 1;
}
var img_pad = document.getElementById("img_pad");
var img_file = './image/kimhongdo_'+count+'.png';
// 변환 효과 : 투명도
img_gal.style.opacity = 0;
setTimeout(function() {
// TODO
// 변환 효과
// 참고) https://cssreference.io/property/transition/
img_gal.style.transition = 'opacity 700ms linear 100ms'
img_gal.style.opacity = 1;
img_pad.src = img_file;
}, 800);
} // onclick
} // onload'JavaScript' 카테고리의 다른 글
| Javascript Events (0) | 2022.07.11 |
|---|---|
| (Javascript) : 슬라이드 패널 작성하기 (0) | 2022.07.11 |
| (Javascript) : 새 창(window) 열기/닫기 (0) | 2022.07.11 |
| JavaScript Ex01 (0) | 2022.07.06 |
| JavaScript 함수와 이벤트 (0) | 2022.07.05 |