Css 심화: 태그를 내맘대로 위치시키기 challenge 정답 도전 1 정답
<!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 정답
<!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;
}
도전 3 정답
<!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 정답
<!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 정답
<!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 ;
}
HackMD
