오늘은 간략하게 css 와 html 그리고 결과물만 올렸습니다~ !!
< html >
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./public/index.css" />
<link rel="stylesheet" href="./public/interior.css" />
</head>
<body>
<div id="root">
<div id="interior">
<div class="container">
<div class="title-box">
<h1>반응형 웹페이지</h1>
<h2>반응형 웹페이지를 만들어 봅시다.</h2>
</div>
<div class="pictures">
<div class="row1">
<div class="row2">
<div class="square">
<div>
<div class="img"></div>
</div>
</div>
<div class="square">
<div><div class="img"></div></div>
</div>
</div>
<div class="row2">
<div class="square">
<div><div class="img"></div></div>
</div>
<div class="square">
<div><div class="img"></div></div>
</div>
</div>
</div>
<div class="row1">
<div class="row2">
<div class="square">
<div><div class="img"></div></div>
</div>
<div class="square">
<div><div class="img"></div></div>
</div>
</div>
<div class="row2">
<div class="square">
<div><div class="img"></div></div>
</div>
<div class="square">
<div><div class="img"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
< css >
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background-color: bisque;
}
.container {
height: 100px;
max-width: 1300px;
padding: 0 3rem;
margin: auto;
}
.title-box {
/* border: 1px solid black; */
text-align: center;
}
.title-box h1 {
font-size: 1.2rem;
/* color: blueviolet; */
}
.title-box h2 {
font-size: 2.6rem;
word-break: keep-all;
}
.square::after {
content: "";
/* background-color: aqua; */
display: block;
padding-bottom: 100%;
}
@media only screen and (max-width: 430px) {
.title-box h1 {
font-size: 1.1rem;
}
.title-box h2 {
font-size: 1.5rem;
}
.container {
padding: 0 1rem;
}
#interior .pictures {
/* display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-top: 3rem; */
}
/*
#interior .pictures div {
border: 1px solid black;
flex: 1;
height: 17rem;
border-radius: 2rem;
min-width: 15rem;
} */
#interior .pictures .row1 {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
#interior .pictures .row2 {
display: flex;
flex: 1;
gap: 1rem;
min-width: 25rem;
}
#interior .pictures .row2 > div {
flex: 1;
}
.square {
position: relative;
}
.square > div {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#interior .img {
width: 100%;
height: 100%;
background: url(./img/673a7892c45edee71246a61c7ea0cafc.jpg);
background-repeat: no-repeat;
background-size: cover;
border-radius: 2rem;
}
@media only screen and (max-width: 430px) {
#interior .pictures .row2 {
min-width: 15rem;
gap: 0.5rem;
}
}
결과 페이지
페이지 크기를 조절하면서 일정 크기를 도달하면 아래 처럼 정렬하게됩니다~
'HTML , CSS' 카테고리의 다른 글
| <HTML> Clone 코딩 실습 3 (0) | 2023.06.21 |
|---|---|
| <HTML> Clone 코딩 실습 2 (0) | 2023.06.20 |
| < HTML > Clone 코딩 실습 (1) | 2023.06.19 |
| [CSS] FLEX 와 GRID 속성 (0) | 2023.06.16 |
| HTML 의 <form> 과 <input> 태그(Tag)는 무엇일까? (0) | 2023.06.14 |
