topic★★★★★난이도 · 약 20분

카드 UI 만들기

border-radius + box-shadow + padding — Box Model, 색상, 글꼴을 총동원하여 카드 UI를 완성한다.

#카드UI#border-radius#box-shadow#overflow#transition
왜 배우는가

카드 UI는 웹에서 가장 많이 쓰이는 패턴이다. 여기까지 배운 것들을 총동원하면 실제 웹사이트에서 쓰이는 카드 컴포넌��를 직접 만들 수 있다.

��드 UI는 웹에서 가장 많이 쓰이는 패턴입니다

쇼핑몰 상품, 블로그 글, 프로필 — 정보를 한 덩어리로 묶어 보여주는 것이 카드 UI입니다. 하나의 카드 안에 이미지, 제목, 설명, 버튼이 들어갑니다.

1. 이미지 영역 — 시각적 첫인상 2. 제목 — 핵심 정보를 한 줄로 3. 설명 — 부가 정보 2~3줄 4. 버튼 �� 행동 유도 (자세히 보기, 구매 등)

둥근 모서리와 그림자로 카드에 입체감을 줍니다

css
/* 둥근 모서리 */
border-radius: 12px;   /* 네 모서리 모두 */
border-radius: 12px 12px 0 0; /* 위만 둥글게 */

/* 그림자 */
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
/*        x  y  blur  색상(투명도) */

/* hover 시 그림자 강화 */
.card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

border-radius로 둥근 모서리, box-shadow로 그림자, :hover로 마우스 올릴 때 효과.

속성설명
border-radius모서리를 둥글게 (12px~16px 추천)
box-shadow카드 아래에 그림자 — 입체감 부여
overflow: hidden카드 밖으로 삐져나오는 이미지를 잘라냄
transitionhover 시 부드러운 변화 효과

이미지, 제목, 설명, 버튼이 있는 완성형 카드를 만들어봅시다

css
.card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  max-width: 320px;
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.card-image {
  background: #4ECDC4;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2.5rem;
}

.card-body {
  padding: 20px;
}

.card-body h3 {
  margin: 0 0 8px 0;
  color: #1A1A2E;
  font-size: 1.25rem;
}

.card-body p {
  margin: 0 0 16px 0;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
}

.card-btn {
  display: inline-block;
  background: #4ECDC4;
  color: white;
  padding: 8px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
}

.card-btn:hover {
  background: #3dbdb5;
}

이미지 영역, 카드 본문, 버튼까지 포함한 완성형 카드 CSS.

속성설명
border-radius모서리 둥글기 — 8px~16px이 일반적
box-shadow그림자 효과 — 카드의 입체감 표현
overflow: hidden카드 영역 밖으로 넘치는 내용을 잘라냄
팁설명
padding내부 여백으로 콘텐츠에 숨 쉴 공간 확보
max-width카드 최대 너비 제한으로 가독성 유지

box-shadow와 border-radius만으로도 깔끔한 카드 UI를 만들 수 있습니다.

실기 드릴 3문항
edit실기 드릴 · 단답형

카드에 둥근 모서리를 적용���는 CSS 속성은?

space_bar실기 드릴 · 빈칸 채우기

카드 아래에 그림자를 추가하는 CSS 속성은 ___이다.

check_circle실기 드릴 · OX

box-sizing: border-box를 설정하면 width에 padding과 border가 포함된다.