box-decoration-break - 잘린 요소를 아름답게 만드는 법

인라인 요소에 예쁜 배경과 테두리를 주었는데, 줄바꿈되면서 어색하게 잘려본 적 있으신가요?

<span style="background: linear-gradient(yellow, green); padding: 10px;">
  이 텍스트가 길어서 여러 줄로 나뉘면...
</span>

줄바꿈이 일어나면 그라디언트가 이상하게 잘리고, 테두리도 끝부분만 적용되는 모습을 보게 됩니다. “왜 첫 줄에만 패딩이 없지?”, “그라디언트가 왜 이렇게 끊겨 보이지?” 같은 의문이 들죠.

box-decoration-break 속성은 바로 이 문제를 해결합니다. 여러 줄로 나뉜 요소의 각 조각을 어떻게 꾸밀지 결정하는 속성입니다.

왜 이 속성이 필요한가?

브라우저는 기본적으로 효율성을 선택합니다. 요소가 여러 줄로 나뉘어도 하나의 연속된 박스처럼 렌더링하죠. 이게 대부분의 경우 자연스럽습니다.

하지만 디자인적으로 각 줄이 독립적인 박스처럼 보여야 할 때가 있습니다:

실제 사용 사례

하이라이트된 텍스트: 형광펜으로 줄 그은 것처럼 각 줄마다 둥근 모서리가 필요할 때
태그/라벨: 여러 줄에 걸친 태그가 각 줄마다 완전한 박스 형태여야 할 때
인용문 강조: 각 줄마다 그림자와 테두리가 독립적으로 적용되어야 할 때

MDN 문서에 따르면, 이 속성은 “엘리먼트의 조각이 여러 라인, 컬럼 또는 페이지에서 어떻게 렌더링되어야 하는지를 지정”합니다.

먼저, 기초부터 이해하기

box-decoration-break가 어떻게 작동하는지 이해하려면, 브라우저가 줄바꿈을 어떻게 처리하는지 알아야 합니다.

브라우저의 기본 동작 (slice)

인라인 요소가 여러 줄로 나뉠 때, 브라우저는 다음과 같이 처리합니다:

먼저 전체를 하나의 박스로 렌더링
그 다음 각 라인에 맞게 조각으로 나눔
배경과 테두리는 연속된 것처럼 보임

┌─────────────────────────────┐
│ 전체 박스 (하나로 렌더링)    │
│ 배경, 테두리, 그림자 적용     │
└─────────────────────────────┘
        ↓ 줄바꿈 발생
┌─────────────────┐  ← 첫 번째 줄 조각
│ 이 텍스트가 길어│
└─────────────────┘

┌─────────────────┐  ← 두 번째 줄 조각
│서 여러 줄로 나뉘│
└─────────────────┘

배경은 연속되고, 양쪽 끝만 테두리가 있음

이것이 box-decoration-break: slice의 동작 방식입니다. 그리고 이게 기본값이죠.

독립적 렌더링 (clone)

반대로 box-decoration-break: clone을 사용하면:

각 조각이 독립적인 박스로 렌더링
각 조각마다 완전한 테두리, 패딩, 배경 적용
마치 각 줄이 별도의 요소인 것처럼 보임

┌─────────────────┐  ← 완전한 박스 1
│ 이 텍스트가 길어│  (모든 스타일 독립 적용)
└─────────────────┘

┌─────────────────┐  ← 완전한 박스 2
│서 여러 줄로 나뉘│  (모든 스타일 독립 적용)
└─────────────────┘

각 조각마다 완전한 테두리, 패딩, 배경!

slice vs clone: 시각적 비교

실제 예제로 차이를 명확히 보겠습니다.

예제: 그라디언트 배경 + 테두리

span {
  background: linear-gradient(to bottom right, yellow, green);
  border: 3px solid blue;
  padding: 10px;
  border-radius: 1rem;
}

❌ slice (기본값)

span {
  box-decoration-break: slice; /* 기본값 */
}

결과:

┌──────────────────────┐
│ yellow gradient      │ ← 그라디언트 시작
│                      │
├──────────────────────  ← 줄바꿈 (테두리 끊김)

  ──────────────────┐
│       green       │ ← 그라디언트 끝
└───────────────────┘

문제점:

❌ 그라디언트가 연속되어 자연스럽지 않음
❌ 첫 줄 끝과 둘째 줄 시작에 테두리 없음
❌ 패딩이 양 끝에만 적용됨
❌ border-radius가 양 끝에만 적용됨

✅ clone

span {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* Safari 지원 */
}

결과:

┌──────────────────────┐
│ yellow → green       │ ← 완전한 그라디언트
└──────────────────────┘

┌──────────────────────┐
│ yellow → green       │ ← 또 다른 완전한 그라디언트
└──────────────────────┘

장점:

✅ 각 줄마다 완전한 그라디언트
✅ 모든 면에 테두리
✅ 모든 면에 패딩
✅ 모든 모서리에 border-radius
✅ 각 줄이 독립적인 박스처럼 보임

예제: box-shadow

span {
  box-shadow: 8px 8px 10px 0px deeppink;
  box-decoration-break: clone;
}

slice (기본값):

전체 요소에 하나의 그림자만 적용
줄바꿈 부분에서 그림자가 이상하게 보임

clone:

각 줄마다 독립적인 그림자
각 조각이 떠 있는 것처럼 보임

영향을 받는 속성들

MDN 문서에 따르면, box-decoration-break는 다음 속성들에 영향을 줍니다:

속성	slice 동작	clone 동작
`background`	연속됨	각 조각마다 새로 시작
`border`	양 끝에만	모든 면에 적용
`border-image`	연속됨	각 조각마다 독립
`box-shadow`	전체에 하나	각 조각마다 하나씩
`clip-path`	전체 적용	각 조각마다 적용
`margin`	양 끝에만	모든 면에 적용
`padding`	양 끝에만	모든 면에 적용

주의: border-radius도 각 조각마다 독립적으로 적용됩니다!

실전 활용 예제

실무에서 자주 사용되는 패턴들을 살펴봅시다.

1. 하이라이트 마커 효과

형광펜으로 그은 것처럼 보이게 하려면:

.highlight {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 10%,
    #fff59d 10%,
    #fff59d 90%,
    transparent 90%
  );
  padding: 0.2em 0.4em;
  border-radius: 0.3em;

  /* ✨ 핵심! */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

HTML:

<p>
  이 문장에서 <span class="highlight">이 부분이 중요한 내용인데
  여러 줄에 걸쳐 있습니다</span>라고 강조하고 싶어요.
</p>

효과: 각 줄마다 둥근 모서리와 패딩이 적용되어 진짜 형광펜처럼 보입니다!

2. 코드 인라인 하이라이트

code {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Consolas', monospace;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

Before (slice):

줄바꿈 시 패딩과 테두리가 끊김
코드 블록처럼 보이지 않음

After (clone):

각 줄마다 완전한 박스
전문적인 코드 하이라이트 느낌

3. 멀티라인 태그/라벨

.tag {
  display: inline;
  background: #e3f2fd;
  color: #1976d2;
  padding: 0.25em 0.75em;
  border-radius: 9999px; /* 완전한 둥근 모서리 */
  border: 2px solid #1976d2;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

사용 예:

<span class="tag">이것은 아주 긴 태그인데 여러 줄로 나뉠 수 있습니다</span>

효과: 각 줄이 완전한 캡슐 모양!

4. 인용문 하이라이트 (그림자 활용)

.quote-highlight {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.3em 0.8em;
  border-radius: 0.5em;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

효과: 각 줄이 떠 있는 것처럼 보이며, 독립적인 그림자로 깊이감 생김

함정과 주의사항

실제로 사용하면서 주의해야 할 점들을 정리했습니다.

함정 1: 브라우저 호환성

MDN 문서에서 명시하듯이, “이 기능은 Baseline이 아닙니다. 가장 널리 사용되는 일부 브라우저에서 작동하지 않습니다.”

💡 Baseline이란?

MDN의 “Baseline”은 주요 브라우저(Chrome, Firefox, Safari, Edge)에서 2.5년 이상 안정적으로 지원되는 기능을 의미합니다. Baseline이 아니라는 것은 일부 브라우저에서 지원이 불완전하거나 접두사가 필요하다는 뜻입니다. 따라서 프로덕션에서 사용 시 반드시 폴백 전략이 필요합니다.

해결책:

/* 항상 webkit 접두사 함께 사용 */
.element {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

호환성 체크:

✅ Safari: -webkit- 접두사 필요
✅ Chrome/Edge: 지원 (webkit 접두사 권장)
❌ 일부 구형 브라우저: 미지원

폴백 전략:

/* 기본 스타일 (slice 기준) */
.highlight {
  background: yellow;
  padding: 0 0.4em; /* 좌우만 */
}

/* clone 지원 시 개선 */
@supports (box-decoration-break: clone) {
  .highlight {
    padding: 0.2em 0.4em; /* 상하좌우 모두 */
    border-radius: 0.3em;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

함정 2: background-repeat과의 상호작용

배경 이미지를 사용할 때 주의하세요:

/* ❌ 예상치 못한 결과 */
.element {
  background: url('pattern.png') no-repeat;
  box-decoration-break: clone;
}

문제: MDN에 따르면, background-repeat: no-repeat이어도 clone 사용 시 각 조각마다 배경이 반복됩니다!

해결책:

/* ✅ 그라디언트 사용 권장 */
.element {
  background: linear-gradient(yellow, green);
  box-decoration-break: clone;
}

/* 또는 패턴이 반복되어도 괜찮은 디자인 */
.element {
  background: url('seamless-pattern.png');
  box-decoration-break: clone;
}

함정 3: 성능 고려

clone은 각 조각을 독립적으로 렌더링하므로 약간의 성능 오버헤드가 있습니다.

권장 사항:

✅ 적당한 수의 요소에만 사용
❌ 페이지 전체 수백 개 요소에 적용 자제
✅ 주요 하이라이트나 강조 요소에 집중

함정 4: 상속되지 않음

MDN 명시: “상속 여부: 상속되지 않음”

/* ❌ 자식에게 상속 안 됨 */
.parent {
  box-decoration-break: clone;
}

/* ✅ 각 요소마다 명시 */
.highlight {
  box-decoration-break: clone;
}

함정 5: 애니메이션 불가

MDN 명시: “애니메이션: 불가능 (이산적 값)”

/* ❌ 작동 안 함 */
.element {
  transition: box-decoration-break 0.3s;
}

/* 애니메이션으로 slice ↔ clone 전환 불가 */

언제 사용할까?

실무에서 box-decoration-break: clone이 빛나는 순간들:

✅ 사용하기 좋은 경우

인라인 하이라이트
- 형광펜 효과
- 코드 하이라이트
- 강조 텍스트
태그/배지 시스템
- 여러 줄 태그
- 라벨
- 카테고리 표시
디자인적 강조
- 그라디언트 배경
- 그림자 효과
- 특수 테두리

❌ 사용하지 않는 게 나은 경우

일반 텍스트
- 기본 문단
- 제목 (대부분 한 줄)
- 링크 (기본 스타일)
블록 요소
- <div>, <p> 등은 기본적으로 줄바꿈 안 일어남
- display: block이면 의미 없음
성능 중요 페이지
- 수백 개 요소에 적용 필요 시
- 애니메이션 많은 페이지

완전한 예제

모든 개념을 활용한 실전 예제입니다:

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    /* 1. 형광펜 하이라이트 */
    .highlight-yellow {
      background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 15%,
        #fff59d 15%,
        #fff59d 85%,
        transparent 85%
      );
      padding: 0.1em 0.3em;

      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }

    /* 2. 코드 인라인 */
    code {
      background: #282c34;
      color: #61dafb;
      border-radius: 4px;
      padding: 2px 8px;
      font-family: 'Monaco', monospace;
      font-size: 0.9em;

      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }

    /* 3. 그라디언트 태그 */
    .gradient-tag {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 0.4em 0.8em;
      border-radius: 9999px;
      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
      font-weight: 600;

      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }

    /* 4. 경계 효과 */
    .bordered-highlight {
      background: #e3f2fd;
      border: 2px solid #1976d2;
      border-radius: 0.5em;
      padding: 0.3em 0.6em;
      color: #1976d2;

      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }

    /* 공통 스타일 */
    p {
      max-width: 500px;
      line-height: 2;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>
    이 문장에서
    <span class="highlight-yellow">이 부분은 형광펜으로
    표시한 것처럼 보이며 여러 줄에 걸쳐도 자연스럽게</span>
    렌더링됩니다.
  </p>

  <p>
    파이썬에서는
    <code>box_decoration_break</code> 처럼 스네이크 케이스를
    사용하지만, JavaScript에서는
    <code>boxDecorationBreak</code> 처럼 카멜 케이스를 사용합니다.
  </p>

  <p>
    이 제품은
    <span class="gradient-tag">새로 출시된 베스트셀러 상품으로
    많은 분들이 찾고 계십니다</span>
    라는 특징이 있습니다.
  </p>

  <p>
    중요한 알림:
    <span class="bordered-highlight">이 내용은 반드시 확인해야 하며
    여러 줄에 걸쳐 있어도 각 줄이 명확하게 구분됩니다</span>
    라는 점을 기억하세요.
  </p>
</body>
</html>

브라우저 호환성 전략

실무에서 안전하게 사용하는 방법:

1. 기본 + 점진적 개선

/* Level 1: 모든 브라우저 */
.highlight {
  background: yellow;
  padding: 0 0.5em; /* 좌우만 */
}

/* Level 2: clone 지원 브라우저 */
@supports (box-decoration-break: clone) or
          (-webkit-box-decoration-break: clone) {
  .highlight {
    padding: 0.2em 0.5em; /* 상하 추가 */
    border-radius: 0.3em;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

2. JavaScript 감지

// clone 지원 여부 확인
const supportsClone = CSS.supports('box-decoration-break', 'clone') ||
                      CSS.supports('-webkit-box-decoration-break', 'clone');

if (supportsClone) {
  document.body.classList.add('supports-clone');
}

/* clone 지원 시에만 적용 */
.supports-clone .advanced-highlight {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

정리하며

box-decoration-break: clone은 작지만 강력한 CSS 속성입니다.

핵심 요약

목적: 여러 줄로 나뉜 요소의 각 조각을 독립적으로 꾸미기
기본값: slice (연속된 하나의 박스처럼)
clone 효과: 각 조각마다 완전한 스타일 적용
주요 사용처: 하이라이트, 태그, 코드, 강조

실무 체크리스트

webkit 접두사 함께 사용
브라우저 호환성 체크
@supports로 폴백 제공
배경 이미지 대신 그라디언트 권장
성능 고려 (적당한 수의 요소만)
각 요소마다 명시 (상속 안 됨)

마지막 조언

좋은 하이라이트는 사용자의 시선을 자연스럽게 안내하지만, 과하면 산만해집니다.

box-decoration-break: clone은 디자인 의도를 명확히 전달하는 도구입니다. 각 줄이 독립적으로 보여야 한다면 주저 없이 사용하세요. 하지만 일반적인 텍스트에는 기본값(slice)이 더 자연스럽습니다.

여러분의 프로젝트에서 하이라이트가 필요한 순간, 이 속성을 떠올려보세요. 작은 차이가 큰 디자인 개선을 만들어냅니다!