반응형
250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

짧은코딩

챌린지 6일차 본문

노마드 코더/코코아톡 클론코딩

챌린지 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를 사용할 때, 처음에 그 박스 자신에게 속성을 주려고 했었다. 하지만 바뀌지 않았다. 생각해보니 자식 요소에 영향을 주는 것이다. 평소에 아무렇지 않게 사용했던 속성들의 기본적인 부분을 좀 놓친 것 같다. 

728x90
반응형
저작자표시

'노마드 코더 > 코코아톡 클론코딩' 카테고리의 다른 글

챌린지 9일차(막대나 원 만들기, 애니메이션)  (0) 2022.07.12
git branch  (0) 2022.07.04
keyframes 활용  (0) 2022.07.04
z-index, 메뉴 바 가운데 정렬 법, order  (0) 2022.07.03
More 페이지  (0) 2022.07.02
'노마드 코더/코코아톡 클론코딩' Related Articles more
Comments