웹사이트에서 상품을 소개할 때 가장 많이 사용되는 UI 요소 중 하나가 바로 제품 카드(Product Card)입니다. CSS를 활용하면 이미지, 제품명, 가격, 구매 버튼이 포함된 세련된 카드를 간단한 코드로 완성할 수 있습니다.
아래 예제에서는 그림자 효과, 호버(hover) 애니메이션, 반응형 너비 등 실무에서 바로 활용할 수 있는 스타일 기법을 함께 살펴봅니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.productCard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
background-color: rgb(190, 224, 224);
}
.productDetails {
color: rgb(26, 0, 51);
font-weight: bold;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: rgb(23, 31, 102);
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
button:hover, a:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<h2 style="text-align:center">제품 카드 예제</h2>
<div class="productCard">
<img src="https://images.pexels.com/photos/1152077/pexels-photo-1152077.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
style="width:100%"/>
<h1>가죽 가방</h1>
<p class="productDetails">프리미엄 품질</p>
<p>가격 50$</p>
<p><button>지금 구매하기</button></p>
</div>
</body>
</html>코드 핵심 요소 설명
1. 카드 컨테이너 (.productCard)
box-shadow 속성으로 카드에 입체적인 그림자를 부여하고, max-width: 300px와 margin: auto를 조합해 화면 중앙에 정렬된 고정 폭 카드를 만듭니다. 배경색은 연한 청록 계열(rgb(190, 224, 224))로 지정했습니다.
2. 제품 정보 스타일 (.productDetails)
제품의 특징을 나타내는 문구에는 진한 남보라색과 굵은 글씨체를 적용해 시각적으로 강조했습니다. 글자 크기는 18px로 설정하여 가독성을 높였습니다.
3. 구매 버튼 (button)
버튼은 카드 전체 너비(width: 100%)를 차지하도록 하여 클릭 영역을 넓혔습니다. cursor: pointer로 마우스 오버 시 손가락 모양 커서가 표시되어 클릭 가능한 요소임을 직관적으로 알려줍니다.
4. 호버(Hover) 효과
:hover 선택자를 사용해 버튼과 링크 위에 마우스를 올리면 투명도가 0.7로 변경됩니다. 이러한 미세한 인터랙션이 사용자 경험(UX)을 크게 향상시킵니다.
실행 결과
위 코드를 실행하면 다음과 같은 제품 카드가 화면 중앙에 출력됩니다.
활용 팁
- 반응형 대응: 여러 개의 카드를 나열할 때는 Flexbox나 Grid 레이아웃을 함께 사용하면 화면 크기에 따라 자동으로 정렬됩니다.
- 그림자 조절:
box-shadow의 값(오프셋, 흐림 정도, 색상)을 조정해 카드의 입체감을 자유롭게 연출할 수 있습니다. - 트랜지션 추가:
transition속성을 버튼에 적용하면 호버 효과가 더욱 부드럽게 동작합니다.
이처럼 CSS만으로도 별도의 프레임워크 없이 깔끔하고 전문적인 제품 카드를 쉽게 구현할 수 있습니다. 위 코드를 복사해 프로젝트에 적용한 후, 색상과 폰트를 브랜드에 맞게 커스터마이징해 보세요.