6-5. 반응형 이미지
반응형 웹에서는 뷰포트의 크기에 따라 이미지의 크기도 가변적이어야 합니다. 이미지를 가변적으로 만들기 위해서는
고정 크기의 px 단위 대신에 % 단위를 사용합니다. 이미지의 크기를 100%로 설정하면 이미지가 부모 요소의 전체를 꽉 채우게 됩니다.
이미지를 width:100으로 설정
ex6-7.html
<style>
div {
border: solid 1px red;
}
img {
width: 100%;
}
</style>
<body>
<div>
<img src="./img/image1.jpg">
</div>
</body>
ex6-7.html의 실행 결과
위와 같은 단점을 보완하기 위해 반응형 웹에서는 width 대신 다음에 설명하는 max-width를 주로 사용합니다.
이미지를 max-width:100으로 설정
ex6-8.html
<style>
div {
border: solid 1px red;
}
img {
max-width: 100%;
}
</style>
<body>
<div>
<img src="./img/image1.jpg">
</div>
</body>
ex6-8.html의 실행 결과
다음은 반응형 이미지가 사용된 예입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<style>
* {
box-sizing: border-box;
}
header {
padding: 20px;
border-bottom: solid 1px black;
}
img {
max-width: 100%;
}
nav {
width: 20%;
float: left;
padding: 15px;
}
nav li {
padding-top: 10px;
}
section {
width: 80%;
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="./img/image2.jpg">
</div>
</section>
</body>
</html>
ex6-9.html의 실행 결과
