CSS_이미지 원하는 부분만 노출하기 clip

wool·2022년 3월 28일

목록 보기

4/5

Intro.

우당탕탕 미션 1을 겨우 마치고 어제 미션2를 시작했다. 미션1에서 처음 페이지를 구현하기 전에 어떤 작업부터 시작해야 하는지 등을 익히는 과정이 있어서 그런지 미션 2 레이아웃을 짤 때는 좀 수월했는데 이미지를 그냥 삽입만 하는 것이 아니라 어떤 이미지의 부분만 잘라내는 과정이 필요했다.

강의를 통해 분명히 들었던 기술이겠지만 가능하다는 것만 알고 어찌 하는지 1도 기억이 안나기 때문에 추후 나의 컨닝페이퍼용으로 글을 적어두려고 한다.

`clipping`과 `masking`

이미지의 원하는 부분만 보여주는 기능에는 두 가지 방법이 있는데 clipping과 masking이다.

이미지를 원하는 부분만 잘라내어 노출 시킨 다는 것은 같지만 clipping은 벡터 패스이고 masking은 래스터이미지이다.

clips는 항상 백터패스로 이루어져 있고 패스의 바깥쪽은 투명도가 적용되고 안쪽은 불투명 영역이다.

mask는 검정과 흰색부분에 따라 투명도, 불투명도가 적용된다.

clip

요소의 특정 부분만 나오도록 할 수 있다.

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

기본형

clip : auto | shape

auto : 요소의 모든 부분이 나오도록 한다.
shape : 특정 부분이 나오도록 한다.

shape특정 부분 설정방법


clip: rect( top, right, bottom, left );

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

예시

HTML

<img src="https://bit.ly/2I4rvsj" class="lb-img"/>

CSS

.lb-img {
  position: absolute;
  clip: rect( 0, 200px, 200px, 0);
}

💡 clip은 현재 새로운 속성이 추가되어 더 이상 사용을 권장하지 않는다고 한다. 사용하기에 제약이 많기도 하고 사각 형태로밖에 적용할 수 없다는 점에서 아래의 기술을 적용하는 추세라고 한다.

clip-path

새롭게 추가 된 속성으로 여러 형태의 도형을 적용할 수 있다는 장점이 있다.

다만 다양한 도형을 적용하려면 브라우저 호환성을 꼭 확인해야 한다.

(이 속성은 추후 내가 활용할 기회가 있을 때 좀 더 자세히 공부하며 글을 작성하려고 한다.)


.clip-circle {
  clip-path: circle(40px at center);
}
.clip-ellipse {
  clip-path: ellipse(130px 140px at 10% 20%);
}
.clip-polygon {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}