# Css 심화: 태그를 내맘대로 위치시키기 challenge 정답
## 도전 1 정답
* 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 정답
* 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 정답
* 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 정답
* 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 정답
* 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;
}
```
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Connect another wallet