clip

CSS CSS Reference

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

문법과 주요 값

속성	초기값	상속	주요 적용 조건
`clip`	auto	아니요	절대 위치 요소; 사용 중단된 속성

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

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

값 또는 구분	동작과 선택 기준
`auto`	clip으로 자르지 않음
`rect(top, right, bottom, left)`	위·오른쪽·아래·왼쪽 경계 좌표
`position: absolute / fixed`	기존 clip이 적용되는 위치 지정 조건
`clip-path: inset(...)`	새 코드에서 검토할 사각형 클리핑 대안

값과 적용 조건은 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는 내용이 박스를 넘는 경우를 다루는 별도 기능입니다. 기존 화면을 이관할 때에는 포커스 표시와 자식 내용의 잘림도 함께 확인합니다.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

기존 200×120px 예제의 rect 경계는 위20·오른쪽180·아래100·왼쪽20px입니다. 새 요소가 300×180px이면 같은 20px inset에 대응하는 경계는 20, 280, 160, 20px입니다.
크기를 바꿀 때 좌표도 함께 계산하는 기존 방식과 inset 거리의 의미를 비교하고 원래 크기로 복구합니다. 새 구현에는 clip-path를 사용하고 레거시 문법은 기존 코드 이관에 한정합니다.

방향	200×120의 rect 좌표	300×180의 rect 좌표	inset 거리
위	20px	20px	20px
오른쪽	180px	280px	20px
아래	100px	160px	20px
왼쪽	20px	20px	20px

새 구현의 거리 기반 문법은 MDN clip-path의 inset 예제를 참고하세요.

상자의 표시 방식과 일반 흐름을 함께 이해하려면 display와 기본 배치 흐름 이해하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 overflow입니다.

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

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

CSS CSS Reference

CSS / Reference / calc()

calc()로 백분율과 길이를 조합하고 실제 부모 너비를 기준으로 결과를 확인합니다. 자료형 오류, 새 형식 산술과 무한대 계산의 차이도 구분합니다.

CSS 강좌 / 큰 스타일시트 정리하기: 파일 구성·중첩·레이어

역할별 CSS 파일 연결과 네이티브 중첩, 캐스케이드 레이어를 실행 가능한 작은 프로젝트로 익힙니다. 선택자 충돌을 비교하고 원래 설정으로 복원하는 실습을 제공합니다.

CSS / Reference / list-style-type

목록의 의미를 유지하면서 마커 모양과 번호 표시를 변경합니다. start 속성, 이미지 마커와 단축 속성의 영향까지 예제로 확인합니다.

CSS 강좌 / 표 꾸미기 / 테두리

테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.

CSS 강좌 / 안쪽 여백(padding)과 바깥 여백(margin)

여백에는 안쪽 여백과 바깥 여백이 있습니다. 안쪽 여백은 padding 속성으로, 바깥 여백은 margin 속성으로 정합니다. 여백을 정하면 요소의 크기가 바뀔 수 있습니다. 어떤 기준으로 크기를 정할 지는 box-sizing 속성으로 정합니다.

CSS 강좌 / 문법: 선택자·선언·주석과 오류 처리

CSS의 선택자·선언·구분 기호·주석을 예제로 설명합니다. 잘못된 속성값과 세미콜론 누락을 비교하고, 실행 가능한 예제와 오류 수정 실습으로 브라우저가 적용한 결과를 확인합니다.

CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법

placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.

CSS 강좌 / 상속·우선순위·캐스케이드로 최종 스타일 결정하기

상속과 직접 지정의 차이부터 중요도·선택자 우선순위·작성 순서까지 단계별로 판단합니다. 같은 문단의 색상·여백·테두리를 예측하는 전체 예제와 !important·인라인 스타일의 비교 실습을 제공합니다.

CSS / Reference / aspect-ratio

선호 가로세로 비율과 이미지의 고유 비율을 구분합니다. auto 조합, 확정 크기, cover·contain의 잘림과 빈 공간을 실행 예제로 비교합니다.

CSS / Reference / background-position

배경 위치의 백분율이 영역과 이미지 크기의 차이에 적용되는 이유를 설명합니다. 동일 영역에서 0·50·100%를 비교하고 위치와 잘림을 조정합니다.