657
No
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 0.0 1.0
완전 투명 완전 불투명
-->
<style type="text/css">
body{
font-family: "맑은 고딕", "고딕", "맑은";
}
.table1{
border: 1px solid black;
border-collapse: collapse;
}
.table1 td{
border: 1px solid black;
padding: 10px;
text-align: center;
/* vertical-align: top; */
}
img {
width:250px;
height:150px;
margin-top: 5px;
opacity :1.0;
}/* 반투명 */
img:hover { opacity:0.5;} /* 완전 불투명 */
.images img{
margin:10px;
padding:5px;
border:1px solid black;
}
.images {
display: inline;
}
.images .invisible{
visibility: hidden;
}
#div5 img{
width: 200px;
height:150px;
border:1px solid black;
transition:width 5s, height 5s, transform 5s;
/* overflow: scroll; */
}
#div5 img:hover {
width:200px;
height:500px;
/* transform:rotate(180deg); 회전효과 (180도 회전) */
transform:scale(1.5, 1.5)
}
#div6{
width:100px;
height: 100px;
position: relative;
animation: 2s myanim; /* 2초 동안 키프레임 애니메이션 */
animation-iteration-count: 5; /* 반복횟수 */
background: #333333;
}
@keyframes myanim {
0% { left:0px; top:0px}
25% { left:100px; top:50px;}
50% { left:200px; top:100px;}
75% { left:100px; top:50px;}
100% { left:0px; top:0px;}
}
</style>
<script type="text/javascript">
function imagesShow(opt){
//img2=document.getElementsByClassName("images");
img2=document.getElementById("img2");
img2.style.visibility = opt;
//getElementsByClassName
}
</script>
</head>
<body>
<table class="table1">
<caption>프로축구 경기 일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
</tr>
</table>
<img src="https://www.dreamhost.com/blog/wp-content/uploads/2015/10/DHC_blog-image-01-300x300.jpg"> <br/>
<div class="images">
<img src="https://www.dreamhost.com/blog/wp-content/uploads/2015/10/DHC_blog-image-01-300x300.jpg">
</div>
<div class="images">
<img src="https://www.dreamhost.com/blog/wp-content/uploads/2015/10/DHC_blog-image-01-300x300.jpg" class="invisible" id="img2">
</div>
<div class="images">
<img src="https://www.dreamhost.com/blog/wp-content/uploads/2015/10/DHC_blog-image-01-300x300.jpg">
</div>
<br/>
<button id="button1" onclick="imagesShow('visible')">표시</button>
<button id="button1" onclick="imagesShow('hidden')">숨김</button>
<br>
<div id="div5">
<img src="https://www.dreamhost.com/blog/wp-content/uploads/2015/10/DHC_blog-image-01-300x300.jpg">
</div>
<div id="div6">
</div>
</body>
</html>
댓글 ( 4)
댓글 남기기