codestates : Unit6 회고 - 1

binary·2022년 5월 3일

CODESTATES CSS

❤️ codeStates 부트캠프

목록 보기

7/30

codestates : Unit6 회고

오늘은 Flexbox에 대하여 배웠다.

완성된 그림보고 HTML, CSS 작성하기

그림을 보고 HTML 마크업도 하고 CSS로 스타일도 먹이는 과제가 있었다.

(실제로 제공된 그림이 이렇게 허접하지는 않았다... 혹시나 교육 과정 중에 제공하는 자료를 올리면 안 될까봐 따라 그렸당 ㅎㅎ..)

그림을 보고 section 3개, 그 안에는 div로 상자를 만들면 되겠다는 생각을 했다.

🌟 코드

<!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="./index.css" />
    <title>Document</title>
  </head>
  <body>
    <section class="wrapper">
      <section class="sec1">
        <div>아이콘1</div>
        <div>아이콘2</div>
        <div>아이콘3</div>
      </section>
      <section class="sec2">
        <div>영역1</div>
        <div>영역2</div>
        <div>영역3</div>
      </section>
      <section class="sec3">
        <div>영역4</div>
        <div>영역5</div>
      </section>
    </section>
  </body>
</html>

💻 실행화면

css 작업을 아직 하지 않았기 때문에 그냥 글자들만 달랑 있어 보인다.

이제 section 3개를 가로 정렬하고 flex-grow를 이용하여 0:2:6 비율을 차지하게 한 뒤 아이콘이 있는 section을 제외한 section 안에 있는 박스들도 flex-grow로 4:4:2 , 8:2 비율로 차지하게 할 생각이다.

🌟 코드

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border: 2px solid salmon;
  height: 1000px;
}

.wrapper section {
  border: 2px solid blue;
  margin-right: 5px;
}

.wrapper section:last-child {
  margin-right: 0;
}

.wrapper section div {
  border: 1px dashed skyblue;
}

.sec1 {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sec1 div {
  width: 100%;
}

.sec2 {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 2;
}

.sec2 div {
  width: 100%;
  flex-grow: 4;
}

.sec2 div:last-child {
  flex-grow: 2;
}

.sec3 {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 6;
}

.sec3 div:first-child {
  flex-grow: 7.9;
}

.sec3 div:last-child {
  flex-grow: 1.9;
}

💻 실행화면

4:4:2 비율로 section2 안의 박스를 정렬하고 8:2 비율로 section3 안의 박스를 정렬했다.

그런데 gap: 5px 이 있어서 그런 지 section2 안에 있는 영역2 박스가 끝나는 지점과 section3 안에 있는 영역4 박스가 끝나는 지점이 같지 않았다. 그래서 어거지로 section3 안에 있는 영역 박스의 비율을 7.9:1.9 로 하여 맞춰 주었다.