이 글은 CSS의 clip-path 속성으로 이미지의 표시 영역을 자르는 방법을 다룬다. 다각형 모양으로 고정해서 자르는 예제부터 마우스를 올렸을 때 영역을 펼치는 예제, 페이지가 열리면 애니메이션으로 이미지를 드러내는 예제까지 차례로 확인한다. HTML 구조는 같지만 CSS에 지정한 도형과 변화 방식에 따라 화면이 어떻게 달라지는지 비교할 수 있다.
예제1: 다각형 모양으로 이미지 자르기
clip-path(클립 패스)는 요소에서 화면에 표시할 영역을 도형으로 지정하는 CSS 속성이다. 지정한 도형 안쪽은 보이고 바깥쪽은 가려진다. 첫 번째 예제는 갈색 배경의 액자 안에 이미지를 놓고, 이미지의 네 모서리를 잘라 낸 팔각형 모양을 만든다.
HTML
frame-wrap 요소는 액자 역할을 하고, 그 안의 photo 이미지는 잘라 낼 대상이다. 이미지 주소는 외부 사이트를 사용하므로 네트워크 연결이나 해당 주소의 응답 상태에 따라 이미지가 나타나지 않을 수 있다. 이 경우 CSS보다 먼저 이미지 주소가 브라우저에서 열리는지 확인한다.
<div class="frame-wrap">
<img src="https://placedog.net/400" class="photo">
</div>CSS
.frame-wrap의 padding은 이미지 둘레에 보이는 액자의 두께를 만든다. 값의 순서는 위·아래 20픽셀, 왼쪽·오른쪽 40픽셀이다. background는 액자색을 지정하고, 안쪽 그림자인 inset이 붙은 box-shadow는 가장자리 안으로 어두운 음영을 넣는다.
object-fit: cover는 지정한 너비와 높이를 채우도록 이미지 비율을 유지하면서 넘치는 부분을 잘라 낸다. 이어지는 polygon()(폴리곤)은 꼭짓점 좌표를 차례로 연결해 표시 영역을 만든다. 각 좌표는 요소의 왼쪽 위를 기준으로 한 가로 위치와 세로 위치이며, 0%는 시작 가장자리, 100%는 반대편 가장자리를 뜻한다. 20%와 80%를 바꾸면 잘려 나가는 모서리의 크기가 달라진다.
.frame-wrap {
width: 400px;
padding: 20px 40px; /* 액자 두께 */
background: #8B4513; /* 액자 색 (갈색) */
box-shadow: inset 0 0 10px rgba(0,0,0,0.5); /* 입체감 */
}
.photo {
width: 400px;
height: 300px;
object-fit: cover;
/* 이미지 가장자리를 잘라서 액자가 더 잘 보이게 */
/* clip-path: inset(30px); */
clip-path: polygon(
20% 0%, 80% 0%,
100% 20%, 100% 80%,
80% 100%, 20% 100%,
0% 80%, 0% 20% );
}실행 화면에서는 사진의 네 모서리가 대각선으로 잘리고 그 바깥으로 갈색 액자 배경이 드러나는지 확인한다. polygon()의 좌표 순서를 뒤섞으면 선이 서로 가로지르며 예상과 다른 모양이 될 수 있으므로, 꼭짓점은 테두리를 따라 한 방향으로 나열한다.
예제2: 마우스를 올려 잘린 영역 펼치기
두 번째 예제는 inset()(인셋)으로 이미지의 네 가장자리를 안쪽으로 자른 뒤, 마우스를 올리면 원래 크기의 표시 영역으로 되돌린다. inset()은 위·오른쪽·아래·왼쪽 가장자리에서 안으로 들어올 거리를 지정하는 도형 함수이다.
HTML
HTML 구조와 클래스 이름은 첫 번째 예제와 같다. 같은 구조를 유지하면 표시 영역의 변화는 CSS 규칙에서 비롯된다는 점을 분리해서 확인할 수 있다.
<div class="frame-wrap">
<img src="https://placedog.net/400" class="photo">
</div>CSS
기본 상태의 inset(50px)은 네 가장자리에서 각각 50픽셀만큼 안쪽을 표시 경계로 삼는다. :hover(호버)는 포인터가 이미지 위에 있는 동안 적용되는 상태 선택자이다. 이 상태에서 inset(0)을 지정하면 잘라 내는 거리가 0이 돼 이미지 전체가 보인다.
transition(트랜지션)은 속성값이 바뀔 때 중간 상태를 계산해 변화를 이어 주는 속성이다. 여기서는 clip-path의 변화를 0.5초 동안 진행한다. 시간을 늘리면 펼쳐지는 동작이 느려지고, 줄이면 빠르게 바뀐다.
.frame-wrap {
width: 400px;
padding: 20px 40px;
/* 액자 두께 */
background: #8B4513;
/* 액자 색 (갈색) */
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
/* 입체감 */
}
.photo {
width: 400px;
clip-path: inset(50px);
transition: clip-path 0.5s;
}
.photo:hover {
clip-path: inset(0);
}실행 화면에서는 포인터를 사진 위에 올렸을 때 잘린 영역이 바깥쪽으로 부드럽게 펼쳐지고, 포인터를 벗기면 다시 줄어드는지 확인한다. 터치 화면에는 마우스 포인터가 없으므로 :hover 상태가 데스크톱 브라우저와 다르게 유지되거나 짧게만 적용될 수 있다.
예제3: 페이지가 열릴 때 이미지 드러내기
세 번째 예제는 키프레임 애니메이션으로 가운데의 작은 표시 영역을 이미지 전체 크기까지 확장한다. 키프레임(keyframe, 키프레임)은 애니메이션의 시작과 끝 또는 중간 시점에 적용할 속성값을 정의하는 규칙이다.
HTML
HTML은 앞의 두 예제와 같으며, photo 클래스가 있는 이미지에 애니메이션을 적용한다. 클래스 이름이 CSS 선택자와 일치하지 않으면 너비와 애니메이션이 모두 적용되지 않는다.
<div class="frame-wrap">
<img src="https://placedog.net/400" class="photo">
</div>CSS
animation: show 4s forwards는 show라는 키프레임을 4초 동안 한 번 실행하고 마지막 상태를 유지한다. forwards(포워즈)는 실행이 끝난 뒤 to에 적은 스타일을 유지하는 채움 모드이다. 이를 빼면 애니메이션이 끝난 다음 요소가 원래 CSS 상태로 돌아갈 수 있다.
from의 inset(50% 50%)은 위·아래와 왼쪽·오른쪽에서 각각 절반만큼 잘라 표시 영역을 가운데로 모은다. to의 inset(0 0)은 모든 가장자리의 잘라 내는 거리를 없앤다. 애니메이션 이름 show와 @keyframes show의 이름이 다르면 동작하지 않는다.
.photo {
width: 400px;
animation: show 4s forwards;
}
@keyframes show {
from {
/* 완전히 가려짐 */
clip-path: inset(50% 50%);
}
to {
/* 완전히 보임 */
clip-path: inset(0 0);
}
}페이지를 새로 열거나 새로고침하면 이미지가 가운데에서 바깥쪽으로 4초 동안 드러나는지 확인한다. 이미 애니메이션이 끝난 화면만 보인다면 페이지를 새로고침해 시작 상태부터 다시 관찰한다. 브라우저의 동작 줄이기 설정이나 사용자 스타일이 애니메이션을 제한하는 환경에서는 변화가 다르게 보일 수 있다.