<수직 수평 이동 기본 셋팅하기>
<!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
