잇스쿨
css / clip 속성 본문
clip
clip 속성은 무엇인가를 깎는다는 어원적 의미를 떠올리면 쉬움
정의
clip
1. 핀, 클립
2. (옷에 꽂는, 보석으로 장식한) 핀
3. (무엇을 짧게) 깎음
즉, clip 속성은 요소의 특정 부분만 나오도록 지정
요소의 크기가 변하는 것이 아닌, 포토샵의 mask 기능처럼 선택한 영역만 보여줄 수 있는 것
- 기본값 : auto
- 상속 : no
- 퍼센테이지 : 지정불가
- 애니메이션 : Yes
- 버전 : CSS2
문법
clip: auto | shape | initial | inherit
auto : 기본(default) 값
clip을 적용한 대상의 원래 크기와 동일하게 적용
clip이 적용 안된 상태와 동일
shape : rect(top, right, bottom, left)형식으로 지정
이는 네변에서의 거리를 말하며 음수값 지정이 가능
initial : 기본값으로 설정
inherit : 부모 요소의 속성값을 상속 받음
shape 사용법
rect( <top>, <right>, <bottom>, <left> )
<top> : 위를 기준으로 시작하는 위치
<right> : 왼쪽을 기준으로 끝나는 위치
<bottom> : 위를 기준으로 끝나는 위치
<left> : 왼쪽을 기준으로 시작하는 위치
* position의 속성값이 absolute 또는 fixed 일 때만 적용
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140">
</body>
</html>
(출처 : https://www.w3schools.com/cssref/tryit.asp?filename=trycss_clip)
'퍼블리싱 > CSS' 카테고리의 다른 글
| svg 사용하기 (0) | 2020.08.05 |
|---|---|
| [CSS] word-break, word-wrap 속성 (0) | 2020.07.09 |
| calc() : 속성 값 계산한 결과 적용하는 함수 (0) | 2019.04.02 |
| [CSS] text-overflow 텍스트 긴 글 생략 기호로 표시 (0) | 2019.04.01 |
| 상태 선택자(checked, focus, enabled, disabled) (0) | 2019.03.29 |