답변 3개
채택된 답변
+20 포인트
댓글을 작성하려면 로그인이 필요합니다.
8개월 전
다음 코드가 도움이 될지 모르겠습니다.
</p>
<p><style>
:root {
--wrap-height: 30em;
--wrap-el-gap: 0.2em;
}
* {
box-sizing: border-box;
}</p>
<p>
.wrap {
background-color: #ededed;
height: var(--wrap-height);
display: inline-flex;
flex-flow: column wrap;
gap: var(--wrap-el-gap);
}</p>
<p>.wrap .el {
border: 1px solid #ccc;
width: 10em;
}
.wrap .el.sz-1 { height: calc(var(--wrap-height) * 0.1); }
.wrap .el.sz-2 { height: calc(var(--wrap-height) * 0.2); }
.wrap .el.sz-3 { height: calc(var(--wrap-height) * 0.3); }
.wrap .el.sz-half { height: calc(var(--wrap-height) * 0.5 - calc(var(--wrap-el-gap) * 0.5)); }
</style></p>
<p> </p>
<p><div class="wrap">
<div class="el sz-1">1</div>
<div class="el sz-2">2</div>
<div class="el sz-3">3</div>
<div class="el sz-half">4</div>
<div class="el sz-half">5</div>
<div class="el sz-3">6</div>
<div class="el sz-3">7</div>
<div class="el sz-2">8</div>
<div class="el sz-1">9</div>
<div class="el sz-1">10</div>
<div class="el sz-2">11</div>
<div class="el sz-1">12</div>
<div class="el sz-2">13</div>
</div></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
8개월 전
아래는 제시하신 이미지에 따른,
상단에 "자물통 모음" 상품을 배치하고,
그 아래에 2~3열 형태로 상품 카드들을 정렬하여
이미지를 비롯한 상품 정보를 표시한 뒤,
맨 아래에 "제품 더보기" 버튼을 두는 HTML과 CSS 코드 예시입니다.
</p>
<p><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자물통 레이아웃 예시</title>
<style>
/* 전체 컨테이너 설정 */
.container {
display: grid;
grid-template-columns: 1fr; /* 기본적으로 한 열 */
gap: 16px; /* 요소 간 간격 */
max-width: 400px; /* 컨테이너 최대 너비 */
margin: 0 auto; /* 중앙 정렬 */
}</p>
<p> /* 첫 번째 아이템(상단 배너) 설정 */
.item:first-child {
grid-column: span 2; /* 두 칸 차지(실제 1열 구조에서도 전체를 차지) */
text-align: center;
}</p>
<p> /* 상품 목록을 담는 영역 */
.products {
display: grid;
/* 화면 크기에 따라 열이 자동으로 늘어남 (2열 ~ 3열) */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
}</p>
<p> /* 개별 상품 카드 스타일 */
.product-card {
background: #fff;
padding: 12px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
}</p>
<p> /* 상품 카드 내 이미지 스타일 */
.product-card img {
width: 100%;
height: auto;
border-radius: 5px;
}</p>
<p> /* '제품 더보기' 버튼 스타일 */
.more-button {
display: block;
text-align: center;
padding: 10px;
background: #f5f5f5;
border-radius: 5px;
margin-top: 10px;
text-decoration: none; /* 링크 밑줄 제거 */
color: #333;
}
</style>
</head>
<body></p>
<p><div class="container">
<!-- 상단 대표 영역(배너) -->
<div class="item">
<img src="lock.jpg" alt="자물통 모음" />
<h3>자물통 모음</h3>
</div>
<!-- 상품 리스트 영역 -->
<div class="products">
<!-- 상품 카드 1 -->
<div class="product-card">
<img src="lock1.jpg" alt="PC-50" />
<p>PC-50 메가 썬클래식 50A</p>
<p>[도매가격 (VAT 포함)]</p>
</div>
<!-- 상품 카드 2 -->
<div class="product-card">
<img src="lock2.jpg" alt="덕원 DA50" />
<p>덕원 DA50 다이얼 자물쇠</p>
<p>[도매가격 (VAT 포함)]</p>
</div>
<!-- 상품 카드 3 -->
<div class="product-card">
<img src="lock3.jpg" alt="협신자기" />
<p>협신자기(대)</p>
<p>[도매가격 (VAT 포함)]</p>
</div>
</div>
<!-- 추가 상품 확인 버튼 -->
<a href="#" class="more-button">제품 더보기 →</a>
</div></p>
<p></body>
</html></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인