• Q&A
  • 회원가입
  • 로그인

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

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


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

 
<style>
#hz table {border-collapse:collapse; }
#hz td {position:reltive; width:25%; padding:5px;}
#hz img {position:absolutetop: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) 함수로 지정.
 
2.
overflow:visible 상태인 경우엔 작동 X

3.
  • 기본값: auto
  • 상속여부: X
  • 애니효과: O
  • CSS버전: CSS2
  • JS구문: object.style.clip = "rect (0px, 100px, 100px, 0px)"
 
4.
주요 최신 브라우저 모두 지원.
 
 

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 
부모요소의 속성값 상속.
 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012