Unit5. [실습] Flexbox 사용

CodeStates/Training

Unit5. [실습] Flexbox 사용

Jieunny 2022. 12. 19. 12:17

📣 Flexbox 사용해서 VScode 레이아웃 만들어보기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Practice</title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>
    <div class="container">
        <div class="col wrap1">	
            <div class="row icon">icon1</div>
            <div class="row icon">icon2</div>
            <div class="row icon">icon3</div>
        </div>
        <div class="col wrap2">
            <div class="row h50">box1</div>
            <div class="row h30">box2</div>
            <div class="row h20">box3</div>
        </div>
        <div class="col wrap3">
            <div class="row h80">box1</div>
            <div class="row h20">box2</div>
        </div>
    </div>

</body>
</html>

html {
    height: 100%;	
    /* 박스들을 화면에 꽉 채우기 위해서 부모요소 높이 주기 */
}

body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #4a4a4a;
    height: 100%;
    /* 박스들을 화면에 꽉 채우기 위해서 부모요소 높이 주기 */
  }

  .container {
    width: 100%;
    /* 화면에 가로 꽉 채우기 */
    height: 100%;
    /* 화면에 새로 꽉 채우기 */
    display: flex;
    /* 자식 요소인 3개의 div를 가로로 배치하기 위해 부모요소에 flex 주기 */
  }

  .col {
    border: 1px solid red;
  }

  .row {
    border: 1px solid blue;
    margin: 3px;
  }

  .wrap1 {
    flex : 1;
    /* 세 div 요소의 가로 크기 비율 설정해주기 */
    padding: 5px;
    margin: 1px;
  }

  .wrap2 {
    flex : 2;
    /* 세 div 요소의 가로 크기 비율 설정해주기 */
    padding: 5px;
    box-sizing: border-box;
    margin: 1px;
    display: flex;
    /* 자식 요소를 세로로 배치시켜 크기 비율을 지정해주기 위해 부모요소에 flex 주기 */
    flex-direction: column;
    /* 자식 요소 세로로 배치 */
  }

  .wrap3 {
    flex : 7;
    /* 세 div 요소의 가로 크기 비율 설정해주기 */
    padding: 5px;
    margin: 1px;
    display: flex;
    /* 자식 요소를 세로로 배치시켜 크기 비율을 지정해주기 위해 부모요소에 flex 주기 */
    flex-direction: column;
    /* 자식 요소 세로로 배치 */
  }
  
  /* 크기 비율 지정해주기 */

  .h80 {
    flex: 8;
  }

  .h50 {
    flex: 5;
  }

  .h30 {
    flex: 3;
  }

  .h20 {
    flex: 2;
  }

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

저작자표시 (새창열림)