CodeGym /행동 /Frontend SELF KO /반응형 테이블

반응형 테이블

Frontend SELF KO

레벨 26 , 레슨 3

사용 가능

9.1 스크롤

테이블은 구조화된 데이터를 표시하는 데 자주 사용되지만, 작은 화면의 기기에서는 표시하기 어려울 수 있어. 반응형 테이블은 모바일 폰과 태블릿을 포함한 다양한 기기에서 데이터를 더 잘 보고 상호작용할 수 있게 해줘. 반응형 테이블을 만드는 몇 가지 기술을 살펴보자.

반응형 테이블을 만드는 간단한 방법 중 하나는 수평 스크롤 추가하기야. 이 방법은 테이블 구조를 유지하고 좁은 화면에서 사용자가 데이터를 수평으로 스크롤할 수 있게 해줘.

예시:

CSS

    
      .table-container {
        overflow-x: auto;
        width: 100%;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>스크롤이 있는 반응형 테이블</title>
        <link rel="stylesheet" href="styles.css">
      </head>
      <body>
      <div class="table-container">
        <table>
          <thead>
          <tr>
            <th>열 1</th>
            <th>열 2</th>
            <th>열 3</th>
            <th>열 4</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>데이터 1</td>
            <td>데이터 2</td>
            <td>데이터 3</td>
            <td>데이터 4</td>
          </tr>
          <!-- 다른 행들 -->
          </tbody>
        </table>
      </div>
      </body>
      </html>

코드 설명:

.table-container: 테이블이 컨테이너의 너비를 초과할 경우 수평 스크롤을 추가해줘
table: 테이블의 너비를 100%로 설정하고 셀의 경계를 결합해줘

9.2 열 숨김

이 방법은 좁은 화면에서 덜 중요한 열을 숨겨 주요 데이터를 보이게 해주는 거야. 이걸 미디어 쿼리로 할 수 있어.

예시:

CSS

    
      @media (max-width: 600px) {
        .hide {
          display: none;
        }
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>열 숨김이 있는 반응형 테이블</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <table>
            <thead>
            <tr>
              <th>열 1</th>
              <th>열 2</th>
              <th class="hide">열 3</th>
              <th class="hide">열 4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>데이터 1</td>
              <td>데이터 2</td>
              <td class="hide">데이터 3</td>
              <td class="hide">데이터 4</td>
            </tr>
            <!-- 다른 행들 -->
            </tbody>
          </table>
        </body>
      </html>

코드 설명:

.hide: 미디어 쿼리를 사용해 너비 600px 미만의 화면에서 특정 열을 숨겨줘
table: 테이블의 너비를 100%로 설정하고 셀의 경계를 결합해줘

9.3. 블록으로 쌓기

블록으로 쌓기는 테이블 행을 세로로 블록 형태로 바꿔서 좁은 화면에서 아래로 쌓이게 하는 방법이야. 모바일 기기에서 테이블을 더 읽기 쉽게 해줘.

예시:

CSS

    
      table {
        width: 100%;
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
      }

      @media (max-width: 600px) {
        table, thead, tbody, th, td, tr {
          display: block;
        }

        th {
          display: none;
        }

        td {
          display: flex;
          justify-content: space-between;
          padding: 10px;
          border-bottom: 1px solid #ccc;
        }

        td::before {
          content: attr(data-label);
          font-weight: bold;
        }
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>블록으로 쌓는 반응형 테이블</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <table>
            <thead>
            <tr>
              <th>열 1</th>
              <th>열 2</th>
              <th>열 3</th>
              <th>열 4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td data-label="열 1">데이터 1</td>
              <td data-label="열 2">데이터 2</td>
              <td data-label="열 3">데이터 3</td>
              <td data-label="열 4">데이터 4</td>
            </tr>
            <!-- 다른 행들 -->
            </tbody>
          </table>
        </body>
      </html>

코드 설명:

미디어 쿼리: 너비 600px 미만의 화면에서 테이블을 블록 요소로 변환해
td::before: 데이터 컨텍스트를 유지하기 위해 셀 값 앞에 열 이름을 가진 가상 요소를 추가해줘

9.4. 카드 레이아웃으로 변환

이 방법은 테이블의 각 행을 좁은 화면에서 개별 카드로 변환하는 거야. 모바일 기기에서 데이터 읽기 쉽게 해줘.

예시:

CSS

    
      table {
        width: 100%;
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
      }

      @media (max-width: 600px) {
        table, thead, tbody, th, td, tr {
          display: block;
        }

        th {
          display: none;
        }

        tr {
          margin-bottom: 10px;
          border-bottom: 2px solid #ccc;
          padding-bottom: 10px;
        }

        td {
          display: flex;
          justify-content: space-between;
          padding: 10px 0;
          border: none;
        }

        td::before {
          content: attr(data-label);
          font-weight: bold;
          margin-right: 10px;
        }
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>카드 레이아웃이 있는 반응형 테이블</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <table>
            <thead>
            <tr>
              <th>열 1</th>
              <th>열 2</th>
              <th>열 3</th>
              <th>열 4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td data-label="열 1">데이터 1</td>
              <td data-label="열 2">데이터 2</td>
              <td data-label="열 3">데이터 3</td>
              <td data-label="열 4">데이터 4</td>
            </tr>
            <!-- 다른 행들 -->
            </tbody>
          </table>
        </body>
      </html>

코드 설명:

미디어 쿼리: 너비 600px 미만의 화면에서 테이블을 블록 요소로 변환하고 카드 형태로 만들어줘
td::before: 데이터 컨텍스트를 유지하기 위해 셀 값 앞에 열 이름을 가진 가상 요소를 추가해줘

9.5 CSS Frameworks 사용하기

Bootstrap과 같은 많은 CSS 프레임워크는 반응형 테이블을 만드는 데 필요한 내장 솔루션을 제공해. 이런 프레임워크를 사용하면 과정을 단순화하고 준비된 스타일과 구성 요소를 제공해줘.

Bootstrap 사용 예시:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Bootstrap과 함께하는 반응형 테이블</title>
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        </head>
        <body>
          <div class="container">
            <table class="table table-responsive">
              <thead>
              <tr>
                <th>열 1</th>
                <th>열 2</th>
                <th>열 3</th>
                <th>열 4</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>데이터 1</td>
                <td>데이터 2</td>
                <td>데이터 3</td>
                <td>데이터 4</td>
              </tr>
              <!-- 다른 행들 -->
              </tbody>
            </table>
          </div>
          <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        </body>
      </html>

코드 설명:

table.table-responsive: 좁은 화면에서 테이블에 수평 스크롤을 추가하는 Bootstrap 클래스야
container: 컨테이너의 최대 너비를 설정하고 중앙에 배치해주는 Bootstrap 클래스야

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION