[CSS] clip 알아보기!

2021. 12. 10. 17:55

지원되는 브라우저

chrome1.0+, firefox1.0+, internet explorer8.0+, opera7.0+, safari1.0+

어디서부터 특정해서 보여줄 지 나타냄

clip 문법

clip: auto;

auto - 요소의 모든 부분

shape - 특정부분

initial - 기본 값

inherit - 부모 요소의 값 상속

unset - 초기화

position 속성 값이 absolute, fixed 일 때 적용 가능

rect(top, right, bottom, left)

top이 0일 때 맨 위에서부터 보여줌

bottom이 0일 때 맨 아래에서부터 보여줌

left이 0일 때 왼쪽부터 보여줌

right가 0일 때 안보이지만 이미지 크기만큼 줄 경우 다 보여줌

예시

이미지 크기 320*240 라고 할 때

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>clip 알아보기</title>
</head>
<style>
    .test{
        position: absolute;
        width: 320px; height: 240px;
        border: 1px solid black;
        
        clip: rect(0px, 320px, 240px, 0px);
    }
    .test img{
        width: 100%; height: 100%;
    }
</style>
<body>
    <div class="test">
        <img src="대충이미지.jpg" />
    </div>
</body>
</html>

요렇게 왼쪽에서 오른쪽으로 340, 밑에서 위로 240을 줌

위와 왼쪽은 0부터 시작

.test {
    position: absolute;
    width: 320px;
    height: 240px;
    border: 1px solid black;
    
    clip: rect(0px, 100px, 240px, 0px);
}

rect right 를 100px 만큼 주게되면

요렇게 100만큼 보인다

.test {
    position: absolute;
    width: 320px;
    height: 240px;
    border: 1px solid black;
    
    clip: rect(0px, 100px, 240px, 50px);
}

오른쪽에서 100px 만큼 보이게

왼쪽에서 50px 부터 시작

.test {
    position: absolute;
    width: 320px;
    height: 240px;
    border: 1px solid black;
    
    clip: rect(0px, 320px, 200px, 0px);
}

위에서 아래로 200px 만큼 보여주기

참고로

요즘은 잘 사용되지 않고 clip-path 로 대체

이유는

overflow: visible 작동x,

직사각형 형태로만 적용가능,

position: absolute, fixed 적용되어야 사용가능

때문~

저작자표시 비영리 변경금지

'개발 > html & CSS' 카테고리의 다른 글

meta tag (0)	2022.01.26
코드펜(Codepen) 소스코드 티스토리 올리기 (0)	2022.01.14
html 기본속성 draggable 사용 & 드래그 앤 드롭 (0)	2022.01.07
[CSS] -webkit-tap-highlight-color 알아보기! (0)	2021.12.22

Dust