| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 |
- 안드로이드2.0
- 안드로이드2.0개발
- 안드로이드개발
- 안드로이드 개발 강좌
- 인기있는 블로그 만들기
- MapView
- 안드로이드 2.0 개발
- sky 시리우스폰
- 하루한마디영어
- 아이폰 배경화면
- 구글 안드로이드
- android
- SKY 시리우스
- 스카이 안드로이드폰 시리우스
- 안드로이드 개발 2.0
- 안드로이드 개발
- 안드로이드 개발 2.0 강좌
- 구글안드로이드
- objective-c
- 스카이 안드로이드폰 시리우스 K양 동영상
- 스마트폰 배경화면
- 안드로이드폰
- 영어
- 안드로이드
- 아이폰 바탕화면
- 안드로이드 배경화면
- Form Stuff
- 하루 한마디 영어
- 구글 안드로이드 개발
- 안드로이드 바탕화면
- Today
- Total
moozi
gallery 예제 본문
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/* 웹폰트 등록 */
@font-face{
font-family:SeoulNamsanFont;
src:url('SeoulNamsanEB.ttf');
}
h1{
font-family: SeoulNamsanFont;
text-shadow: 2px 2px 5px darkblue;
}
.pic_style{
width:300px;
height:250px;
border:1px solid #dddddd;
float:left;
margin: 10px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.img_style{
width:97%;
padding:5px;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}
.img_style:hover{
cursor: pointer; /* 커서 아이콘 바꾸기 */
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.text_align{
text-align: center;
}
.pic_style:hover{
border:1px solid darkgray;
}
/* The Modal (background) */
.modal {
display: none; /* 기본적으로 안보이게 함 */
position: fixed; /* Stay in place */
z-index: 1; /* 부모창보다 위에 오게 함 */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>갤러리</h1>
<div class="pic_style">
<img id="myImg" class="img_style" src="img/img_forest.jpg" alt="아름다운 숲">
<div class="text_align">
아름다운 숲
</div>
</div>
<!-- modal영역. 이미지를 클릭하면 나타남. ====================-->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<!-- modal영역 끝.=========================================-->
<div class="pic_style">
<a href="img/img_fjords.jpg" target="_blank">
<img class="img_style" src="img/img_fjords.jpg">
</a>
<div class="text_align">
아름다운 계곡
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block"; //modal창을 보이게함.
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt; //alt속성값을 캡션에 나타나게함.
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none"; //modal창을 안보이게함.
}
</script>
</body>
</html>
'TIS_2016 > 주말반_1기' 카테고리의 다른 글
| 4/2 introduce.html (0) | 2016.04.02 |
|---|---|
| movie작업예제 (0) | 2016.04.02 |
| 미디어쿼리 예제 (0) | 2016.03.26 |
| animation 파일 (0) | 2016.03.26 |
| 3/19 오전 수업 사용 소스 (0) | 2016.03.19 |