CSS로 요소 오려내기 – clip-path와 mask

1 – clip-path로 표시 영역 자르기

1.1 – 작업 환경 준비

바탕화면에 web_clip 폴더를 만듭니다.
web_clip 폴더 안에 index.html 파일을 만듭니다.
index.html에 아래 코드를 그대로 붙여 넣고 저장합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Clip and Mask Practice</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="frame">
    <img class="photo" src="https://placedog.net/600/400" alt="Sample photo">
  </div>
</body>
</html>

같은 폴더에 style.css 파일을 만들고 아래 코드를 붙여 넣습니다.

/* base layout for the practice page */
body {
  margin: 0;
  padding: 40px;
  font-family: system-ui, sans-serif;
  background: #f5f5f5;
}

.frame {
  width: 600px;
  padding: 20px;
  background: #8b4513;
}

.photo {
  display: block;
  width: 600px;
  height: 400px;
  object-fit: cover;
}

index.html 파일을 더블클릭해 브라우저에서 엽니다.

갈색 상자 안에 사진 한 장이 네모난 그대로 보입니다. 이 사진이 앞으로 손볼 대상입니다. object-fit: cover는 사진의 비율을 유지한 채 지정한 크기를 가득 채우도록 잘라 넣는 값입니다. 이 값이 없으면 사진이 눌리거나 늘어나 보이므로, 모양을 오려내기 전에 크기부터 고정해 둡니다.

브라우저에서 사진이 뜨지 않으면 인터넷 연결을 확인합니다. 이 실습의 사진은 인터넷에 있는 견본 이미지 주소를 불러오는 방식입니다. 컴퓨터에 있는 사진을 쓰려면 그 파일을 web_clip 폴더에 넣고 src 값을 파일 이름으로 바꿉니다.

1.2 – polygon()으로 팔각형 만들기

style.css를 엽니다.
.photo 규칙 안 맨 아래에 아래 한 줄을 추가하고 저장합니다.

.photo {
  display: block;
  width: 600px;
  height: 400px;
  object-fit: cover;
  /* cut the four corners diagonally */
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

브라우저로 돌아가 F5 키를 눌러 새로고침합니다.

사진의 네 모서리가 대각선으로 잘려 팔각형으로 보입니다. clip-path는 요소에서 화면에 보일 영역만 남기고 나머지를 잘라 내는 속성입니다. polygon()은 꼭짓점 좌표를 적은 순서대로 이어 그 안쪽만 남기는 함수입니다.

좌표는 요소의 왼쪽 위 모서리를 0% 0%으로 삼고, 앞의 값이 가로 위치, 뒤의 값이 세로 위치입니다. 그래서 20% 0%은 위쪽 변에서 왼쪽으로부터 20% 지점을 가리킵니다. 값을 바꿔 가며 새로고침하면 잘리는 모양이 바로 달라집니다.

잘려 나간 부분은 사라진 것이 아니라 가려진 것입니다. 그 자리는 여전히 요소가 차지하므로 갈색 상자의 크기는 그대로입니다.

꼭짓점을 손으로 계산하기 어려우면 좌표를 두세 개만 바꿔 보며 모양이 어느 방향으로 움직이는지 먼저 익힙니다. 값 하나를 0%과 100% 사이에서 크게 움직여 보면 그 값이 어느 꼭짓점을 맡는지 눈으로 확인할 수 있습니다.

1.3 – inset()으로 잘라 두었다가 마우스를 올려 펼치기

style.css의 .photo 규칙에서 clip-path 줄을 아래 두 줄로 바꿉니다.

  /* hide 50px from every edge, then reveal on hover */
  clip-path: inset(50px);
  transition: clip-path 0.5s;

style.css 맨 아래에 아래 규칙을 추가하고 저장합니다.

.photo:hover {
  clip-path: inset(0);
}

브라우저를 새로고침한 다음, 사진 위에 마우스 포인터를 올립니다.

가장자리가 잘려 있던 사진이 0.5초에 걸쳐 원래 크기로 펼쳐집니다. inset()은 위·오른쪽·아래·왼쪽 가장자리에서 안쪽으로 들어올 거리를 지정하는 함수입니다. 값을 하나만 적으면 네 방향에 같은 거리가 적용되므로 inset(50px)은 사방에서 50px씩 들어옵니다.

transition은 값이 바뀔 때 그 사이를 정해진 시간 동안 이어 주는 속성입니다. 이 줄이 없으면 마우스를 올리는 순간 사진이 툭 하고 바뀝니다.

clip-path가 이어지려면 앞뒤 값이 같은 함수여야 합니다. inset()에서 circle()로 바뀌는 것처럼 함수가 서로 다르면 중간 단계 없이 곧바로 바뀝니다. polygon()끼리 이을 때는 꼭짓점 개수와 fill-rule이 양쪽에서 같아야 부드럽게 이어집니다(2026-09-09 확인, MDN basic-shape).

1.4 – 키프레임으로 페이지가 열릴 때 드러내기

.photo 규칙에서 clip-path와 transition 두 줄을 지우고, 그 자리에 아래 한 줄을 넣습니다.

  animation: reveal 1.2s forwards;

.photo:hover 규칙을 지웁니다.
style.css 맨 아래에 아래 규칙을 추가하고 저장합니다.

@keyframes reveal {
  from {
    clip-path: inset(50% 50%);
  }
  to {
    clip-path: inset(0 0);
  }
}

브라우저를 새로고침합니다.

가운데의 좁은 영역만 보이던 사진이 1.2초 동안 바깥으로 펼쳐집니다. @keyframes는 애니메이션의 시작 상태와 끝 상태를 적어 두는 규칙이고, from이 시작, to가 끝입니다.

forwards는 애니메이션이 끝난 뒤 to에 적은 상태를 그대로 유지하게 하는 값입니다. 이 값을 빼면 애니메이션이 끝나는 순간 원래 상태인 inset(50% 50%)로 되돌아가 사진이 다시 좁아집니다.

inset(50% 50%)처럼 값을 두 개 적으면 앞의 값이 위아래, 뒤의 값이 좌우에 적용됩니다. 사방에서 50%씩 들어오므로 보이는 영역이 거의 없는 상태에서 시작합니다.

1.5 – 피그마에서 그린 도형을 SVG로 가져오기

polygon()은 꼭짓점이 늘어날수록 좌표를 손으로 적기 어렵고, 곡선은 아예 적을 수 없습니다. 모양이 복잡해지면 피그마에서 도형을 그린 뒤 그 결과를 CSS로 옮기는 편이 빠릅니다.

아래 실습에 쓸 예시 도형을 피그마 파일 Portfolio의 clip-path shapes 페이지에 만들어 두었습니다. shape-octagon은 1.2에서 좌표로 적었던 팔각형과 같은 모양이고, shape-wave-card는 아래 변이 곡선인 카드 모양입니다. 직접 그려도 되고 이 두 개를 열어 써도 됩니다.

공통 준비 – 피그마에서 SVG 코드 꺼내기

피그마에서 600 × 400 프레임을 만들고 그 안에 도형을 그립니다. 실습 이미지와 같은 크기여야 좌표가 그대로 맞습니다.
도형 레이어를 선택하고 마우스 오른쪽 버튼을 누릅니다.
Copy/Paste as → Copy as SVG 를 고릅니다(2026-09-09 확인, Figma – Copy assets between design tools).
메모장이나 코드 편집기에 붙여 넣습니다. <svg ...><path d="M0,60 Q0,0 60,0 ..."/></svg> 형태의 코드가 나옵니다. 여기서 쓸 것은 d 안의 값입니다.

방법 A – clip-path: path() 에 붙이기

style.css의 .photo 규칙에서 지금 들어 있는 clip-path(또는 animation) 줄을 지웁니다.
그 자리에 아래 두 줄을 넣고 저장합니다. d 값 자리에 피그마에서 복사한 값을 넣으면 됩니다.

  /* paste the d value from Figma between the quotes */
  clip-path: path("M120,0 L480,0 L600,80 L600,320 L480,400 L120,400 L0,320 L0,80 Z");

브라우저를 새로고침합니다.

피그마에서 그린 모양 그대로 사진이 잘립니다. path()는 SVG의 경로 문법을 그대로 받는 함수입니다. 좌표를 하나하나 옮겨 적지 않아도 되므로 곡선이 섞인 모양에 쓰기 좋습니다.

다만 path() 안의 숫자는 모두 픽셀(px)로 고정입니다. 퍼센트나 다른 단위는 쓸 수 없습니다(2026-09-09 확인, MDN path()). 그래서 요소 크기가 달라지면 잘리는 모양은 따라 늘지 않고 원래 좌표 자리에 그대로 남습니다.

피그마가 내보낸 d 값은 프레임 크기를 기준으로 한 좌표입니다. 프레임이 600 × 400이 아니었다면 .photo의 크기도 그 프레임과 같게 맞춰야 모양이 어긋나지 않습니다.

방법 B – <clipPath>를 만들어 url(#아이디)로 참조하기

요소 크기를 따라 모양도 같이 늘어나야 하면 SVG를 문서에 넣고 그 안의 <clipPath>를 가리킵니다.

index.html의 <body> 바로 아래에 아래 코드를 붙여 넣습니다.

  <svg width="0" height="0" aria-hidden="true">
    <defs>
      <!-- 0~1 좌표: 요소 크기를 1로 본 비율 -->
      <clipPath id="octagon" clipPathUnits="objectBoundingBox">
        <polygon points="0.2 0, 0.8 0, 1 0.2, 1 0.8, 0.8 1, 0.2 1, 0 0.8, 0 0.2" />
      </clipPath>
      <!-- 피그마 d 값(600x400 기준)을 1/600, 1/400 으로 줄여 쓴다 -->
      <clipPath id="card" clipPathUnits="objectBoundingBox" transform="scale(0.0016666667, 0.0025)">
        <path d="M0,60 Q0,0 60,0 L540,0 Q600,0 600,60 L600,300 Q300,460 0,300 Z" />
      </clipPath>
    </defs>
  </svg>

style.css의 .photo 규칙에서 clip-path 줄을 아래와 같이 바꾸고 저장합니다.

  clip-path: url(#octagon);

브라우저를 새로고침한 다음, #octagon을 #card로 바꿔 한 번 더 확인합니다.

두 모양 모두 사진에 적용됩니다. clipPathUnits="objectBoundingBox"는 좌표를 요소 크기에 대한 비율로 읽으라는 값이어서, 0이 왼쪽·위 끝이고 1이 오른쪽·아래 끝입니다. 그래서 요소가 커지거나 줄어들면 모양도 같이 따라갑니다.

width="0" height="0"으로 둔 SVG는 화면에 자리를 차지하지 않고 모양 정의만 담아 두는 상자 역할을 합니다. aria-hidden="true"는 읽을 내용이 없는 이 상자를 화면 낭독기가 건너뛰게 합니다.

피그마에서 받은 d 값은 600 × 400 픽셀 좌표라 0~1 범위를 벗어납니다. 그래서 위 예시처럼 transform="scale(1/600, 1/400)"을 계산한 값(0.0016666667, 0.0025)으로 붙여 좌표를 비율로 끌어내립니다. 프레임 크기가 다르면 그 크기로 나눈 값을 넣습니다.

같은 문서 안의 id를 가리키므로 url(#octagon)처럼 파일 경로 없이 적습니다. id가 겹치면 먼저 나온 것이 쓰이므로 이름을 서로 다르게 둡니다.

직접 해보기

피그마에서 도형을 하나 새로 그려 두 방법 중 하나로 사진에 적용해 봅니다. 무엇을 그렸든 아래로 확인합니다.

브라우저 화면의 잘린 모양이 피그마에서 본 모양과 같습니다.
창 너비를 줄였을 때, 방법 A는 모양이 그대로 있고 방법 B는 요소를 따라 함께 줄어듭니다.
개발자 도구(F12)의 Elements 탭에서 .photo를 골랐을 때 clip-path 값이 취소선 없이 적용돼 있습니다.
방법 B라면 url(#...)의 이름이 문서 안 <clipPath>의 id와 글자 하나까지 같습니다.

코칭 프롬프트

여기까지의 내용을 혼자 해 보다 막히면 아래 프롬프트를 대화형 AI(ChatGPT·Claude·Gemini)에 붙여 넣어 한 단계씩 도움을 받습니다.

실습에 쓰던 대화창이 아니라 새 대화창에 붙여 넣습니다. 앞서 다른 요청을 시킨 대화창에는 그 요청의 응답이 남아 있어, 그 위에 얹으면 답이 뒤섞입니다.

아래는 CSS clip-path 실습을 스스로 마치기 위한 요청입니다.
정답 코드를 통째로 주지 말고, 한 번에 다음 한 단계만 알려 주세요.
제가 그 단계를 해 본 뒤 결과를 적으면 그때 다음 단계를 알려 주세요.

- 지금까지 한 것: {지금까지 한 것}
- 막힌 지점과 화면에 나온 모습: {막힌 지점}
- 내가 만들려는 모양: {만들려는 모양}

먼저 막힌 까닭이 무엇인지 한 가지로 짚어 주세요.
polygon 좌표 순서, 함수가 서로 달라 애니메이션이 이어지지 않는 문제, forwards 누락처럼
처음 배우는 사람이 자주 놓치는 부분이 보이면 그 자리를 짚어 주세요.

아래는 CSS clip-path 실습을 스스로 마치기 위한 요청입니다.
정답 코드를 통째로 주지 말고, 한 번에 다음 한 단계만 알려 주세요.
제가 그 단계를 해 본 뒤 결과를 적으면 그때 다음 단계를 알려 주세요.

- 지금까지 한 것: index.html과 style.css를 만들고 polygon으로 팔각형까지 잘랐습니다.
- 막힌 지점과 화면에 나온 모습: 마우스를 올리면 사진이 부드럽게 펼쳐지지 않고 한 번에 바뀝니다.
- 내가 만들려는 모양: 원형으로 잘려 있다가 마우스를 올리면 사각형 전체가 보이게 하고 싶습니다.

먼저 막힌 까닭이 무엇인지 한 가지로 짚어 주세요.
polygon 좌표 순서, 함수가 서로 달라 애니메이션이 이어지지 않는 문제, forwards 누락처럼
처음 배우는 사람이 자주 놓치는 부분이 보이면 그 자리를 짚어 주세요.

{지금까지 한 것} – 어디까지 만들었는지 적습니다. 예: polygon으로 팔각형까지 잘랐습니다.
{막힌 지점} – 화면에 실제로 나온 모습을 적습니다. 예: 마우스를 올려도 아무 변화가 없습니다.
{만들려는 모양} – 목표하는 모양을 적습니다. 예: 아래쪽 두 모서리만 둥글게 자르고 싶습니다.

AI가 완성된 CSS를 통째로 내놓으면 “코드 말고, 지금 값 중 어느 값을 바꿔야 하는지만 알려 주세요”라고 다시 요청합니다. 막힌 지점을 적을 때는 화면에 나온 모습과 함께 지금 쓰고 있는 clip-path 값을 그대로 적어야 답이 정확해집니다.

2 – mask로 이미지와 영상 오려내기

2.1 – SVG 한 장으로 이미지 카드 오려내기

web_clip 폴더 안에 images 폴더를 만듭니다.
images 폴더 안에 card.svg 파일을 만들고 아래 코드를 붙여 넣습니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
  <!-- filled area stays visible, empty area is hidden -->
  <path d="M0,60 Q0,0 60,0 L540,0 Q600,0 600,60 L600,300 Q300,460 0,300 Z" fill="#000"/>
</svg>

style.css의 .photo 규칙에서 animation 줄을 지우고, 그 자리에 아래 세 줄을 넣습니다.

  /* keep only the area painted in card.svg */
  mask-image: url("./images/card.svg");
  mask-repeat: no-repeat;
  mask-size: 100%;

@keyframes reveal 규칙을 지우고 저장한 다음, 브라우저를 새로고침합니다.

사진의 위쪽 두 모서리가 둥글어지고 아래쪽 변이 물결처럼 파인 모양으로 보입니다. mask는 다른 그림의 불투명한 부분만큼만 요소를 보이게 하는 속성입니다. 종이에 모양 틀을 대고 그 안쪽만 남기는 것과 같습니다.

card.svg에서 검은색으로 칠한 부분이 화면에 남고, 아무것도 칠하지 않은 투명한 부분은 가려집니다. 색은 무엇이든 상관없고 칠했는지 아닌지가 기준이므로, 마스크로 쓸 SVG는 배경을 투명하게 두고 보일 영역만 채웁니다.

mask-size: 100%는 마스크 그림을 요소 너비에 맞춰 늘리는 값이고, mask-repeat: no-repeat는 마스크 그림이 모자란 자리를 반복해 채우지 않게 하는 값입니다. 두 줄을 빼면 마스크가 원래 크기 그대로 왼쪽 위에 놓인 채 바둑판처럼 되풀이됩니다.

mask 계열 속성은 주요 브라우저에서 접두사 없이 쓸 수 있습니다(Baseline 널리 사용 가능, 2023년 12월부터. 2026-09-09 확인, MDN mask). 예전 자료에 나오는 -webkit-mask-image를 함께 적는 방식은 더 이상 필요하지 않습니다.

2.2 – 그라데이션으로 가장자리 흐리게 지우기

.photo 규칙의 mask-image 줄을 아래와 같이 바꾸고 저장합니다.

  /* fade out toward the bottom edge */
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);

브라우저를 새로고침합니다.

사진 아래쪽이 서서히 옅어지다가 사라집니다. 마스크 그림 자리에는 파일뿐 아니라 그라데이션도 넣을 수 있습니다. 불투명한 #000 부분은 그대로 보이고, transparent로 갈수록 가려지므로 경계가 부드럽게 지워집니다.

그림 파일 없이 한 줄로 만들 수 있어, 긴 글의 아래쪽을 흐리게 처리하거나 배경 사진을 아래 내용과 자연스럽게 잇는 자리에 자주 쓰입니다.

마스크가 무엇을 기준으로 판단할지는 mask-mode 속성이 정합니다. 기본값 match-source는 그림의 투명도를 기준으로 삼습니다. luminance로 바꾸면 밝기를 기준으로 삼아, 흰색에 가까운 부분이 남고 검은색에 가까운 부분이 가려집니다.

2.3 – 영상에 마스크 두 장 겹쳐 쓰기

web_clip 폴더에 영상 파일 하나를 sample.mp4 이름으로 넣습니다.
index.html의 <div class="frame"> 아래에 아래 코드를 추가합니다.

  <div class="video-box">
    <video class="movie" src="sample.mp4" autoplay muted loop playsinline></video>
  </div>

style.css 맨 아래에 아래 규칙을 추가하고 저장합니다.

.video-box {
  width: 600px;
  height: 0;
  padding-bottom: 56.25%; /* keep a 16:9 box */
  position: relative;
  margin-top: 40px;
}

.movie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* two mask layers, listed in the same order */
  mask: url("./images/card.svg") no-repeat 40px 0,
        url("./images/card.svg") no-repeat 320px 120px;
  mask-size: 240px, 140px;
}

브라우저를 새로고침합니다.

영상이 크고 작은 두 조각으로만 보입니다. mask는 여러 속성을 한 줄에 묶어 적는 단축 속성이고, 쉼표로 나누면 마스크를 여러 장 겹쳐 쓸 수 있습니다. 각 조각 뒤의 40px 0과 320px 120px는 그 마스크가 놓일 가로·세로 위치입니다.

mask-size도 쉼표로 나눠 적으며, 적은 순서가 mask에 적은 순서와 짝을 이룹니다. 순서가 어긋나면 큰 조각과 작은 조각의 크기가 서로 바뀝니다.

height: 0과 padding-bottom: 56.25%를 함께 쓴 것은 화면 너비가 달라져도 16:9 비율을 유지하기 위해서입니다. 세로 여백을 너비의 비율로 지정하면 상자의 높이가 너비를 따라 늘고 줄어듭니다.

영상이 검은 화면으로만 보이면 sample.mp4 파일 이름과 위치를 먼저 확인합니다. 파일이 web_clip 폴더 안에 있고 이름이 정확히 같아야 재생됩니다. 소리가 있는 영상은 muted가 있어야 자동 재생됩니다.

2.4 – 두 속성 가운데 무엇을 쓸지 가려내기

지금까지 만든 예제를 하나씩 열어 보며, 각 예제가 잘린 경계가 또렷한지 흐린지 확인합니다.
아래 표를 보고 지금 만들려는 화면이 어느 쪽에 가까운지 판단합니다.

기준	clip-path	mask
경계	또렷하게 잘림	흐리게 지우는 것까지 가능
모양을 정하는 방법	좌표와 도형 함수	그림 파일 또는 그라데이션
여러 장 겹치기	하나만 적용	쉼표로 여러 장
애니메이션	같은 함수끼리 부드럽게 이어짐	위치·크기 변화로 표현

경계가 칼로 자른 듯 또렷해야 하면 clip-path를 쓰고, 흐릿하게 사라지거나 복잡한 무늬로 지워야 하면 mask를 씁니다. 도형이 단순한 다각형이면 좌표만 적으면 되는 clip-path가 빠르고, 곡선이 섞인 모양이면 그림 파일을 그대로 쓰는 mask가 다루기 쉽습니다.

지금까지 한 작업이 제대로 됐는지는 아래 다섯 가지로 가려냅니다. 세 가지 이상 맞으면 다음 단계로 넘어갑니다.

브라우저를 새로고침해도 잘린 모양이 그대로 유지됩니다.
잘린 바깥 영역에 흰 테두리나 남은 조각이 보이지 않습니다.
창 너비를 줄여도 가로 스크롤 막대가 생기지 않습니다.
마우스를 올리거나 페이지를 다시 열었을 때 의도한 대로 변화가 일어납니다.
개발자 도구 콘솔(F12 키)에 파일을 찾지 못했다는 메시지가 없습니다.

코칭 프롬프트

마스크 부분을 혼자 해 보다 막히면 아래 프롬프트를 대화형 AI에 붙여 넣어 한 단계씩 도움을 받습니다.

아래는 CSS mask 실습을 스스로 마치기 위한 요청입니다.
정답 코드를 통째로 주지 말고, 한 번에 다음 한 단계만 알려 주세요.
제가 그 단계를 해 본 뒤 결과를 적으면 그때 다음 단계를 알려 주세요.

- 지금까지 한 것: {지금까지 한 것}
- 막힌 지점과 화면에 나온 모습: {막힌 지점}
- 마스크로 쓰는 그림: {쓰는 그림}

먼저 막힌 까닭이 무엇인지 한 가지로 짚어 주세요.
마스크 파일 경로, SVG 배경이 투명하지 않은 문제, mask-size와 마스크 개수의 순서가 어긋난 문제처럼
처음 배우는 사람이 자주 놓치는 부분이 보이면 그 자리를 짚어 주세요.

아래는 CSS mask 실습을 스스로 마치기 위한 요청입니다.
정답 코드를 통째로 주지 말고, 한 번에 다음 한 단계만 알려 주세요.
제가 그 단계를 해 본 뒤 결과를 적으면 그때 다음 단계를 알려 주세요.

- 지금까지 한 것: card.svg를 만들어 사진에 마스크를 적용했습니다.
- 막힌 지점과 화면에 나온 모습: 사진이 통째로 사라져 아무것도 보이지 않습니다.
- 마스크로 쓰는 그림: 별 모양을 그린 SVG 파일이며 배경에 흰색을 칠해 두었습니다.

먼저 막힌 까닭이 무엇인지 한 가지로 짚어 주세요.
마스크 파일 경로, SVG 배경이 투명하지 않은 문제, mask-size와 마스크 개수의 순서가 어긋난 문제처럼
처음 배우는 사람이 자주 놓치는 부분이 보이면 그 자리를 짚어 주세요.

{지금까지 한 것} – 어디까지 만들었는지 적습니다. 예: card.svg로 사진을 오려내는 데까지 했습니다.
{막힌 지점} – 화면에 나온 모습을 적습니다. 예: 사진이 통째로 사라집니다.
{쓰는 그림} – 마스크로 쓰는 그림이 무엇인지 적습니다. 예: 별 모양 SVG 파일.

사진이 통째로 사라지는 문제는 대부분 마스크 파일 경로가 어긋났거나 그림에 칠한 영역이 없어서 생깁니다. 막힌 지점을 적을 때 mask-image에 적은 경로를 그대로 함께 적으면 답이 정확해집니다.

CSS

1 – clip-path로 표시 영역 자르기

1.1 – 작업 환경 준비

1.2 – polygon()으로 팔각형 만들기

1.3 – inset()으로 잘라 두었다가 마우스를 올려 펼치기

1.4 – 키프레임으로 페이지가 열릴 때 드러내기

1.5 – 피그마에서 그린 도형을 SVG로 가져오기

코칭 프롬프트

2 – mask로 이미지와 영상 오려내기

2.1 – SVG 한 장으로 이미지 카드 오려내기

2.2 – 그라데이션으로 가장자리 흐리게 지우기

2.3 – 영상에 마스크 두 장 겹쳐 쓰기

2.4 – 두 속성 가운데 무엇을 쓸지 가려내기

코칭 프롬프트

댓글 남기기 응답 취소