웹 페이지에서 카드(Card)는 프로필 정보, 제품, 블로그 게시물 등을 보여줄 때 가장 널리 사용되는 UI 요소 중 하나입니다. 이번 글에서는 HTML과 CSS만을 사용하여 이미지와 텍스트가 포함된 카드를 만드는 방법을 예제 코드와 함께 살펴보겠습니다.
CSS 카드의 핵심 요소
카드 디자인에서 가장 중요한 속성은 바로 box-shadow(그림자)입니다. 그림자를 활용하면 평면적인 요소에 입체감을 부여하여 카드가 화면 위로 떠 있는 듯한 효과를 낼 수 있습니다. 또한 :hover 선택자를 함께 사용하면 마우스 포인터를 올렸을 때 그림자가 더 짙고 넓어지는 인터랙티브한 반응형 효과도 간단하게 구현할 수 있습니다.
예제 코드
다음은 CSS로 카드를 만드는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin:20px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
width: 40%;
max-width: 300px;
background-color: rgb(56, 185, 185);
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.Designation {
padding: 2px 16px;
background-color: rgb(107, 43, 167);
color:white;
}
.card img{
width: 300px;
height: 250px;
}
</style>
</head>
<body>
<h1>Card Example</h1>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2014/03/24/17/19/teacher-295387__340.png">
<div class="Designation">
<h3>Britney Smith</h3>
<p>Senior Designer</p>
</div>
</div>
</body>
</html>
코드 설명
- .card — box-shadow로 은은한 그림자를 적용하고, width와 max-width로 카드의 크기를 지정하며, background-color로 배경색을 설정합니다.
- .card:hover — 마우스를 올리면 그림자가 더 크고 진하게 확장되어 카드가 살짝 떠오르는 듯한 효과를 줍니다.
- .Designation — 카드 하단에 이름과 직함이 표시되는 영역으로, padding으로 여백을 주고 배경색과 흰색 글자색을 지정했습니다.
- .card img — 카드 상단에 들어갈 이미지의 가로·세로 크기를 고정하여 레이아웃이 일정하게 유지되도록 합니다.
실행 결과
위 코드를 실행하면 그림자가 적용된 카드 안에 이미지와 이름, 직함이 표시되며, 마우스를 올리면 그림자가 깊어지는 효과를 확인할 수 있습니다.
