웹 페이지에서 사용자 정보를 보여줄 때 가장 많이 활용되는 UI 요소 중 하나가 바로 프로필 카드(Profile Card)입니다. HTML 구조에 몇 가지 CSS 속성만 더하면 그림자 효과가 있는 세련된 카드 형태의 프로필을 손쉽게 만들 수 있습니다.
아래 예제에서는 box-shadow, max-width, :hover 같은 핵심 CSS 속성을 활용해 프로필 카드를 구현하는 방법을 살펴보겠습니다.
CSS 프로필 카드 예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.profileCard {
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);
}
.Designation {
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">User Profile profileCard Example</h2>
<div class="profileCard">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="John" style="width:100%" />
<h1>John Doe</h1>
<p class="Designation">WebDeveloper</p>
<p>Michigan</p>
<p><button>Contact</button></p>
</div>
</body>
</html>주요 CSS 속성 설명
- box-shadow:
0 4px 8px 0 rgba(0, 0, 0, 0.2)값으로 카드 아래에 부드러운 그림자를 만들어 입체감을 줍니다. - max-width: 카드의 최대 너비를 300px로 제한하고,
margin: auto로 화면 중앙에 배치합니다. - :hover 효과: 버튼이나 링크에 마우스를 올리면
opacity: 0.7이 적용되어 자연스러운 반응형 인터랙션을 제공합니다. - button 스타일:
width: 100%로 카드 전체 폭을 차지하는 연락처(Contact) 버튼을 만듭니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 프로필 카드가 화면 중앙에 나타납니다.
이 기본 구조를 응용하면 소셜 미디어 아이콘 추가, 카드 호버 시 확대 효과, 다크 모드 스타일 적용 등 다양한 디자인으로 확장할 수 있습니다.