웹스터디

clip

토픽 웹스터디 > CSS Dictionary

Summary

요소의 특정한 부분의 영역만 잘라내어 화면에 출력하도록 한다.

<shape> | auto | inherit
기본값 auto
적용대상 블럭레벨요소, 치환된 요소
상속 상속안됨
퍼센테이지 지정불가
미디어 Visual

Value

  • shape : rect(top, right, bottom, left)형식으로 지정한다. 이는 네변에서의 거리를 말하며 음수값 지정이 가능하다.
  • auto : 클리핑 영역과 박스의 크기, 위치를 같게 지정한다.

Tip

  1. 다음과 같이 사용할 수 있다
    img {
        clip: rect {20px, 30px, 40px, 50px;}
    }
  2. 예를 들어 right + left가 엘리먼트의 폭과 같고, top + bottom값이 높이와 같다면 auto를 지정한것과 같게 된다.

Sample

 

댓글

댓글 본문
  1. Hun Chang
    신고 어떻게 하나요? 구글 이미지 링크가 깨진 것 같습니다.
  2. 푸른하늘
    12일차 공부 감사합니다
  3. 한솔
    이미지가 엑스박스입니다
  4. Tae-Hee Kang
    이미지가 연결되지 않습니다.
  5. 리체:leezche
    수정되었습니다. 감사합니다.
    대화보기
    • 수정부탁드려요
      클립에서

      {20px, 30px, 40px, 50;}

      (20px, 30px, 40px, 50px);
    • 리체:leezche
      감사합니다. 수정되었습니다. ^^
      대화보기
      • nosugarinmycoffee
        <--*value~ 음수갑 지정 --> <--박스으 크기-->