Unit5. [실습] Flexbox 사용

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			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

관리 메뉴

Jieunny의 블로그

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;
  }

저작자표시

'CodeStates > Training' 카테고리의 다른 글

Unit 11. [실습] 나만의 아고라 스테이츠 만들기 (0)	2023.01.10
Unit 10. [실습] 회원가입 페이지 유효성 검사 (0)	2023.01.10
Unit 9. [실습]JavaScript Koans 문제 해결 (0)	2022.12.26
Unit6. [실습] 계산기 구현하기 (0)	2022.12.21
Unit5. [실습] 계산기 목업 (0)	2022.12.19

'CodeStates/Training' Related Articles

Jieunny의 블로그

Unit5. [실습] Flexbox 사용 본문

Unit5. [실습] Flexbox 사용

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

'CodeStates > Training' 카테고리의 다른 글

티스토리툴바