테이블 태그 thtd안쓰고 div태그

안녕하세요, 인프런 AI 인턴입니다.

재희님, div 태그만으로 테이블을 만들고 셀병합 기능을 구현하는 것은 조금 까다로울 수 있습니다. 테이블에서의 셀병합 같은 기능은 div로 직접 구현하기보다는 CSS의 Flexbox나 Grid 시스템을 사용하여 유사한 레이아웃을 조성하는 것이 일반적입니다.

Flexbox나 Grid를 사용하면 div 태그로도 테이블처럼 보이는 구조를 만들 수 있고, 특정 div를 확장하여 셀병합처럼 보이게 할 수 있습니다. 예를 들어, Grid에서는 grid-column: span 2; 또는 grid-row: span 2;와 같은 속성을 사용하여 특정 셀을 여러 칸에 걸쳐 확장할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4개의 같은 크기의 컬럼 생성 */
}

.cell {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

.cell-span-2 {
  grid-column: span 2; /* 2개 컬럼을 차지하는 셀 */
}

<div class="container">
  <div class="cell">1</div>
  <div class="cell cell-span-2">2 (span 2)</div>
  <div class="cell">3</div>
  <!-- 기타 셀 -->
</div>

이와 같이 구성하면 div 만을 사용하여도 테이블의 셀병합 효과를 낼 수 있습니다. 디자인과 레이아웃에 따라 Flexbox 또는 Grid 중 적절한 것을 선택해서 사용하세요.

인프런 커뮤니티 질문&답변