티스토리 뷰
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>과제3 CSS</title>
<style>
body{margin: 0;}
ul{ font-family:Comic Sans Ms;
list-style-type: none;
margin: 50px;
padding: 0;
overflow: hidden;
background-color: black;
}
li{ display: inline-block; }
li a, .dropbtn{
display:inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover, dropbtn{
background-color: gray;
}
.dropdown-content{
display:none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content{
display:block;
}
li a.active, li a.active:hover{
background-color: #4caf50;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.shadow1{font-size:2.0em;
font-weight:bold;
color:white;
padding :50px;
text-shadow: 1px 1px 2px black, 0 0 20px purple, 0 0 5px maroon;}
div.gallery{
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover{
border: 1px solid #777;
opacity: 0.3; /* 투명도 조절 */
}
div.gallery img{
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="shadow1" align="center" >Responsive Image Gallery</div>
<ul>
<li><a href="#home">회사소개</a></li>
<li><a href="#mail">갤러리</a></li>
<li><a href="#cafe">뉴스</a></li>
<li><a href="#blog">찾아오시는 길</a></li>
<li><a href="#blog">로그인</a></li>
</ul>
<div class="gallery">
<a target="_blank" href="image/01.jpg">
<img src="image/01.jpg" alt="evening glow" width="300" height="200">
</a>
<div class="desc">Evening Glow</div>
</div>
<div class="gallery">
<a target="_blank" href="image/02.jpg">
<img src="image/02.jpg" alt="lakeside" width="600" height="400">
</a>
<div class="desc">Lake Side</div>
</div>
<div class="gallery">
<a target="_blank" href="image/03.jpg">
<img src="image/03.jpg" alt="sea" width="600" height="400">
</a>
<div class="desc">Southern Sea</div>
</div>
<div class="gallery">
<a target="_blank" href="image/04.jpg">
<img src="image/04.jpg" alt="coast road" width="600" height="400">
</a>
<div class="desc">Coast Road</div>
</div>
</body>
</html>
댓글