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

도전 1 정답

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

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

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