Skip to content

image clip

조회 수 8 추천 수 0 2019.07.06 15:47:39

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>

 

 


WHRIA

2019.07.06 16:02:33
*.34.41.226

List of Articles
번호 제목 글쓴이 날짜 조회 수
1592 open new mate terminal WHRIA 2019-08-11 2
1591 mariaDB cache 설정 WHRIA 2019-08-04 47
1590 crontab 사용법 WHRIA 2019-08-04 3
1589 python with upload WHRIA 2019-07-28 236
1588 yolo custom WHRIA 2019-07-25 8
1587 stuff [2] WHRIA 2019-07-15 7
1586 batch normalization explain WHRIA 2019-07-14 37
1585 결극 senet 이 문제 WHRIA 2019-07-13 2
1584 은행은 믿을 곳이 못 되는군... WHRIA 2019-07-12 5
» image clip [1] WHRIA 2019-07-06 8
1582 윈도우 파일 검색 옵션 WHRIA 2019-06-14 30
1581 모든 code 를 python3 로 migration 중 WHRIA 2019-06-08 26
1580 리눅스 samba mount 정리 [1] WHRIA 2019-05-26 53
1579 LG 21 세기 brain hunt - USA file WHRIA 2019-05-23 26
1578 pROC package [3] WHRIA 2019-05-11 56

Powered by Xpress Engine / Designed by Sketchbook

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


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

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

설치 취소