Variable 가변 이미지 (width, max-width)

by H_Develop 2022. 6. 26. 17:30

뷰 포트의 크기에 따라 이미지의 크기도 가변적이어야 한다.
px 대신 % 단위를 사용, 이미지 너비를 100% 설정 방법에는 ' width : 100% ' 와 ' max-width : 100% ' 가 있다.
width : 100% 설정하면 뷰 포트의 너비를 늘리거나 줄여도 크기에 상관없이 부모 요소 박스에 꽉 채워진다.
max-width : 100% 뷰 포트의 너비가 원본 이미지보다 클 경우에도 원본 이미지 이상으로 확대되지 않는다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

	* {box-sizing : border-box;}
	header {padding : 20px;
			border-bottom : solid 3px black;}
	img {max-width : 100%;}
	nav {width : 20%;
		float : left;
		padding : 15px;}
	nav li {padding-top : 10px;}
	section {width : 50%;
			float : left;
			padding : 20px;}
	@media only screen and (max-width : 768px){
		nav {width : 100%;}
		section {width : 100%;}
	}

</style>
 </head>
 <body>

	<header>
		<h2>포토 갤러리</h2>
	</header>
	<nav>
		<ul>
			<li>작품 사진 1</li>
			<li>작품 사진 2</li>
			<li>작품 사진 3</li>
			<li>작품 사진 4</li>
		</ul>
	</nav>
	<section>
		<h3>작품 사진 1</h3>
		<div>
			<img src="image2.jpg">
		</div>
	</section>

 </body>
</html>

'FrontEnd > HTML 반응형 웹' 카테고리의 다른 글

포토 스튜디오 (예제) (0)	2022.06.27
플렉서블 박스 (Flexable Box), (Container, Item) (0)	2022.06.26
media query (다른 기기에서는 다른 화면 전환) (0)	2022.06.26
12열_그리드_시스템, [class="col_"], [attribute=value] (0)	2022.06.26
반응형 웹 폰트 (em, rem) (0)	2022.06.26