HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 더 알아보기</title>
<link rel="stylesheet" href="css/02_image.css">
</head>
<body>
<div id="container">
<h1>멋진 숲속의 아침을 감상하세요</h1>
<div id="fourth_div">
<div>
<img src="images/숲속의 아침.jpg" width="300px" height="200px" />
<div class="title">숲속의 아침5</div>
</div>
<div>
<img src="images/숲속의 아침.jpg" width="300px" height="200px" />
<div class="title">숲속의 아침6</div>
</div>
<div>
<img src="images/숲속의 아침.jpg" width="300px" height="200px" />
<div class="title">숲속의 아침7</div>
</div>
</div>
<div id="five_div">
<div >
<img src="images/숲속의 아침.jpg" width="300px" height="200px" />
<div class="title">숲속의 아침8</div>
</div>
<div>
<img src="images/숲속의 아침.jpg" width="300px" height="200px" />
<div class="title">숲속의 아침9</div>
</div>
<div>
<img src="images/숲속의 아침.jpg" width="300px" height="200px" />
<div class="title">숲속의 아침10</div>
</div>
</div>
</div>
</body>
</html>CSS
@charset "UTF-8";
div#container{
border: solid 0px red;
width:90%;
margin: 2% auto;
}
div#container > h1{
border: solid 0px blue;
text-align: center;
padding-bottom: 3%;
}
div#container div.title{
border: solid 0px red;
text-align: center;
font-size: 16pt;
margin-bottom: 30px;
}
div#container > div#fourth_div{
border: solid 0px red;
display: flex;
height: 250px;
}
div#container > div#fourth_div > div{
border: solid 0px green;
/* margin: auto; 이렇게 실행할 시 1번째 사진과 3번째 사진의 끝이 맨끝에 다다르지 않는다.*/
}
div#container > div#fourth_div > div:nth-child(2) {
border: solid 0px blue;
margin: 0 auto;
}
div#container > div#five_div{
border: solid 0px red;
display: flex;
height: 350px;
background-color: #eee;
margin-top: 10%;
}
div#container > div#five_div > div{
border: solid 0px green;
margin: 5% auto; /* 상우하좌 균등분할 */
/* div 전체가 아니라 이미지만 가운데 하고 싶을 경우 그냥 auto 가 아니라 상하를 지정해준다. */
}정리
- ch13_flex -> 02_image.html, 02_image.css
