<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> contents_img</title>
<style>
/*-------- default setting --------*/
* {margin: 0; padding: 0;}
a {color: black; text-decoration: none;}
li {list-style: none;}
img {display: block;}
/* 이미지 아래 의미없는 여백이 생길 때 display: block 넣어줌.
(이미지 속성이 인라인이므로 생기는 여백)
이미지는 인라인 속성 가지기 때문에 블럭처리 하는 것이 좋음. */
/*-------- Header --------*/
.header {
width: 1000px; height: 200px;
background-color: #ccc;
text-align: center;
line-height: 200px;
margin: 0 auto;
}
/*-------- wrap --------*/
.wrap {
width: 1000px;
margin: 50px auto;
}
.visual_main {
width: 1000px; height: 500px;
background-color: yellow;
margin-bottom: 50px;
}
/* 프레임워크에서는 빈칸있으면 오류처리 됨.
background-color 있을 때는 width, height 생략할 수 없음 */
.wrap .visual_img {
width: 800px;
margin: 0 auto;
}
.banner {
overflow: hidden;
margin-bottom: 50px;
/* height: auto;라서 height를 잡을 수 없기 때문에 overflow: hidden 넣어줘야함. */
}
.banner div {
width: 490px;
/* 아래 height를 auto로 잡기 때문에 여기서 height를 계산 할 필요없음. 생략가능. */
float: left;
}
.banner div:first-child { margin-right: 20px;}
.banner div img {
display: block;
/* 1. 의미없는 여백이 생겼다. 여백 없애고 싶을 때.
2. width, height를 잡을거다. 인라인은 width, height 잡을 수 없기 때문에 */
width: 100%; height: auto; /* height: auto는 생략가능 */
}
.product {
overflow: hidden;
}
.product div {
width: 235px; height: 235px;
float: left;
margin-right: 20px;
}
.product div:last-child {margin: 0;}
.product div img {
/* display: block; */
width: 100%;
/* 박스로 만들었기 때문에 width 생략하면 안됨. */
/* height: auto; 생략 */
}
/*-------- footer --------*/
.footer {
width: 1000px; height: 200px;
background-color: #ccc;
text-align: center;
line-height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<header class="header">
<h1>header</h1>
</header>
<div class="wrap">
<section class="visual_main">
<div class="visual_img">
<img src="./images/sheet_img02.jpg" alt="">
</div>
</section><!--visual_main-->
<section class="banner">
<div class="banner01">
<img src="./images/sheet_img04.jpg" alt="배너이미지01">
</div>
<div class="banner02">
<img src="./images/sheet_img05.jpg" alt="배너이미지02">
</div>
</section><!--banner-->
<section class="product">
<!-- 박싱하고 이미지 넣기 -->
<div class="product01">
<img src="./images/img01_200.jpg" alt="상품이미지01">
</div>
<div class="product02">
<img src="./images/img02_200.jpg" alt="상품이미지02">
</div>
<div class="product03">
<img src="./images/img03_200.jpg" alt="상품이미지03">
</div>
<div class="product04">
<img src="./images/img04_200.jpg" alt="상품이미지04">
</div>
</section><!--product-->
</div><!--wrap-->
<footer class="footer">
<h1>footer</h1>
</footer>
</body>
</html>