오버플로 클리핑 제어

웹 기능: overflow: clip overflow-clip-margin

overflow: hidden는 거의 항상 패딩 상자에서 콘텐츠를 엄격하게 클리핑하는 '무딘 도구'인 반면, overflow: clip는 overflow-clip-margin와 결합하여 블록 컨테이너 전반에서 세밀한 레이아웃 제어를 위한 '메스'를 제공합니다.

overflow: clip 및 overflow-clip-margin를 사용하여 클리핑이 발생하는 위치를 정확하게 지정합니다. 경계를 내부 박스 모델 가장자리에 정확하게 맞추거나 지정된 오프셋 (안전 여백)만큼 엘리먼트의 상자를 넘어 클리핑 경계를 확장할 수 있습니다. 이 최신 접근 방식은 성능이 뛰어나며, 눈에 띄는 하위 요소 그림자와 같은 시각 효과가 잘리지 않고 렌더링되도록 하기 위해 맞춤 패딩과 음수 여백이 있는 추가 래퍼 컨테이너를 추가하는 기존 요구사항을 없앱니다.

대체된 요소 (<img>, <video>, <canvas> 등)는 기본적으로 overflow: clip 및 overflow-clip-margin: content-box로 설정되므로 object-fit 또는 border-radius를 사용하는 이미지를 깔끔하게 포함할 수 있습니다.

구현 방법

  1. overflow: clip 적용: 대상 요소에 overflow: clip가 사용 설정되어 있는지 확인합니다. overflow-clip-margin가 적용되려면 블록 레이아웃 컨테이너에 overflow: clip 설정이 필수입니다. overflow가 hidden, auto 또는 scroll로 설정된 경우 브라우저에서 overflow-clip-margin 속성을 무시합니다. overflow: clip는 모든 스크롤 (사용자가 시작한 스크롤과 JavaScript를 통한 프로그래매틱 스크롤 모두)을 방지합니다.
  2. 상자 가장자리에 정렬: 키워드를 사용하여 클리핑 경계를 내부 상자 모델 가장자리에 정확하게 정렬합니다.
    • content-box: 콘텐츠 영역이 시작되는 지점에서 콘텐츠를 정확하게 잘라 패딩 영역을 완전히 깨끗하게 유지합니다. 콘텐츠는 패딩 가장자리에서 바로 중지됩니다. 중첩된 레이아웃 모듈에 적합합니다.
    • padding-box (기본값): 테두리의 안쪽 가장자리에서 콘텐츠를 자릅니다.
    • border-box: 테두리의 바깥쪽 가장자리에서 콘텐츠를 잘라내어 콘텐츠가 반투명 테두리 아래에 있거나 부분적으로 겹치도록 합니다.
  3. 지정된 오프셋 (블리드) 정의: 픽셀을 자르기 전에 안전 영역을 만들기 위해 길이 값 (예: 15px 또는 5px)을 제공합니다. 이렇게 하면 눈에 띄는 하위 요소 그림자가 레이아웃 도형을 확장하지 않고도 경계 가장자리를 넘어 잘리지 않은 상태로 렌더링될 수 있습니다.
  4. 상자 가장자리와 오프셋 결합: 상자 가장자리와 길이 오프셋을 동시에 지정하여 (예: content-box 15px) 특정 상자 가장자리에서 오프셋합니다.

예시 코드

다음 예는 동적 컨테이너 레이아웃 컨트롤을 보여주며, 점진적 개선 대체와 함께 자동화된 내부 콘텐츠 곡선 중첩 프레임 및 하위 요소 그림자 보호를 보여줍니다.

블록 컨테이너: 중첩된 둥근 곡선

  • 둥근 모서리와 맞춤 패딩이 있는 상위 컨테이너에 overflow-clip-margin: content-box를 적용합니다.
  • 동심원 내부 콘텐츠 상자 경계를 따라 내부 하위 미디어 및 바닥글 구성요소에 유사한 둥근 모서리를 적용하여 맞춤 calc() 로직 없이 어색한 중첩 곡선을 해결합니다.
<div class="nested-curve-parent">
  <img src="avatar.jpg" alt="Nested Curve Demo">
  <div class="nested-curve-footer">Card Footer</div>
</div>

/**
 * Standard block layout container with outer corner radii and padding.
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.nested-curve-parent {
  /* Level 1 Fallback: clips child roughly at the padding box */
  overflow: hidden;
}

/* Inner footer component with 12px rounded to visually demonstrate automatic concentric corner clipping */
.nested-curve-footer {
  background: #111;
  color: #fff;
}

@supports (overflow-clip-margin: content-box) {
  .nested-curve-parent {
    /* MANDATORY: overflow: clip is required on non-replaced elements */
    overflow: clip;
    /* Automatically curves clipping edge to match inner content-box radius */
    overflow-clip-margin: content-box;
  }
}

블록 컨테이너: 하위 요소 그림자 번짐

  • overflow: clip를 적용하고 확장된 overflow-clip-margin 길이 오프셋을 정의하여 레이아웃 도형을 변경하지 않고도 하위 요소의 그림자가 상위 컨테이너 외부에 잘리지 않고 렌더링되도록 하는 표시되는 안전 영역을 만듭니다. 이 속성이 없으면 하위 요소의 그림자가 상위 요소의 경계에서 잘립니다.
<div class="safety-zone-parent">
  <h4>Clipped Container</h4>
  <p>Inner content boundaries safely contained.</p>
  <!-- Child button element positioned inside with a prominent shadow -->
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * Standard block layout container clipping inner content.
 * Base fallback uses overflow: hidden, which abruptly slices child element shadows.
 */
.safety-zone-parent {
  /* Level 1 Fallback: clips overflowing content but truncates child shadows */
  overflow: hidden;
}

/* Child button element positioned inside with an expanded shadow */
.demo-glowing-btn {
  display: block;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.7);
}

@supports (overflow-clip-margin: 15px) {
  .safety-zone-parent {
    overflow: clip;
    /* Establishes a visible safety zone allowing child element shadows to render safely outside */
    overflow-clip-margin: 15px;
  }
}

전략적 구현 및 권장사항

  • overflow-clip-margin를 사용할 때는 타겟 요소에 overflow: clip를 적용해야 합니다. 표준 블록 레이아웃 컨테이너에서 overflow를 clip로 엄격하게 설정하는 것이 커스텀 또는 내부 곡선 클립 여백을 활성화하는 데 필수이기 때문입니다.
  • 모서리가 둥근 패딩 컨테이너에 overflow-clip-margin: content-box를 설정하여 수동 패딩 빼기 로직 없이 둥글지 않은 내부 하위 요소를 수학적으로 완벽한 중첩 테두리 곡선으로 자동 클립합니다(권장).
  • 레이아웃 도형을 변경하거나 확장하지 않고도 경계 상자가 급격하게 잘리는 것을 방지하려면 외부 시각 효과(예: filter: drop-shadow())를 적용할 때 지정된 길이 오프셋으로 overflow-clip-margin를 구성해야 합니다(DO).
  • 컨테이너가 JavaScript를 통한 프로그래매틱 스크롤 조작을 요구하거나 position: sticky 요소의 즉각적인 레이아웃 컨텍스트 역할을 하는 경우 overflow: clip를 적용하지 마세요. clip는 스크롤을 완전히 사용 중지하기 때문입니다.

대체 전략

overflow: clip 또는 overflow-clip-margin에 대한 기본 지원이 부족한 타겟 환경의 경우 점진적 개선 대체 전략은 시각적 의도에 직접적으로 의존합니다.

  • 핵심 경계가 유지되도록 기본 환경으로 overflow: hidden로 대체합니다.
  • 드롭 섀도우 또는 외부 모서리 배지가 잘리지 않아야 하는 요소에서는 overflow: visible로 대체합니다.

점진적 개선 대체 구현 완료

<!-- 1. Nested rounded edges fallback -->
<div class="demo-container-fallback">
  <img src="example.jpg" alt="Nested Curve Fallback">
  <div class="demo-footer-fallback">Footer</div>
</div>

<!-- 2. Child element shadow bleed fallback -->
<div class="demo-safety-parent">
  <h4>Container</h4>
  <p>Inner boundaries contained.</p>
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * 1. Block Container Nested Curves Fallback
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.demo-container-fallback {  
  /* Level 1 Fallback: clip child roughly at padding box */
  overflow: hidden;
}

.demo-container-fallback img {
  object-fit: cover;
  display: block;
}

@supports (overflow-clip-margin: content-box) {
  .demo-container-fallback {
    overflow: clip;
    overflow-clip-margin: content-box;
  }
}

/**
 * 2. Child Element Shadow Bleed Fallback
 * Base fallback clips content using overflow: hidden, abruptly truncating child element shadows.
 */
.demo-safety-parent {  
  /* Level 1 Fallback */
  overflow: hidden;
}

.demo-glowing-btn {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: #e52e71;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.65);
}

@supports (overflow-clip-margin: 15px) {
  .demo-safety-parent {
    overflow: clip;
    overflow-clip-margin: 15px;
  }
}