<수직 수평 이동 기본 셋팅하기>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer-box {
width: 500px;
height: 500px;
background-color: skyblue;
}
.inner-box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="outer-box">
<div class="inner-box">1</div>
</div>
</body>
</html>
1. 수평 이동하기
display: grid; justify-content: end;
2. 수직 이동하기
display: grid; justify-content: center; align-items: center;
<박스 두개 기본 셋팅하기>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer-box {
width: 500px;
height: 500px;
background-color: skyblue;
}
.inner-box1 {
width: 100px;
height: 100px;
background-color: red;
}
.inner-box2 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="outer-box">
<div class="inner-box1">1</div>
<div class="inner-box2">2</div>
</div>
</body>
</html>
.outer-box div { // 모든 자식 div 찾기 color: white; }
.outer-box>div { // 바로 밑에 있는 자식 div 찾기 color: white; }
.outer-box>div:nth-child(1) { // 자식 div중 첫번째 찾기 color: white; }
3. align-items로 배치하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer-box {
width: 500px;
height: 500px;
background-color: skyblue;
display: grid;
grid-template-columns: 1fr 1fr;
}
.inner-box1 {
width: 100px;
height: 100px;
background-color: red;
}
.inner-box2 {
width: 100px;
height: 100px;
background-color: blue;
}
.b2 {
display: grid;
justify-content: end;
align-items: end;
}
</style>
</head>
<body>
<div class="outer-box">
<div class="b1">
<div class="inner-box1">1</div>
</div>
<div class="b2">
<div class="inner-box2">2</div>
</div>
</div>
</body>
</html>
4. justify-content로 배치하기
display: grid; grid-template-columns: auto auto; justify-content: space-between;
justify-content: space-evenly;
justify-content: space-around;
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box1 {
background-color: aliceblue;
border: 1px solid black;
height: 300px;
width: 300px;
display: inline-block;
text-align: center;
}
.inner1 {
background-color: red;
display: inline-block;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner1">HelloWorld</div>
</div>
</body>
</html>
<style>
.menu {
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: space-around;
}
.menu li {
list-style-type: none;
}
.nav {
display: grid;
grid-template-columns: auto auto;
}
</style>
Share article
