Skip to content

image clip

2019.07.06 15:47

WHRIA 조회 수:2398

http://www.nuno21.net/bbs/board.php?bo_table=html&wr_id=1289

 

 

개요

clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다.

  • 기본값 : auto
  • 상속 : No
  • 애니메이션 : Yes
  • 버전 : CSS Level 2

문법

  • auto : 요소의 모든 부분이 나옵니다.
  • shape : 특정 부분이 나오도록 합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 부분을 정합니다.

  • <top> : 위를 기준으로 시작하는 위치
  • <right> : 왼쪽을 기준으로 끝나는 위치
  • <bottom> : 위를 기준으로 끝나는 위치
  • <left> : 왼쪽을 기준으로 시작하는 위치

position 속성값이 absolute 또는 fixed일 때만 적용됩니다.

 

 

예제

이미지의 일부만 보여주는 예제입니다. 사용한 이미지의 크기는 450x300입니다.

브라우저 지원

  • Chrome : 1.0+
  • Firefox : 1.0+
  • Internet Explorer : 8.0+
  • Opera : 7.0+
  • Safari : 1.0+



CSS로 이미지의 원하는 부분만 잘라서 보여주는 방법 (Image Clipping)

CSS로 이미지의 원하는 부분만 잘라서 보여주는 방법 (Image Clipping)


css를 활용하여 하나의 이미지에서 원하는 부분만 잘라서 보여주는 방법을 소개 해드릴까 합니다.

 

위 방법은 Image Clipping 이라는 기술인데요 background-image 태그를 사용하지 않고 img 태그를 이용한

방법으로 하였습니다.

background-image 를 활용하게 되면 익스플로러에서 인쇄를 할때 이미지가 출력이 안될 수 있다는 단점이 있습니다만

페이지를 모두 출력해서 사용 하는 것은 아니니 크게 상관은 없겠죠?

 

css

 .menu { width: 500px; height: 500px; position: relative; top: 0; left: -100px }
.menu img { position: absolute; clip: rect(0 299px 29px 193px) }

 

 

 html

 <div class="menu">
     <img src="menu.png" alt="menu" title="menu" width="490" height="490" />
</div>

 

 

번호 제목 글쓴이 날짜 조회 수
244 caffe WHRIA 2016.10.19 109
243 file lock WHRIA 2020.09.22 109
242 opencv rotate WHRIA 2019.03.09 108
241 popup WHRIA 2020.12.31 106
240 KMA 연수교육 주소 WHRIA 2016.10.05 103
239 이미지 비교 [1] WHRIA 2019.04.23 102
238 윈도우 파일 검색 옵션 WHRIA 2019.06.14 101
237 MXNET SSD WHRIA 2019.09.04 101
236 MS bot framework [3] WHRIA 2020.06.13 101
235 dkms for r8125 WHRIA 2020.11.12 99
234 scx 4623f reset / memory [2] WHRIA 2016.01.23 98
233 open new mate terminal WHRIA 2019.08.11 96
232 인생무상 WHRIA 2016.01.18 94
231 t test WHRIA 2019.02.13 93
230 오랜만에 쓰다. WHRIA 2015.06.26 92

Powered by Xpress Engine / Designed by Sketchbook

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소