다연이네

[days04] 반응형 이미지 갤러리 - 수정필요 본문

Web/CSS

[days04] 반응형 이미지 갤러리 - 수정필요

　다연　 2020. 12. 8. 13:03
반응형

이미지를 누르면 해당 이미지 URL로 연결된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
	*{
		box-sizing: border-box;
	}
	div.gallery{
		border: 1px solid #ccc;
		
		margin: 5px;
		float: left;
		width: 180px;
	}
	
	div.gallery img{
		width: 100%; /*밖에있는 애를 180px로 맞춰놨기 때문에 이에 따름 */
		height: auto;
	}
	
	div.gallery div.desc{
		padding: 15px;
		text-align: center;
	}
	
	div.gallery:hover{
		border: 1px solid #777;
	}

	.clearfix:after{
		/* 끊을때 사용, 공식처럼암기 */
		content: "";
		clear: both;
		display: table;
	}
</style>

</head>
<body>

<h3>Responsive Image Gallery (반응형 이미지 갤러리)</h3>

<div class="gallery">
	<a target="_blank" href="../images/img_5terre.jpg"><img src="../images/img_5terre.jpg" alt="" width="600" height="400" /></a>
	<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
	<a target="_blank" href="../images/img_forest.jpg"><img src="../images/img_forest.jpg" alt="" width="600" height="400" /></a>
	<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
	<a target="_blank" href="../images/img_lights.jpg"><img src="../images/img_lights.jpg" alt="" width="600" height="400" /></a>
	<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
	<a target="_blank" href="../images/img_mountains.jpg"><img src="../images/img_mountains.jpg" alt="" width="600" height="400" /></a>
	<div class="desc">Add a description of the image here</div>
</div>

<div class="clearfix"></div> <!-- clearfix의 용도 ? -->

<div style="padding: 6px">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	 Praesentium voluptatibus neque laudantium sed nihil 
	 voluptates est adipisci beatae consequuntur dicta 
	 voluptatum enim labore nam eum dolore velit laborum 
	 accusantium quaerat!</p>
</div>

</body>
</html>

 

위의 코드를 반응형 웹으로 수정해보자 

 max-width 500px;  500픽셀까지는 이미지가 하나씩 보이도록,
 max-width 700px;  700픽셀까지는 이미지가 2개씩 2줄 ,

7백 이상이라면 한줄에 4개 다 보이도록

 

 

 

반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days04] 속성 선택자(selector) 사용하기 태그[속성명(기호)속성값]  (0) 2020.12.08
[days04] 이미지 스프라이트  (0) 2020.12.08
[days03] 타임라인 - 분석해보기  (0) 2020.12.07
[days03] dropdown  (0) 2020.12.07
[days03] 메뉴바 여닫기  (0) 2020.12.07
'Web/CSS' Related Articles more
Comments