노마드 코더/코코아톡 클론코딩
챌린지 6일차
5_hyun
2022. 7. 9. 17:06
반응형
-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>repl.it</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="big-box">
<div class="middle-box">
<div class="small-box"></div>
<div class="long-box"></div>
<div class="small-box"></div>
</div>
</div>
</body>
</html>
-css
body {
margin: 0;
}
.big-box {
background-color: #ff6446;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.middle-box {
border: 3px solid black;
padding: 10px;
width: 300px;
height: 300px;
background-color: #f5deb3;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.small-box,
.long-box {
background-color: #008080;
padding: 10px;
}
.small-box {
border: 3px solid white;
width: 40px;
height: 40px;
}
.long-box {
border: 3px dashed white;
width: 250px;
height: 40px;
}
이번 챌린지를 하면서 겉보기엔 쉬워보였지만 막상 해보니까 좀 어려웠다.
문제점 1. 빈 박스에 색 넣기
빈 박스 안에 아무것도 없이 배경 색을 주면 화면에 아무것도 나오지 않는다. 그렇기에 padding을 준 다음에 배경색을 주니까 박스가 채워졌다.
문제점 2. flex 박스
flex를 사용할 때, 처음에 그 박스 자신에게 속성을 주려고 했었다. 하지만 바뀌지 않았다. 생각해보니 자식 요소에 영향을 주는 것이다. 평소에 아무렇지 않게 사용했던 속성들의 기본적인 부분을 좀 놓친 것 같다.
반응형