마케터 실무도구/Genspark 이미지 생성 AI
반응형 인테리어 쇼핑몰 디자인: 카테고리 메뉴와 제품 그리드 구성하기
신마성
2025. 5. 5. 14:57
이 코드는 웹페이지 카테고리 그리드를 만들기 위한 코드입니다.
이미지를 [ 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 편집기에 넣으면, 제공된 이미지를 사용하여
카테고리 그리드가 잘 표시됩니다.
필요한 경우, 더 많은 카테고리 이미지를 제공해주시면 코드를 확장할 수 있어요.