[position] CSS - clip 속성 (폐기예고) - 이미지 자르기 (= 일부만 노출 = clip속성 = 클립속성)

1. clip 예제 - 절대위치 설정된 요소의 일부만 노출
2. clip 정의
3. clip 구문

※ 폐기예고(Deprecated) 됨. 대신, clip-path 속성 사용.

clip 예제 - 절대위치 설정된 요소의 일부만 노출 

 

<style>

#hz table {border-collapse:collapse; }

#hz td {position:reltive; width:25%; padding:5px;}

#hz img {position:absolute; top:100px; width:25%; max-width:25%;}

#hz1 img {left:0; visibility:visible}

#hz2 img {left:25%; clip:rect(0px 100px 100px 0px)}

#hz3 img {left:50%; clip:rect(0px 150px 100px 0px)}

#hz4 img {left:75%; clip:rect(50px 150px 150px 0px)}

</style>

<div id="hz">

  <table width="100%" border=1>

    <tr>

      <td width="25%">원본이미지</td>

      <td width="25%">clip:rect(0 100 100 0)</td>

      <td width="25%">clip:rect(0 150 100 0)</td>

      <td width="25%">clip:rect(0 150 150 0)</td>

    </tr>

</table>

<div id="hz1"><img src="https://i.imgur.com/hYQgQKQ.jpg"></div>

<div id="hz2"><img src="https://i.imgur.com/hYQgQKQ.jpg"></div>

<div id="hz3"><img src="https://i.imgur.com/hYQgQKQ.jpg"></div>

<div id="hz4"><img src="https://i.imgur.com/hYQgQKQ.jpg"></div>

</div>

 

결과보기 

PS. 이미지 자르기 https://homzzang.com/b/html-55

clip 정의

position:absolute (또는, position:fixed) 선언된 요소의 노출 부분 지정. 

 

---

 

1.

• 노출 영역을 rect(top, right, bottom, left) 함수로 지정.
• overflow:visible 상태인 경우엔 작동 X
• 폐기예고(Deprecated) 됨. 대신, clip-path 속성 사용.

2.

• 기본값: auto
• 상속여부: X
• 애니효과: O
• CSS버전: CSS2
• JS구문: object.style.clip = "rect (0px, 100px, 100px, 0px)"

 

3.

주요 최신 브라우저 모두 지원.

 

4. MDN clip 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/clip

 

clip 구문

 

selector {clip: auto|shape|initial|inherit;}

 

---

[속성값]

 

auto
clip 속성 적용 안함. 즉, 전체 보이기. (기본값)

 

shape

사각형 일부분만 잘라서 보이기. 

※ 현재, rect(top, right, bottom, left) 형식의 값만 유효. 

• top, bottom 값은 box의 상단 테두리 안쪽부터 잰 값.
• right, left 값은 box의 왼쪽 테두리 안쪽부터 잰 값.
• 각각의 값은 공백으로 구분하거나 쉼표(,)로 구분.
• JS 반환값 경우, 쉼표와 공백이 함께 사용된 형태로 반환됨.
• 단위는 반드시 붙여야 하나, 숫자 0엔 안 붙여도 됨.

 

initial

이 속성의 기본값으로 설정.

 

inherit 
부모요소의 속성값 상속.