CSS / Reference / clip

clip은 절대 위치 요소의 보이는 부분을 사각형으로 제한하는 기존 CSS 속성입니다. 현재는 사용 중단이 권고되는 기능이므로 기존 코드를 이해할 때 참고하고, 새 구현에는 clip-path를 우선 검토하세요.

문법과 주요 값

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

값의 적용 범위와 문법은 MDN의 clip 문서, MDN의 clip-path 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 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 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.frame { width: 200px; height: 120px; position: relative; background: #eee; }
.target, .reference { width: 200px; height: 120px; background: linear-gradient(135deg, #006c9c, #ffd166); }
.target { position: absolute; clip: rect(20px, 180px, 100px, 20px); }
.reference { clip-path: inset(20px); }
</style>
</head>
<body>
<main id="demo">
<h1>clip 적용 비교</h1>
<section class="samples"><div><p class="label">기존 clip</p><div class="frame"><div class="target"></div></div></div><div><p class="label">clip-path: inset(20px)</p><div class="frame"><div class="reference"></div></div></div></section>
</main>
</body>
</html>

200×120px 도형에서 네 변 안쪽 20px만큼 제외한 영역이 보입니다. right와 bottom은 오른쪽·아래에서 뺄 거리가 아니라 왼쪽·위쪽 기준의 경계 좌표입니다.

rect 좌표와 inset 거리의 차이

clip의 right 180px는 왼쪽에서 180px인 경계, bottom 100px는 위에서 100px인 경계입니다. clip-path: inset(20px)는 각 변에서 안쪽으로 20px를 제외합니다. 서로 다른 크기의 요소에 숫자를 그대로 옮기면 같은 영역이 되지 않을 수 있습니다.

표시를 자르는 것과 크기를 바꾸는 것

클리핑은 일반적으로 요소의 레이아웃 크기를 줄이지 않습니다. 일반 흐름 요소나 비사각형 모양에는 clip-path가 더 적합하며 overflow는 내용이 박스를 넘는 경우를 다루는 별도 기능입니다. 기존 화면을 이관할 때에는 포커스 표시와 자식 내용의 잘림도 함께 확인합니다.

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

• position: static이나 relative 요소에 기존 clip을 썼다면 적용 조건을 확인합니다.
• 좌표 순서가 틀리거나 아래·오른쪽을 여백으로 해석하지 않았는지 확인합니다.

관련 설정을 함께 조정할 때는 overflow와 클리핑의 역할 구분을 참고하세요.