💻 간단한 비교 테이블 HTML/CSS 코드 예시

코딩에 관심 있으신 분들을 위해 간단한 비교 테이블 코드 예시를 준비했어요! 이 코드를 기반으로 여러분만의 테이블을 만들어보세요. 😊

HTML 코드:

<div class="comparison-table">
  <div class="table-header">
    <div class="header-cell feature-header">상품 특징</div>
    <div class="header-cell">기본형</div>
    <div class="header-cell">고급형</div>
    <div class="header-cell premium">프리미엄</div>
  </div>
  
  <div class="table-row">
    <div class="feature-cell">가격</div>
    <div class="cell">19,000원</div>
    <div class="cell">29,000원</div>
    <div class="cell premium">39,000원</div>
  </div>
  
  <div class="table-row">
    <div class="feature-cell">배송</div>
    <div class="cell">일반배송</div>
    <div class="cell">빠른배송</div>
    <div class="cell premium">당일배송</div>
  </div>
  
  <div class="table-row">
    <div class="feature-cell">A/S 기간</div>
    <div class="cell">6개월</div>
    <div class="cell">1년</div>
    <div class="cell premium">2년</div>
  </div>
</div>

CSS 코드:

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  background-color: #4a6bff;
  color: white;
}

.table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  border-bottom: 1px solid #e9ecef;
}

.header-cell {
  padding: 15px;
  text-align: center;
  font-weight: bold;
}

.feature-cell {
  padding: 15px;
  background-color: #f8f9fa;
  font-weight: bold;
}

.cell {
  padding: 15px;
  text-align: center;
}

.premium {
  background-color: #fff9db;
  font-weight: bold;
}

/* 호버 효과 */
.table-row:hover {
  background-color: #f1f3f5;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .table-header, .table-row {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

이 코드는 기본적인 비교 테이블을 만드는 예시에요. CSS Grid를 사용해서 반응형으로 만들었고, 호버 효과도 추가했어요. 여러분의 필요에 맞게 수정해서 사용하세요! 👩‍💻