Css 심화: 태그를 내맘대로 위치시키기 challenge 정답

도전 1 정답

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

HTML





























<!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>

















.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 정답

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

HTML



























<!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>

















.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 정답

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

HTML























<!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>























.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 정답

HTML





















<!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>















.box {
  width: 100px;
  height: 100px;
  background-color: purple;
  color: white;
}
.box-2 {
  background-color: black;
}
.box-position {
  position: relative;
  left: 50px;
  top: -50px;
}

음수의 값을 주면 위로 당겨진다

도전 5 정답

HTML
























<!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>


























.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;
}

Guest Harrison2022/04/15 10:38:04

```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> ```

언니...두번쨰 박스는 왜 div가 두개인가요..? class를 왜 따로주나요..?? (Edited)

Guest Tyler2023/05/13 03:25:08

space-between으로 양쪽으로 나누어 주었는데 문제에 box가 오른쪽에 2개가 있으니까 그 2개가 같이 다니게 해주려고 그러신 것 같아요! (Edited)

Guest Myers2023/05/13 03:26:11

만약 div2개를 하나의div로 안 물려주고 따로두면 space-between을 했을 때 box요소들이 왼쪽 가운데 오른쪽 이렇게 위치해있어서 문제1처럼 안 될 거예요.. (Edited)

Guest Lawrence2023/05/13 03:39:23

그리고 두번째 div안에 div가 2개있지요? 걔네들은 처음에 세로배열로 되어있을텐데요 그 div에도 display:flex를 주면 가로 배열로 바껴요. flex는 기본적으로 아이템들이 가로방향으로 배치되고, 자신이 가진 width만큼 차지하게 돼요. 마치 inline요소들처럼요. (Edited)

Guest Lyons2023/05/13 03:48:58

```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:center랑 flex-end말고 margin-top을 줘서 문제처럼 구현했는데 아쉽군요 (Edited)

Guest Newman2023/05/13 04:23:42

```css= .box { width: 100px; height: 100px; background-color: purple; color: white; } .box-2 { background-color: black; } .box-position { position: relative; left: 50px; top: -50px; } ```

div2는 .box 로 백그라운드 컬러 퍼플도 가지고 있어고 .box-2로 백그라운드컬러 검정도 가지고 있는데 결과는 검정이네요. 결정되는 기준이 뭔가요? c더 뒤에 먹인 class가 적용이 되는건가요? (Edited)

Guest Banks2024/02/04 09:23:25

3박스 모두 플랙스 오른쪽정렬 후 1번박스만 왼쪽으로 옮기는 방법은 안되나요?

Guest Hunter2024/03/29 07:12:38

마지막 문제 박스에 div 1에 position: relative; div 2,3 번에만 position absolute 아닌가요..?