🃏
CSS 카드 레이아웃 가이드
카드 UI는 정보를 깔끔하게 정리하는 핵심 패턴입니다. 그림자, 레이아웃, 구조화 방법을 배워보세요.
1기본 카드 구조
카드는 콘텐츠를 담는 컨테이너입니다. border, border-radius, padding, box-shadow를 조합해서 만듭니다.
미리보기HTMLCSS
HTML
<div class="card">
<h3>카드 제목</h3>
<p>카드 내용이 들어갑니다.</p>
</div>CSS
.card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; color: #6b7280; font-size: 14px; }카드에는 항상 미세한 box-shadow를 넣어주세요. 평면적인 디자인보다 훨씬 세련되어 보입니다.
2Flexbox로 카드 내부 배치
카드 안에 여러 요소를 배치할 때 Flexbox를 사용합니다. display: flex와 flex-direction으로 가로/세로 배치를 제어합니다.
미리보기HTMLCSS
HTML
<div class="profile-card">
<div class="avatar">👤</div>
<div class="info">
<h4>사용자 이름</h4>
<p>웹 개발자</p>
</div>
</div>CSS
.profile-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.avatar {
width: 48px; height: 48px;
border-radius: 50%;
background: #f3f4f6;
display: flex; align-items: center; justify-content: center;
font-size: 24px;
}
.info h4 { margin: 0; font-size: 16px; }
.info p { margin: 4px 0 0; color: #9ca3af; font-size: 13px; }gap 속성을 사용하면 margin 없이 요소 간 간격을 깔끔하게 조절할 수 있습니다.
3호버 효과와 트랜지션
카드에 호버 효과를 추가하면 인터랙티브한 느낌을 줍니다. transform과 box-shadow를 조합하세요.
미리보기HTMLCSS
HTML
<div class="hover-card">
<h3>호버해보세요</h3>
<p>마우스를 올려보세요!</p>
</div>CSS
.hover-card {
padding: 24px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
cursor: pointer;
transition: all 0.2s ease;
}
.hover-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
border-color: #d1d5db;
}
.hover-card h3 { margin: 0 0 8px; }
.hover-card p { margin: 0; color: #6b7280; font-size: 14px; }transition: all 0.2s ease는 모든 CSS 변화를 부드럽게 만드는 만능 코드입니다.