# Css 심화: 태그를 내맘대로 위치시키기 challenge 정답 ## 도전 1 정답 ![](https://i.imgur.com/Yy2i9sJ.png) * HTML ```htmlembedded= <!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"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="main"> <div class="box"> div1 </div> <div class="sub-main"> <div class="box mr-5"> div2 </div> <div class="box"> div3 </div> </div> </div> </body> </html> ``` * CSS ```css= .main { display: flex; justify-content: space-between; } .box { width: 100px; height: 100px; background-color: purple; color: white; } .sub-main { display: flex; } .mr-5 { margin-right: 5px; } ``` ## 도전 2 정답 ![](https://i.imgur.com/bKWka3N.png) * HTML ```htmlembedded= <!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"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="main"> <div class="box"> div1 </div> <div class="box box-center"> div2 </div> <div class="box box-end"> div3 </div> </div> </body> </html> ``` * CSS ```css= .main { display: flex; flex-direction: column; } .box { width: 100px; height: 100px; background-color: purple; color: white; } .box-center { align-self: center; } .box-end { align-self: flex-end; } ``` * **align-self** : align-items와 비슷함, align-items은 전체를 움직이는 반면 align-self 는 각각 요소 하나를 움직임 참조 : https://www.w3schools.com/cssref/css3_pr_align-self.asp ## 도전 3 정답 ![](https://i.imgur.com/YN0RTRS.png) * HTML ```htmlembedded= <!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"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="main"> <div class="box-big"> div1 <div class="box box-position"> div2 </div> </div> </div> </body> </html> ``` * CSS ```css= .main { display: flex; justify-content: center; } .box { width: 100px; height: 100px; background-color: purple; color: white; } .box-big { width: 200px; height: 200px; background-color: black; color: white; position: relative; } .box-position { position: absolute; left: 50px; top: 50px; } ``` * position:static은 웹 브라우저의 기본 값이다. 이 상태에서 absolute를 주면 화면 전체 기준으로 태그가 위치된다. 하지만 static외의 값 relative를 부모에 주게되면 자식은 부모상자 를 기준으로 absloute를 위치 시킨다 ## 도전 4 정답 ![](https://i.imgur.com/xi0Ir1J.png) * HTML ```htmlembedded= <!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"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="box"> div1 </div> <div class="box box-2 box-position"> div2 </div> </body> </html> ``` * CSS ```css= .box { width: 100px; height: 100px; background-color: purple; color: white; } .box-2 { background-color: black; } .box-position { position: relative; left: 50px; top: -50px; } ``` * 음수의 값을 주면 위로 당겨진다 ## 도전 5 정답 ![](https://i.imgur.com/DJMxMUO.png) * HTML ```htmlembedded= <!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"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="box-big"> div1 <div class="box box-top"> div2 </div> <div class="box box-bottom"> div3 </div> </div> </body> </html> ``` * CSS ```css= .box { width: 100px; height: 100px; background-color: purple; color: white; } .box-big { width: 400px; height: 150px; background-color: black; color: white; position: absolute; right:0px; bottom:0px; } .box-top { position: absolute; top: 0; right: 0; } .box-bottom { position: absolute; bottom: 0; left: 0; } ```