둥근 모서리·그림자·넘치는 내용

border-radius는 상자 모서리를 둥글게 깎는 반지름이고, 아주 크게 주면 양 끝이 반원인 알약 모양이 됩니다. box-shadow는 가로 · 세로 · 흐림 · 색 네 값으로 상자 밑에 그림자를 그립니다. overflow는 상자 밖으로 넘친 내용을 보일지, 자를지, 굴려 볼 칸으로 만들지 정합니다.

레시피 카드를 바탕에서 살짝 띄워 보이게 하려면 모서리와 그림자를 씁니다. 그런데 카드 높이를 맞추려고 height를 정해 두면, 글이 길어진 카드에서 글이 카드 밖으로 넘쳐 아래 요소와 겹칩니다. 이 레슨은 모서리 · 그림자를 주는 값과, 넘친 내용을 다루는 세 값을 봅니다.

그림 준비 중

1border-radius — 모서리의 반지름

border-radius: 8px은 네 모서리를 반지름 8px인 원의 호로 깎습니다. 값이 클수록 더 둥글고, 상자 높이의 반보다 크게 주면 양 끝이 반원이 됩니다. 배지는 이 성질로 999px처럼 넉넉히 큰 값을 줍니다.

<span class="badge">한식</span>

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: #d6ecff;
}

배지가 양 끝이 둥근 알약 모양이 되었습니다. 잰 값은 적은 999px 그대로지만, 그릴 때는 상자 높이의 반만큼만 깎입니다. 배경색과 테두리도 깎인 모서리를 따라 그려집니다.

2box-shadow — 가로 · 세로 · 흐림 · 색

<article class="recipe-card">
  <h2>김치볶음밥</h2>
</article>

.recipe-card {
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px #d2d2d7;
}

그림자는 상자와 같은 모양으로 상자 밑에 그려지고, 아래로 2px 내려가 8px만큼 흐려졌습니다. Computed 창은 색을 앞에, 숫자 넷(가로 · 세로 · 흐림 · 퍼짐)을 뒤에 적습니다 — 적지 않은 넷째 숫자 퍼짐은 0입니다. 그림자는 그려진 모습일 뿐 상자가 차지하는 너비나 이웃의 자리를 바꾸지 않습니다.

3overflow — 상자 밖으로 넘친 내용

높이를 정한 상자에 글이 더 들어오면, 글은 상자 밖으로 넘칩니다. 넘친 글을 어떻게 할지 overflow가 정합니다.

<div class="memo">
  찬밥은 미리 꺼내 두면 잘 볶입니다.
  김치는 잘게 썰어 먼저 볶습니다.
  달걀은 마지막에 올립니다.
</div>
<p>재료</p>

.memo {
  width: 160px;
  height: 40px;
  overflow: auto;
}

상자는 40px 그대로이고, 넘친 글은 상자 안을 굴려 끝까지 읽습니다. 아래 '재료'와 겹치지 않습니다. 굴려 볼 칸이 꼭 필요한 곳(긴 목록을 정해진 자리에 둘 때)이 아니면 높이를 정하지 않는 편이 낫습니다 — 자주 틀리는 곳 첫째.

예제

둥근 카드와 알약 배지

레시피 카드에 둥근 모서리와 옅은 그림자를, 분류에는 알약 배지를 줍니다.

<article class="recipe-card">
  <h2>김치볶음밥</h2>
  <span class="badge">한식</span>
</article>

.recipe-card {
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px #d2d2d7;
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: #f5f5f7;
}

• 카드는 모서리 12px로 부드럽고, 아래로 2px 내려간 옅은 그림자 덕에 바탕에서 살짝 떠 보입니다.
• 높이를 정하지 않아 요리 이름이 길어져도 카드가 글만큼 늘어납니다.

자주 틀리는 곳

틀린 생각: 카드 높이는 정해 두어야 가지런하다.

<div class="memo">
  찬밥은 미리 꺼내 두면 잘 볶입니다.
  김치는 잘게 썰어 먼저 볶습니다.
  달걀은 마지막에 올립니다.
</div>
<p>재료</p>

.memo {
  width: 160px;
  height: 40px;
}

상자는 40px에서 멈추고, 처음 값 visible이라 넘친 글이 상자 밖으로 그대로 그려져 아래 '재료'와 겹칩니다. 글은 화면이 좁거나 글자를 키우면 더 많은 줄로 꺾입니다.

맞는 규칙: 글이 드는 상자는 height 대신 min-height로 '적어도 이만큼'만 정합니다. 글이 짧으면 그 높이, 길면 글만큼 늘어납니다.

틀린 생각: 그림자는 진한 불투명 회색이면 어디서나 그림자로 보인다.

<article class="recipe-card">
  <h2>김치볶음밥</h2>
</article>

body {
  background-color: #1d1d1f;
  color: #ffffff;
}

.recipe-card {
  padding: 16px;
  box-shadow: 0 2px 8px #d2d2d7;
}

어두운 바탕에서는 그림자가 바탕보다 밝은 회색이라, 그림자가 아니라 카드 둘레의 밝은 빛 테처럼 보입니다. 불투명한 색은 바닥 색과 상관없이 그 색 그대로 칠해지기 때문입니다.

맞는 규칙: 그림자 색은 바닥이 비치는 반투명 색으로 씁니다 — 11단원 반투명한 색에서 봅니다.

틀린 생각: 넘친 글은 overflow: hidden으로 감추면 끝난다.

<div class="notice">
  사진 동아리 모임은 금요일입니다.
  장소는 2층 동아리방입니다.
</div>

.notice {
  width: 160px;
  height: 40px;
  overflow: hidden;
}

겹침은 사라졌지만, 40px 아래로 넘친 글이 잘려 장소를 읽을 수 없습니다. 오류도 표시도 없어, 잘린 줄 모르고 지나치기 쉽습니다.

맞는 규칙: hidden은 내용을 버립니다. 넘침의 원인(고정 높이)을 풀고, 정해진 자리에 둬야 할 때만 auto로 굴려 보게 합니다.

확인 문제

1. 예제의 카드 그림자 box-shadow: 0 2px 8px #d2d2d7⁠에서 첫째 값 0을 4px로 바꾸면 그림자는 어떻게 보일까요?

• ① 오른쪽으로 4px 옮겨져, 카드의 오른쪽과 아래 가장자리에 보인다.
• ② 왼쪽으로 4px 옮겨져, 카드의 왼쪽과 아래 가장자리에 보인다.
• ③ 자리는 그대로이고 4px 더 흐려진다.

<article class="recipe-card">
  <h2>김치볶음밥</h2>
</article>

.recipe-card {
  padding: 16px;
  border-radius: 12px;
  box-shadow:
    4px 2px 8px #d2d2d7;
}

2. 동아리 배지를 양 끝이 반원인 알약 모양으로 만드는 선언을 ____ 자리에 쓰세요.

<span class="tag">모집 중</span>

.tag {
  display: inline-block;
  padding: 4px 12px;
  background-color: #d6ecff;
  ____
}

<span class="tag">
  모집 중
</span>

.tag {
  display: inline-block;
  padding: 4px 12px;
  background-color: #d6ecff;
  border-radius: 999px;
}

3. 여행 일정 칸의 글 끝이 잘려 보이지 않습니다. Computed 창에서 칸을 보니 잰 값 칸과 같습니다. 글이 길어져도 다 보이게 하려면 어떻게 고칠까요?

<div class="trip">
  첫날 부산에 도착합니다.
  저녁은 시장에서 먹습니다.
</div>

.trip {
  width: 160px;
  height: 40px;
  overflow: hidden;
}

<div class="trip">
  첫날 부산에 도착합니다.
  저녁은 시장에서 먹습니다.
</div>

.trip {
  width: 160px;
  min-height: 40px;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제의 HTML과 CSS를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). .badge의 border-radius를 999px · 8px · 0으로 바꾸기 전에 배지 모양을 먼저 적고, 저장하고 새로고침해 맞춰 봅니다.