image clip
2019.07.06 15:47
http://www.nuno21.net/bbs/board.php?bo_table=html&wr_id=1289
개요
clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다.
- 기본값 : auto
- 상속 : No
- 애니메이션 : Yes
- 버전 : CSS Level 2
문법
|
1
|
clip: auto | shape | initial | inherit
|
- auto : 요소의 모든 부분이 나옵니다.
- shape : 특정 부분이 나오도록 합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 부분을 정합니다.
|
1
|
rect( <top>, <right>, <bottom>, <left> )
|
- <top> : 위를 기준으로 시작하는 위치
- <right> : 왼쪽을 기준으로 끝나는 위치
- <bottom> : 위를 기준으로 끝나는 위치
- <left> : 왼쪽을 기준으로 시작하는 위치
position 속성값이 absolute 또는 fixed일 때만 적용됩니다.
예제
이미지의 일부만 보여주는 예제입니다. 사용한 이미지의 크기는 450x300입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
margin: 0px;
}
.c {
position: absolute;
clip: rect( 20px, 220px, 220px, 20px );
}
</style>
</head>
<body>
<img src="images/abc.jpg" class="c">
</body>
</html>
|
브라우저 지원
- 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 } |
html
|
<div class="menu"> |
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 1686 | Mediainfo 를 이용해서 날짜 알아내기 | WHRIA | 2012.12.20 | 10405 |
| 1685 |
마음이 편해지는 그림
 | WHRIA | 2007.02.18 | 10356 |
| 1684 | 마음의 결정이 끝났습니다. | WHRIA | 2009.11.20 | 10334 |
| 1683 | 애드센스 수입금 - 48만원 | WHRIA | 2010.12.28 | 10277 |
| 1682 | MedicalPhoto moved to http://medicalphoto.org | WHRIA | 2008.06.20 | 10104 |
| 1681 |
rAthena
[1] | WHRIA | 2016.06.26 | 10074 |
| 1680 | 어려운 결정 | WHRIA | 2008.10.11 | 10019 |
| 1679 | 피얼룩 지우기 | WHRIA | 2012.05.26 | 9956 |
| 1678 |
Trader
| WHRIA | 2009.11.17 | 9882 |
| 1677 | 승석이 홈페이지입니다. | 한승석 | 2000.05.29 | 9874 |
| 1676 | 피부과 홈페이지 제작중 | WHRIA | 2009.11.11 | 9712 |
| 1675 | 일본으로 workshop 초청이 왔는데 못가게 되었다. [1] | WHRIA | 2009.11.23 | 9632 |
| 1674 | 간판 제작 업체 | WHRIA | 2009.10.31 | 9558 |
| 1673 | 인플레이션인가 디플레이션인가 | WHRIA | 2009.06.21 | 9546 |
| 1672 | 돌사진 | WHRIA | 2011.03.21 | 9446 |
https://www.geeksforgeeks.org/python-convert-html-pdf/
convert html to PDF