<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.outside {
border: 1px solid #777;
margin: 0 auto;
padding: 5px;
width: 800px;
overflow: hidden;
}
.outside .left {
box-sizing: border-box;
width: 25.0000%;
float: left;
padding:5px;
}
.outside .left .inner {
box-sizing: border-box;
border: 1px solid #777;
}
</style>
</head>
<body>
<h3>과제3</h3>
<div class="outside"><!-- 바깥 -->
<div class="left"><!-- 숨김 float:left -->
<div class="inner"><!-- 안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
모든 패딩 5px;
</div>
</div>
</div>
<div class="left"><!-- 숨김 float:left -->
<div class="inner"><!-- 안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
모든 패딩 5px;
</div>
</div>
</div>
<div class="left"><!-- 숨김 float:left -->
<div class="inner"><!-- 안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
모든 패딩 5px;
</div>
</div>
</div>
<div class="left"><!-- 숨김 float:left -->
<div class="inner"><!-- 안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
모든 패딩 5px;
</div>
</div>
</div>
<div class="left"><!-- 숨김 float:left -->
<div class="inner"><!-- 안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
모든 패딩 5px;
</div>
</div>
</div>
<div class="left"><!-- 숨김 float:left -->
<div class="inner"><!-- 안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
모든 패딩 5px;
</div>
</div>
</div>
<div class="left"><!-- 숨김 float:left -->
<div class="inner"><!-- 안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
모든 패딩 5px;
</div>
</div>
</div>
<div class="left"><!-- 숨김 float:left -->
<div class="inner"><!-- 안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
모든 패딩 5px;
</div>
</div>
</div>
</div>
</body>
</html>
left클래스가 들어간 걸 8번 복사했는데, width의 %를 25%로 나누었기 때문에 알아서 아래로 내려간다.
여기서 사용한 박스는 3개. 2개는 보이고, 하나는 숨겨져 있다. 이를 통해 동일한 간격을 부여
'HTML·CSS' 카테고리의 다른 글
| 221222 HTML CSS float 실습 (0) | 2022.12.22 |
|---|---|
| 221222 HTML CSS Position (0) | 2022.12.22 |
| 221221 HTML CSS 플롯 실습 (0) | 2022.12.21 |
| 221221 HTML CSS 플롯 넣기 (1) | 2022.12.21 |
| 221221 HTML CSS float (0) | 2022.12.21 |
