Ch.4 Box Model — 간격의 기술

카드 UI 만들기

박스 모델, 색상, 글꼴 속성을 조합하여 카드 UI를 완성할 수 있다border-radius와 box-shadow로 카드에 입체감을 줄 수 있다구조적인 CSS를 작성하여 이미지 영역, 제목, 설명, 버튼을 스타일링한다

지금까지 배운 CSS만으로 멋진 카드 UI를 만들 수 있습니다

Box Model, 색상, 글꼴, 셀렉터 — 여기까지 배운 것들을 총동원하면 실제 웹사이트에서 쓰이는 카드 컴포넌트를 직접 만들 수 있습니다.

여러 CSS 속성을 어떻게 조합해야 예쁜 카드가 될까?

border-radius + box-shadow + padding — 이 조합이 카드 UI의 핵심입니다.

article

핵심 내용

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

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

이미지 영역: 시각적 첫인상 — 배경색 또는 이미지

제목: 핵심 정보를 한 줄로

설명: 부가 정보 2~3줄

버튼: 행동 유도 (자세히 보기, 구매 등)

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

/* 둥근 모서리 */
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);
}

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

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

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

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

카드 UI 완성!

key

핵심 용어

⭕

border-radius

모서리를 둥글게 (12px~16px 추천)

🌗

box-shadow

카드 아래에 그림자 — 입체감 부여

✂️

overflow: hidden

카드 밖으로 삐져나오는 이미지를 잘라냄

✨

transition

hover 시 부드러운 변화 효과

edit_note

정리 노트

카드 UI 만들기

카드 UI 핵심 속성

border-radius
모서리 둥글기 — 8px~16px이 일반적
box-shadow
그림자 효과 — 카드의 입체감 표현
overflow: hidden
카드 영역 밖으로 넘치는 내용을 잘라냄

카드 레이아웃 팁

padding
내부 여백으로 콘텐츠에 숨 쉴 공간 확보
max-width
카드 최대 너비 제한으로 가독성 유지
★

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

check_circle

핵심 정리

  • 1카드 UI = 이미지 + 제목 + 설명 + 버튼
  • 2border-radius로 둥근 모서리, box-shadow로 입체 그림자
  • 3overflow: hidden으로 이미지가 카드 밖으로 넘치지 않게

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작