WEB/CSS
[CSS] 반응형 웹+ 이미지 갤러리
애플쩀
2022. 5. 25. 12:15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{box-sizing: border-box;}
div.gallery{
border: 1px solid #ccc;
width: 180px;
margin:5px;
float:left;
}
div.gallery:hover{
border: 1px solid #777;
}
div.gallery img{
width: 100%;
height: auto;
}
div.gallery div.desc{
padding:15px;
text-align: center;
}
float 줬을때 영향안받고 떨어트리기 위해
.clearfix::after{
content:"";
clear:both;
display:table;
}
</style>
<style type="text/css">
@media only screen and (max-width:500px){
div.gallery{
width:100%;
}
}
@media only screen and (min-width:500px) and (max-width:700px){
div.gallery{
width:48%;
}
}
</style>
</head>
<body>
<h3>css 반응형 웹+이미지갤러리 </h3>
<!-- .gallery*4>a[target='_blank']>img^.desc>{Add a description} -->
<div class="gallery">
<a href="" target="_blank"><img src="../images/img_5terre.jpg" alt="" /></a>
<div class="desc">Add a description</div>
</div>
<div class="gallery">
<a href="" target="_blank"><img src="../images/img_5terre.jpg" alt="" /></a>
<div class="desc">Add a description</div>
</div>
<div class="gallery">
<a href="" target="_blank"><img src="../images/img_5terre.jpg" alt="" /></a>
<div class="desc">Add a description</div>
</div>
<div class="gallery">
<a href="" target="_blank"><img src="../images/img_5terre.jpg" alt="" /></a>
<div class="desc">Add a description</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure in blanditiis perferendis reprehenderit dolorum quam fugit saepe explicabo nihil soluta cum commodi voluptate ut debitis optio perspiciatis porro quae aliquam?</p>
</div>
</body>
</html>
