17. table, flex

Frontend/CSS

17. table, flex

예린lynn 2024. 7. 6. 01:59

728x90

1. table

display 속성 값을 table, table-row 등을 사용해서, 마치 <table> 태그를 사용하는 것과 비슷하게 HTML 태그를 작성할 수 있다.

table : <table> 태그처럼 사용
table-header-group: <thead> 태그처럼 사용
table-row-group: <tbody> 태그처럼 사용
table-footer-group: <tfoot> 태그처럼 사용
table-row: <tr> 태그처럼 사용
table-cell: <td>, <th> 태그처럼 사용

- 활용 코드

    <style>
      .display-table {
        /* <table> 요소처럼 표현됨 */
        display: table;
        width: 100%;
      }

      .display-tb-header {
        /* <thead> 요소처럼 표현됨 */
        display: table-header-group;
      }

      .display-tb-body {
        /* <tbody> 요소처럼 표현됨 */
        display: table-row-group;
      }

      .display-tb-row {
        /* <tr> 요소처럼 표현됨 */
        display: table-row;
      }

      .display-tb-cell {
        /* <td>, <th> 요소처럼 표현됨 */
        display: table-cell;
      }
    </style>

  <body>
    <div class="display-table">
      <div class="display-tb-header">
        <div class="display-tb-row">
          <div class="display-tb-cell">A</div>
          <div class="display-tb-cell">B</div>
          <div class="display-tb-cell">C</div>
        </div>
      </div>

      <div class="display-tb-body">
        <div class="display-tb-row">
          <div class="display-tb-cell">A1</div>
          <div class="display-tb-cell">B1</div>
          <div class="display-tb-cell">C1</div>
        </div>
        <div class="display-tb-row">
          <div class="display-tb-cell">A2</div>
          <div class="display-tb-cell">B2</div>
          <div class="display-tb-cell">C2</div>
        </div>
        <div class="display-tb-row">
          <div class="display-tb-cell">A3</div>
          <div class="display-tb-cell">B3</div>
          <div class="display-tb-cell">C3</div>
        </div>
      </div>
    </div>
    </body>

- 실행 결과

2. flex

flexbox는 웹 화면의 공간 분할과 콘텐츠가 담길 공간의 크기 및 배분, 그리고 콘텐츠에 대한 배치 순서를 쉽게 정의할 수 있도록 해준다.

flexbox를 구성하는 두 개의 축인 주축(main axis)과 교차축(cross axis)을 기준으로 레이아웃을 정할 수 있다.

flex-direction

row: 아이템 배치 방향이 왼쪽에서 오른쪽으로
row-reverse: 아이템 배치 방향이 오른쪽에서 왼쪽으로
column: 아이템 배치 방향이 위에서 아래로
column-reverse: 아이템 배치 방향이 아래에서 위로

-활용 코드

    <style>
      .container {
        display: flex;
        flex-direction: row;
        border: 3px dotted black;
      }

      .item {
        width: 150px;
        border: 2px solid blue;
        background-color: greenyellow;
        text-align: center;
      }
    </style>

  <body>
    <div class="container">
      <div class="item">A</div>
      <div class="item">B</div>
      <div class="item">C</div>
    </div>
  </body>

- 실행 결과

flex-wrap

플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정한다.

속성값으로 wrap이나 wrap-reverse로 지정하고 웹 브라우저 화면의 너비를 늘리거나 줄이면,

플렉스 컨테이너의 너비에 따라 여러 줄로 표시된다.

nowrap: 기본값: 플렉스 항목을 한 줄에 표시
wrap: 플렉스 항목을 여러 줄에 표시
wrap-reverse: 플렉스 항목의 숫자를 바꿔서 여러 줄에 표시. 시작점과 끝점이 바뀐다.

- 활용 코드

    <style>
      .container {
        display: flex;
        flex-direction: row;
        border: 3px dotted black;

        flex-wrap: wrap;
      }

      .item {
        width: 150px;
        border: 2px solid blue;
        background-color: greenyellow;
        text-align: center;
      }
    </style>

  <body>
    <div class="container">
      <div class="item">A</div>
      <div class="item">B</div>
      <div class="item">C</div>
      <div class="item">D</div>
      <div class="item">E</div>
    </div>
  </body>

- 실행 결과

flex-flow

flex-direction과 flex-wrap 속성을 한꺼번에 지정한다.
기본값: row nowrap

flex-flow: row wrap;  //왼쪽에서 오른쪽, 여러 줄
flex-flow: row nowrap;  //왼쪽에서 오른쪽, 한 줄

justify-content

주축에서 플렉스 항목 간의 정렬 방법을 지정한다.

flex-start: 시작점에 맞춰 배치 ex) row인 경우는 왼쪽, row-reverse인 경우는 오른쪽부터
flex-end: 끝점에 맞춰 배치
center: 중앙에 맞춰 배치
space-between: 첫 번째 항목과 끝 항목을 주축의 시작점과 끝점에 배치한 후, 나머지 항목은 그 사이에 같은 간격으로 배치
space-around: 모든 항목을 주축에 같은 간격으로 배치
space-evenly: 항목 사이와 시작점과 끝점의 간격을 균일하게 배치

- 활용 코드

    <style>
      .container {
        display: flex;
        flex-direction: row;
        border: 3px dotted black;

        justify-content: space-between;
      }

      .item {
        width: 30px;
        border: 2px solid blue;
        background-color: greenyellow;
        text-align: center;
      }
    </style>

  <body>
    <div class="container">
      <div class="item">A</div>
      <div class="item">B</div>
      <div class="item">C</div>
    </div>
  </body>

- 실행 결과

728x90