">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04-03_visibility_opacity</title>
<!--
# visibility 속성
- 요소를 보이게 할 것인지, 보이지 않게 할 것인지 결정.
- visible : 해당 요소를 보이게 함.
hidden : 해당 요소를 보이지 않게 함.
collapse : table 요소에 사용하면 행이나 열을 보이지 않게 함.
# opacity 속성
- 투명도를 지정.
> 0 ~ 1 ( 0.0 : 투명, 1.0 : 불투명 )
-->
<style type="text/css">
.visible { visibility: visible;}
.hidden { visibility: hidden;}
.none { visibility: none;}
table, tr, td {
border: 1px solid black;
width: 200px;
height: 100px;
text-align: center;
}
.collapse {
visibility: collapse;
}
div, img {
border: 1px solid gray;
width: 100px;
height: 200px;
color: white;
background-color: skyblue;
opacity: 0.3;
}
div:hover, img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h1>visibility</h1>
<h2 class="visible"> visible </h2>
<hr>
<h2 class="hidden"> hidden </h2>
<hr>
<h2 class="none"> none </h2>
<hr>
<br>
<table>
<tr>
<td> A </td><td> B </td>
</tr>
</table>
<table class="collapse">
<tr>
<td> A </td><td> B </td>
</tr>
</table>
<hr>
<br>
<h1>opacity</h1>
<div>
<span> opacity </span>
</div>
<br>
<img src="../../image/img/라이언_후드.png">
</body>
</html>