웹 애플리케이션에서 테이블은 중요한 구성 요소입니다. 사용자들이 데이터를 쉽게 읽고 이해할 수 있도록 테이블을 잘 디자인하는 것은 매우 중요합니다. 이번 블로그 포스트에서는 자바스크립트와 CSS Grid를 사용하여 웹 애플리케이션의 테이블을 디자인하는 방법을 알아보겠습니다.

CSS Grid 소개

CSS Grid는 웹 디자인 영역에서 최신 기술 중 하나로, 그리드 레이아웃을 쉽게 만들 수 있게 해줍니다. 그리드 컨테이너와 그리드 아이템을 이용하여 웹 페이지의 레이아웃을 구성할 수 있습니다. 자세한 내용은 CSS Grid 가이드에서 확인할 수 있습니다.

테이블 디자인하기

먼저 HTML에서 데이터를 보여줄 테이블을 생성합니다. HTML 테이블은 일반적으로 <table>, <tr>, <td> 요소를 사용하여 구성됩니다. 각 요소에는 클래스나 ID를 부여하여 CSS 디자인에 사용할 수 있습니다.

<table class="grid-table">
  <tr>
    <td>이름</td>
    <td>나이</td>
    <td>이메일</td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>25</td>
    <td>jane@example.com</td>
  </tr>
  <!-- 테이블 데이터 추가 -->
</table>

다음으로 CSS를 사용하여 테이블 디자인을 개선합니다. 이때 CSS Grid를 사용하여 그리드 레이아웃을 만들어보겠습니다.

.grid-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3개의 열을 가진 그리드 생성 */
  border-collapse: collapse; /* 셀 경계를 제거하여 보다 깔끔한 디자인 */
}

.grid-table td {
  border: 1px solid #ccc; /* 셀 경계 표시 */
  padding: 8px; /* 셀 내용과 경계 사이의 공간 설정 */
}

이제 테이블이 그리드 형태로 나타나게 됩니다. 자바스크립트를 활용하여 동적으로 테이블 데이터를 추가하거나 변경할 수도 있습니다.

// 테이블 데이터 동적으로 추가하기
const table = document.querySelector(".grid-table");

function addTableRow(name, age, email) {
  const row = document.createElement("tr");
  
  const nameCell = document.createElement("td");
  nameCell.innerHTML = name;
  row.appendChild(nameCell);
  
  const ageCell = document.createElement("td");
  ageCell.innerHTML = age;
  row.appendChild(ageCell);
  
  const emailCell = document.createElement("td");
  emailCell.innerHTML = email;
  row.appendChild(emailCell);
  
  table.appendChild(row);
}

// 예시 데이터 추가
addTableRow("Mark Lee", 28, "mark@example.com");
addTableRow("Sarah Kim", 35, "sarah@example.com");

이제 자바스크립트로 데이터를 동적으로 추가할 수 있습니다. 웹 애플리케이션에서 필요한 기능에 맞게 테이블을 디자인하고 자바스크립트를 활용하여 데이터를 관리할 수 있습니다.

#웹디자인 #CSSGrid