CSS를 활용하면 이메일 클라이언트나 메신저 앱에서 자주 보이는 연락처 칩(Contact Chip)을 아주 간단하게 만들 수 있습니다. 연락처 칩은 사용자의 프로필 이미지와 이름을 알약(pill) 모양의 작은 요소 안에 담아 표시하는 UI 컴포넌트로, 메일 수신인 목록, 태그 선택, 사용자 목록 등 다양한 곳에서 활용됩니다.
예제 코드
<!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:25px;
}
.chip {
display: inline-block;
padding: 0 25px;
height: 50px;
font-size: 20px;
font-weight: bold;
line-height: 50px;
border-radius: 25px;
background-color: #6a0074;
color: white;
}
.chip img {
float: left;
margin: 0 10px 0 -25px;
height: 50px;
width: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Contact chip Example</h1>
<div class="chip">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909__340.png">
James Anderson
</div>
<div class="chip">
<img src="https://cdn.pixabay.com/photo/2014/03/24/17/19/teacher-295387__340.png">
Britney Smith
</div>
</body>
</html>코드 핵심 포인트
위 예제에서 연락처 칩의 모양을 완성하는 핵심 CSS 속성은 다음과 같습니다.
.chip 클래스
display: inline-block;— 칩이 텍스트 흐름 안에서 가로로 나란히 배치되면서도 높이와 패딩을 적용할 수 있게 합니다.border-radius: 25px;— 높이(50px)의 절반 값으로 지정해 좌우가 둥근 알약 형태를 만듭니다.line-height: 50px;— 요소 높이와 동일하게 설정하여 텍스트를 세로 중앙에 정렬합니다.background-color와color— 배경색과 글자색을 지정해 칩의 시각적 스타일을 완성합니다.
.chip img 스타일
float: left;— 프로필 이미지를 칩의 왼쪽에 배치합니다.margin: 0 10px 0 -25px;— 왼쪽 마진을 음수로 주어 이미지가 칩의 왼쪽 끝에 딱 붙도록 처리합니다.border-radius: 50%;— 사각형 이미지를 원형 프로필로 변환합니다.
실행 결과
위 코드를 실행하면 보라색 배경의 알약 모양 칩 안에 원형 프로필 이미지와 이름이 함께 표시되며, 두 개의 연락처 칩이 나란히 출력됩니다.
