overflow: hidden으로 자르기

overflow: hidden은 상자 밖으로 넘친 것을 그 상자의 안쪽 여백 가장자리에서 잘라 그리지 않습니다. 둥근 모서리(border-radius)를 준 상자에 함께 주면, 안에 든 그림의 모서리까지 그 둥근 선을 따라 잘립니다.

그림 묶음의 모서리를 둥글게 깎았는데 그림이 네모난 채 모서리 밖으로 삐져나오는 일이 있습니다. border-radius는 상자 자신의 배경과 테두리를 둥글게 그릴 뿐, 안의 그림을 깎지는 않기 때문입니다. 자르는 일은 overflow가 따로 맡습니다. 그런데 자르기는 상자 안의 모든 것에 닿아, 지켜야 할 포커스 표시나 붙는 머리글까지 자를 수 있습니다.

그림 준비 중

1둥근 선 밖을 자르는 것은 overflow

<div class="picture-window">
  <img
    src="images/kimchi.svg"
    alt="김치볶음밥"
    width="200"
    height="150"
  />
</div>

.picture-window {
  width: 200px;
  border: 2px solid #1d1d1f;
  border-radius: 24px;
}

.picture-window img {
  display: block;
}

테두리는 둥글게 그려졌지만, 그림의 네 모서리는 네모난 채 둥근 테두리 위로 삐져나옵니다. overflow의 처음 값 visible은 넘친 것을 그대로 그리라는 뜻이라, 둥근 선 밖의 그림 모서리도 그려집니다. 그림에 준 display: block은 그림 아래 작은 틈을 없애 묶음과 그림의 크기를 맞춘 줄입니다(15단원에서 자세히). 묶음에 한 줄을 더합니다.

.picture-window {
  overflow: hidden;
}

이제 그림 모서리가 테두리 안쪽의 둥근 선을 따라 잘렸습니다. 자르는 선은 상자의 안쪽 여백 가장자리, 곧 테두리 안쪽 선이고, border-radius가 있으면 그 선도 둥급니다. 그림의 자리(위 10)와 너비(200)는 그대로입니다. 그림을 줄이거나 옮긴 것이 아니라, 선 밖을 그리지 않았을 뿐입니다. 넘친 글을 자를 때의 overflow는 10단원 둥근 모서리·그림자·넘치는 내용에서 봤습니다.

2자르기는 상자 안의 모든 것에 닿는다

그림이 링크라면 어떨까요. 아래 그림 묶음은 상세 페이지로 가는 링크이고, 묶음에 overflow: hidden이 있습니다. 잰 값은 Tab을 한 번 누른 뒤 잰 것입니다.

<div class="picture-window">
  <a href="kimchi.html">
    <img
      src="images/kimchi.svg"
      alt="김치볶음밥"
      width="200"
      height="150"
    />
  </a>
</div>

.picture-window {
  width: 200px;
  border-radius: 24px;
  overflow: hidden;
}

.picture-window a,
.picture-window img {
  display: block;
}

포커스는 링크에 왔고 포커스 표시를 그릴 조건(:focus-visible)도 켜졌습니다. 그런데 결과 화면에서 Tab으로 링크에 와도 포커스 표시가 보이지 않습니다. 포커스 표시는 링크 상자의 바깥 둘레에 그려지는데, 링크가 묶음을 꽉 채워 그 둘레가 모두 자르는 선 밖이기 때문입니다. 키보드로 쓰는 사람은 지금 어디에 있는지 알 수 없게 됩니다.

overflow: hidden은 그 상자 안의 붙는 머리글(sticky)도 멈추게 합니다. 자르는 상자는 제 안의 굴림 범위가 되어, 페이지를 굴려도 머리글이 그 상자를 기준으로 붙으려 하기 때문입니다(브라우저 규칙 8) — 자주 틀리는 곳 둘째에서 봅니다.

예제

그림 링크의 모서리는 그림에서 깎기

그림 하나만 든 묶음이라면 묶음을 자르지 않고 그림 자신을 둥글게 깎을 수 있습니다. 결과 화면을 펴기 전에, 이번에는 Tab으로 링크에 왔을 때 포커스 표시가 보일지 먼저 적어 보세요.

<div class="picture-window">
  <a href="kimchi.html">
    <img
      src="images/kimchi.svg"
      alt="김치볶음밥"
      width="200"
      height="150"
    />
  </a>
</div>

.picture-window {
  width: 200px;
}

.picture-window a,
.picture-window img {
  display: block;
}

.picture-window img {
  border-radius: 24px;
}

자주 틀리는 곳

틀린 생각: 둥근 카드에 overflow: hidden을 주면 그림 모서리만 잘린다.

<div class="card">
  <span class="badge">
    새 레시피
  </span>
  떡볶이
</div>

.card {
  position: relative;
  margin-top: 40px;
  padding: 16px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #f5f5f7;
}

.badge {
  position: absolute;
  top: -20px;
  left: 16px;
  background-color: #005bb5;
}

카드 위로 반쯤 걸치게 둔 배지가 카드 위쪽 선에서 잘렸습니다. 배지 가운데는 카드 밖이라 그려지지 않아, 그 자리의 맨 위 요소도 배지가 아니라 페이지 바탕(html)입니다. 자르기는 그림만 고르지 않고 그 상자 밖으로 나간 것을 모두 지웁니다.

맞는 규칙: overflow: hidden은 잘라도 되는 꾸밈만 든 상자에 줍니다. 상자 밖으로 나가야 하는 것(배지 · 포커스 표시)이 들었다면, 자르지 말고 그림에 border-radius를 줍니다. 넘친 글을 감추는 일도 같아서, 잘린 글은 읽을 수 없습니다(10단원).

틀린 생각: 머리글을 담은 페이지 묶음에 overflow: hidden을 줘도 sticky는 그대로 붙는다.

<div class="page">
  <div class="head">머리글</div>
  <div class="main">본문</div>
</div>

.page {
  overflow: hidden;
}

.head {
  position: sticky;
  top: 0;
  height: 40px;
}

.main {
  height: 1600px;
}

페이지를 400 굴렸더니 머리글이 붙지 않고 함께 올라갔습니다(처음 8에서 −392로). .page가 자르는 상자라 머리글은 페이지가 아니라 .page 안의 굴림에 붙으려 하는데, .page는 굴러가지 않습니다.

맞는 규칙: sticky 머리글을 담은 조상에는 overflow: hidden을 주지 않습니다. 붙지 않으면 조상의 overflow부터 봅니다.

확인 문제

1. 1절 둘째 예제(overflow: hidden을 더한 꼴)에서 border-radius: 24px을 0으로 바꿨습니다. overflow: hidden은 그대로입니다. 그림 모서리는 어떻게 보일까요?

<div class="picture-window">
  <img
    src="images/kimchi.svg"
    alt="김치볶음밥"
    width="200"
    height="150"
  />
</div>

.picture-window {
  width: 200px;
  border: 2px solid #1d1d1f;
  border-radius: 0;
  overflow: hidden;
}

.picture-window img {
  display: block;
}

• ① 둥글게 잘린다
• ② 네모로, 테두리 안에 딱 맞게 보인다
• ③ 그림이 사라진다

2. 그림 묶음 밖으로 나온 그림 모서리를 묶음의 둥근 선 밖에서 자르려고 합니다. ____ 자리에 들어갈 선언을 쓰세요.

.picture-window {
  width: 200px;
  border-radius: 24px;
  ____
}

.picture-window {
  width: 200px;
  border-radius: 24px;
  overflow: hidden;
}

3. 플로우 카페 메뉴판의 둥근 메뉴 칸입니다. 칸 안에 '주문' 링크가 꽉 차 있습니다. 키보드 Tab으로 '주문'에 오면 포커스 표시가 보이지 않는다는 말을 들었습니다. 링크의 둥근 모양은 지키면서 포커스 표시가 보이게 하려면 몇 번 줄을 어떻게 고칠까요?

<div class="menu-item">
  <a href="#latte">주문</a>
</div>

.menu-item {
  width: 160px;
  border-radius: 12px;
  overflow: hidden;
}

.menu-item a {
  display: block;
  padding: 16px;
  background-color: #005bb5;
  color: #ffffff;
}

<div class="menu-item">
  <a href="#latte">주문</a>
</div>

.menu-item {
  width: 160px;
}

.menu-item a {
  display: block;
  padding: 16px;
  border-radius: 12px;
  background-color: #005bb5;
  color: #ffffff;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 2절 예제를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). Tab을 눌러 포커스 표시가 보이는지 본 뒤, overflow: hidden; 줄을 지우면 그림 모서리와 포커스 표시가 각각 어떻게 될지 먼저 적고 저장 · 새로고침해 맞춰 봅니다.