HTML DOM의 style clip 속성은 위치가 지정된(positioined) 요소에서 화면에 보이는 영역을 설정하거나 가져올 때 사용합니다. 이 속성을 활용하면 이미지나 텍스트 등의 요소를 원하는 좌표만큼 잘라내어(clipping) 표시할 수 있습니다.
clip 속성 문법
clip 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.clip = "auto|rect(top right bottom left)|initial|inherit"
속성 값 설명
| 값 | 설명 |
|---|---|
| auto | 요소를 자르지 않습니다. 기본(default) 값입니다. |
| rect(top right bottom left) | 주어진 네 개의 좌표(위, 오른쪽, 아래, 왼쪽)에 따라 요소의 형태를 잘라냅니다. |
| initial | 이 속성을 초기값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
clip 속성 예제
다음 예제는 버튼을 클릭하면 이미지의 clip 속성이 변경되어 이미지의 일부분만 보이도록 만드는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div{
position:relative;
}
#IMG1{
width:200px;
height:200px;
position:absolute;
}
#P1{
position:absolute;
margin-top:210px;
}
button{
margin-top: 250px;
}
</style>
<script>
function changeClip(){
document.getElementById("IMG1").style.clip="rect(0px 75px 75px 0px)";
document.getElementById("Sample").innerHTML="이미지의 clip 속성이 변경되었습니다";
}
</script>
</head>
<body>
<div >
<img id="IMG1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
<p id="P1">아래 버튼을 클릭하면 위 이미지의 clip 속성이 변경됩니다</p>
<button onclick="changeClip()">Change Clip</button>
<p id="Sample"></p>
</div>
</body>
</html>실행 결과
페이지를 처음 열면 200x200 크기의 이미지가 전체적으로 표시됩니다.
"Change Clip" 버튼을 클릭하면 clip 속성이 rect(0px 75px 75px 0px)로 설정되어, 이미지의 왼쪽 상단에서부터 가로 75px, 세로 75px 영역만 남기고 나머지 부분이 잘려서 보이게 됩니다.
정리
clip 속성은 절대 위치(position:absolute) 또는 상대 위치(position:relative)가 지정된 요소에만 적용된다는 점에 유의해야 합니다. rect() 함수의 네 좌표 값은 시계 방향(top → right → bottom → left) 순서로 지정하며, 각 값을 조절하여 요소의 특정 영역만 노출시키는 다양한 시각적 효과를 구현할 수 있습니다.