양쪽 여백 잡기
margin : 0 auto;
위아래는 0만큼 띄여지고, 좌우는 가운데로 맞춰짐
.container {
background-color: rgb(188, 163, 255);
max-width: 768px;
margin: 0 auto;
}
container 세로 꽉 채우기
min-height: 100vh;
.container {
background-color: rgb(188, 163, 255);
max-width: 768px;
min-height: 100vh;
}
여러줄 사용하기
flex-wrap: wrap;
.box-container {
background-color: rgb(160, 255, 180);
width: 100%;
display: flex;
flex-wrap: wrap;
}
display: flex이므로 한줄 사용하나, wrap을 이용해서 여려줄 사용 가능
개별로 박스크기 설정
남는 공간 있는 경우 한줄 다 사용하기
flex-grow: 1;
.box {
border: 3px solid rgb(106, 106, 255);
width: 50%;
min-height: 150px;
flex-grow: 1; /*홀수개 있으면 늘림*/
}
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav>Navigation Bar</nav>
<div class="box-container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<footer>Footer</footer>
</div>
</div>
</body>
</html>* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
background-color: rgb(255, 211, 222);
}
.container {
background-color: rgb(188, 163, 255);
max-width: 768px;
min-height: 100vh;
margin: 0 auto;
display: flex;
}
nav {
background-color: rgb(255, 255, 132);
width: 120px;
}
.box-container {
background-color: rgb(160, 255, 180);
width: 100%;
display: flex;
flex-wrap: wrap;
}
.box {
border: 3px solid rgb(106, 106, 255);
width: 50%;
min-height: 150px;
flex-grow: 1;
}
.box:nth-child(2n) {
background-color: rgb(95, 170, 255);
}
footer {
background-color: rgb(200, 106, 145);
min-height: 50px; /*최소 높이값*/
width: 100%; /*width는 100% 사용*/
}
@media screen and (max-width:480px){
.container {
flex-direction: column;
}
.box {
width: 100%;
}
}
@media screen and (max-width:768px){
.container {
flex-direction: column;
}
nav {
height: 120px;
width: 100%;
}
}'웹 개발 > 기초' 카테고리의 다른 글
| 자바스크립트 API 통신 (0) | 2022.03.21 |
|---|---|
| 자바스크립트 기본 문법 (0) | 2022.03.14 |
| [CSS] flex box, grid (0) | 2022.03.07 |
| [CSS] 자주 사용하는 속성 (0) | 2022.03.06 |
| [CSS] 단위(em, rem, vw, vh, vmax, vmin) (0) | 2022.03.04 |
[css] 반응형 레이아웃 만들기