반응형 인테리어 쇼핑몰 디자인: 카테고리 메뉴와 제품 그리드 구성하기

모든 제품

공간별 쇼핑하기

특별한 가격

새로운 소식

아이디어

플래닝&설계 서비스

더 보기

침실

침대/매트리스

옷장

서랍장

 

이 코드는 웹페이지 카테고리 그리드를 만들기 위한 코드입니다.

이미지를 [ URL 입력] 형식으로 바꿨으니, 실제 이미지 URL로 교체해서 사용하시면 돼요.

1. HTML 코드:

<div style="width:100%; max-width:800px; margin:0 auto; padding:20px 0;">
  <!-- 상단 메뉴바 -->
  <div style="display:flex; overflow-x:auto; white-space:nowrap; border-bottom:1px solid #e0e0e0; padding:12px 0; margin-bottom:20px;">
    <div style="display:inline-block; padding:8px 15px; margin-right:5px; color:#333; font-size:14px; font-weight:500;">모든 제품</div>
    <div style="display:inline-block; padding:8px 15px; margin-right:5px; color:#0F73B9; font-size:14px; font-weight:500; border-bottom:2px solid #0F73B9;">공간별 쇼핑하기</div>
    <div style="display:inline-block; padding:8px 15px; margin-right:5px; color:#333; font-size:14px; font-weight:500;">특별한 가격</div>
    <div style="display:inline-block; padding:8px 15px; margin-right:5px; color:#333; font-size:14px; font-weight:500;">새로운 소식</div>
    <div style="display:inline-block; padding:8px 15px; margin-right:5px; color:#333; font-size:14px; font-weight:500;">아이디어</div>
    <div style="display:inline-block; padding:8px 15px; margin-right:5px; color:#333; font-size:14px; font-weight:500;">플래닝&설계 서비스</div>
    <div style="display:inline-block; padding:8px 15px; margin-right:5px; color:#333; font-size:14px; font-weight:500;">더 보기</div>
  </div>
  
  <!-- 카테고리 그리드 -->
  <table style="width:100%; border-collapse:collapse;">
    <tr>
      <!-- 침실 -->
      <td style="width:25%; padding:10px; text-align:center; vertical-align:top;">
        <a href="#침실" style="text-decoration:none; color:inherit;">
          <div style="width:70px; height:70px; border-radius:4px; margin:0 auto 8px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,0.1);">
            <img src="[ URL 입력]" alt="침실" style="width:100%; height:100%; object-fit:cover;">
          </div>
          <div style="font-size:12px; text-align:center; margin-top:5px; color:#333;">침실</div>
        </a>
      </td>
      
      <!-- 침대/매트리스 -->
      <td style="width:25%; padding:10px; text-align:center; vertical-align:top;">
        <a href="#침대" style="text-decoration:none; color:inherit;">
          <div style="width:70px; height:70px; border-radius:4px; margin:0 auto 8px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,0.1);">
            <img src="[ URL 입력]" alt="침대/매트리스" style="width:100%; height:100%; object-fit:cover;">
          </div>
          <div style="font-size:12px; text-align:center; margin-top:5px; color:#333;">침대/매트리스</div>
        </a>
      </td>
      
      <!-- 옷장 -->
      <td style="width:25%; padding:10px; text-align:center; vertical-align:top;">
        <a href="#옷장" style="text-decoration:none; color:inherit;">
          <div style="width:70px; height:70px; border-radius:4px; margin:0 auto 8px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,0.1);">
            <img src="[ URL 입력]" alt="옷장" style="width:100%; height:100%; object-fit:cover;">
          </div>
          <div style="font-size:12px; text-align:center; margin-top:5px; color:#333;">옷장</div>
        </a>
      </td>
      
      <!-- 서랍장 -->
      <td style="width:25%; padding:10px; text-align:center; vertical-align:top;">
        <a href="#서랍장" style="text-decoration:none; color:inherit;">
          <div style="width:70px; height:70px; border-radius:4px; margin:0 auto 8px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,0.1);">
            <img src="[ URL 입력]" alt="서랍장" style="width:100%; height:100%; object-fit:cover;">
          </div>
          <div style="font-size:12px; text-align:center; margin-top:5px; color:#333;">서랍장</div>
        </a>
      </td>
    </tr>
  </table>
</div>

2. 코드 설명

이미지 URL 교체: [ URL 입력]을 실제 이미지 URL로 교체하면 됩니다.

각 카테고리 링크: <a href="#침실">, <a href="#침대">와 같은 앵커 링크를 사용해 각 카테고리별 페이지로 이동할 수 있습니다.

테이블 레이아웃: 테이블을 사용하여 카테고리를 4개씩 정렬하였으며, 반응형으로 화면 크기에 맞춰 자동으로 조정됩니다.

 

3. 확장성

더 많은 카테고리를 추가하고 싶다면, <tr> 안에 새로운 <td>를 추가하면 됩니다.

 

이 코드를 웹페이지 HTML 편집기에 넣으면, 제공된 이미지를 사용하여

카테고리 그리드가 잘 표시됩니다.

 

필요한 경우, 더 많은 카테고리 이미지를 제공해주시면 코드를 확장할 수 있어요.