CSS / Reference / clip

clip은 요소에서 보이는 부분을 사각형으로 제한하는 오래된 CSS 속성입니다. position: absolute 또는 position: fixed인 요소에 적용되며, 현재 사용 중단이 권고되므로 새 코드에서는 clip-path를 우선 사용합니다. 기존 코드를 옮길 때는 rect()의 경계 좌표와 inset()의 안쪽 거리를 구분해야 합니다.

사용 조건과 주요 값

클리핑(clipping)은 영역 바깥의 그림을 표시하지 않는 처리입니다. 원본 이미지 파일을 편집하거나 요소의 너비·높이를 실제로 줄이는 작업과 다릅니다. clip의 초기값은 auto이며 상속되지 않습니다. position: relative만 지정한 요소에는 기존 clip이 적용되지 않습니다.

clip의 rect에서는 퍼센트 길이를 사용할 수 없습니다. 전체 값인 clip: auto와 rect(auto, auto, auto, auto)도 다릅니다. 후자는 각 변을 테두리 안쪽 경계에 맞추므로, 넘친 자식 내용 등이 있을 때 차이가 생길 수 있습니다. MDN clip의 문법과 적용 조건

전체 예제로 원본과 잘린 영역 비교하기

아래 코드를 UTF-8 형식의 clip-example.html로 저장하고 브라우저에서 엽니다. 외부 이미지·라이브러리·서버가 필요하지 않습니다. 예제 CSS는 이 파일 안에서만 사용하고 사이트 공통 스타일에 그대로 넣지 마세요. 세 상자를 비교한 뒤 값을 하나씩 바꾸고 저장·새로고침합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>clip과 clip-path 비교</title>
  <style>
    body { margin: 0; padding: 16px; font: 16px/1.6 sans-serif; }
    main { max-width: 760px; margin: auto; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .frame { position: relative; width: 200px; height: 120px;
      background: #e5e7eb; outline: 1px solid #666; }
    .target { width: 100%; height: 100%; padding: 0; border: 0;
      background: linear-gradient(135deg, #006c9c, #ffd166); }
    .legacy { position: absolute; top: 0; left: 0;
      clip: rect(20px, 180px, 100px, 20px); }
    .modern { clip-path: inset(20px); }
  </style>
</head>
<body>
  <main>
    <h1>clip과 clip-path 비교</h1>
    <div class="samples">
      <section><h2>clip: auto</h2>
        <div class="frame"><div class="target"></div></div></section>
      <section><h2>clip: rect(20px, 180px, 100px, 20px)</h2>
        <div class="frame"><div class="target legacy"></div></div></section>
      <section><h2>clip-path: inset(20px)</h2>
        <div class="frame"><div class="target modern"></div></div></section>
    </div>
  </main>
</body>
</html>

첫째는 200×120px 전체 그라데이션이 보이는 기준 상자입니다. 둘째와 셋째는 위·아래·왼쪽·오른쪽에서 20px를 제외한 160×80px 영역이 예상 결과입니다. 회색 배경과 외곽선은 별도의 frame이므로 잘린 뒤에도 원래 상자의 크기를 구분할 수 있습니다. 창이 좁아지면 비교 상자가 다음 줄로 이동합니다.

rect 좌표를 inset 거리로 바꾸는 방법

두 선언이 같은 영역을 만드는 이유는 숫자의 의미가 서로 다르기 때문입니다. 아래 규칙은 전체 예제의 .legacy와 .modern에 해당합니다.

.legacy {
  position: absolute;
  clip: rect(20px, 180px, 100px, 20px);
}
.modern {
  clip-path: inset(20px);
}

기존 rect의 top·bottom은 테두리 안쪽 위 경계에서, left·right는 테두리 안쪽 왼쪽 경계에서 잰 좌표입니다. right 180px는 “오른쪽에서 180px를 뺀다”는 뜻이 아닙니다. 반면 inset의 네 값은 각 변에서 안쪽으로 들어갈 거리이며, 별도 기준 상자가 없으면 border-box를 기준으로 합니다. 예제의 target에는 padding·border가 없어 두 기준의 차이가 없습니다.

너비 W, 높이 H이고 테두리·패딩이 없는 상자라면 rect(t, r, b, l)은 inset(t, W − r, H − b, l)로 대응시킬 수 있습니다. 실제 CSS에는 W − r 같은 설명식을 그대로 입력하지 말고 계산한 길이를 넣습니다. 테두리나 패딩, 다른 기준 상자가 있으면 먼저 좌표 기준을 맞춰야 합니다. MDN clip-path의 기준 상자와 도형 설명

요소 크기를 바꾸면서 차이 확인하기

먼저 전체 예제의 .frame 너비와 높이만 300px·180px로 바꿉니다. 기존 rect 좌표를 그대로 두면 보이는 영역은 여전히 160×80px지만, inset(20px)는 커진 상자의 각 변에서 20px씩 제외하므로 260×140px 영역이 됩니다. 같은 숫자가 같은 잘림 결과를 보장하지 않는다는 점을 비교합니다.

두 방식을 다시 맞추려면 .legacy의 오른쪽 경계를 280px, 아래 경계를 160px로 바꿉니다. 전체 예제에서 해당 두 규칙을 다음과 같이 수정합니다. .modern 선언은 그대로 둡니다.

.frame {
  width: 300px;
  height: 180px;
}
.legacy {
  clip: rect(20px, 280px, 160px, 20px);
}

이 조건에서는 두 방식 모두 260×140px 영역을 남깁니다. 확인 후 .frame을 200×120px로, rect를 20px·180px·100px·20px로 복원합니다. 반응형 상자에서 같은 안쪽 여백을 유지하려는 목적이라면 고정 경계를 매번 계산하는 방식보다 inset이 의도를 더 직접적으로 표현합니다.

클리핑과 레이아웃·접근성의 관계

clip-path로 표시를 잘라도 요소 자체의 레이아웃 공간은 일반적으로 그대로입니다. 예제의 .modern은 200×120px 공간을 차지하고 보이는 부분만 작아집니다. .legacy는 absolute로 일반 흐름에서 빠져 있으므로, 비교 공간은 부모 .frame이 확보합니다. 이 위치 지정 차이와 클리핑 자체의 효과를 혼동하지 마세요.

새 코드에서는 사각형에 inset, 원형에 circle 같은 clip-path 도형을 검토할 수 있습니다. 반면 상자 밖으로 넘친 내용을 숨기거나 스크롤로 제공하는 목적은 overflow의 역할과 함께 판단합니다. 또한 clip-path는 none이 아닌 값에서 쌓임 맥락을 만들 수 있으므로 이관 뒤 겹침 순서도 확인합니다. CSS Masking의 클리핑과 요소 기하 구조 설명

클리핑은 접근 권한이나 개인정보 보호 수단이 아닙니다. 숨긴 텍스트는 문서에 남을 수 있으며 보조 기술의 처리도 별도로 확인해야 합니다. 버튼·입력란·필수 정보·키보드 초점 표시를 잘라 사용자가 조작할 수 없게 만들지 말고, 확대 보기와 터치·키보드 접근에서 내용을 읽을 경로를 제공합니다.

적용되지 않거나 예상과 다를 때

• 개발자 도구에서 선택한 요소의 position과 clip 계산값을 확인합니다. relative 또는 static이면 기존 clip의 적용 조건에 맞지 않습니다. 예제에서 .legacy의 position만 relative로 바꾸어 잘림이 사라지는지 비교한 뒤 absolute로 되돌릴 수 있습니다.
• rect의 값 순서는 위·오른쪽·아래·왼쪽입니다. right가 left보다 작거나 bottom이 top보다 작으면 예상한 사각형이 남지 않습니다. 너비·높이를 바꾼 뒤 예전 좌표를 그대로 쓰지 않았는지도 확인합니다.
• 부모의 overflow·clip-path 등 다른 잘림이 함께 적용되면 실제 표시 영역은 더 작아질 수 있습니다. 각 선언을 개발자 도구에서 하나씩 끄고 다시 켜며 원인을 구분합니다.
• clip에서 clip-path로 옮길 때는 위치 지정, 기준 상자, 테두리·패딩, 겹침 순서와 초점 표시를 함께 비교합니다. clip의 기존 rect()와 clip-path에서 제공하는 새 rect() 도형은 서로 다른 문법이므로 이름만 보고 값을 그대로 복사하지 않습니다.