CSS `clip-path`의 기초 알아보기

CSS의 clip-path 속성은 요소에 맞춤형 모양을 정의하여 고유한 시각적 효과를 만들 수 있는 강력한 도구입니다. 이 속성을 사용하면 요소를 원이나 다각형 같은 기본 모양으로 자르거나, SVG 경로로 정의된 더 복잡한 모양으로 자를 수 있습니다. clip-path 속성은 맞춤형 레이아웃을 만들고, 디자인을 향상하며, 웹 페이지에 창의성을 더할 때 특히 유용합니다.

이번 포스트에서는 다양한 예제를 통해 clip-path 속성의 기본 사항을 살펴보겠습니다. 여러 가지 모양 유형, 애니메이션, 그리고 SVG를 사용하여 더 고급 클리핑 경로를 만드는 방법과 투명 이미지를 사용하여 클리핑 마스크를 만드는 방법을 다룰 것입니다.

`clip-path`란 무엇인가요?

clip-path 속성은 요소의 보이는 영역을 정의하는 클리핑 영역을 지정할 수 있게 해줍니다. 정의된 영역 밖의 부분은 숨겨지며, 이를 통해 고유한 모양과 효과를 만들 수 있습니다. 이 속성은 정형화된 HTML 요소의 직사각형 모양에서 벗어나고자 하는 디자이너들에게 특히 유용합니다.

예제 코드 스니펫

다양한 모양을 만들기 위해 clip-path 속성을 사용하는 여러 가지 방법을 보여주는 코드 스니펫입니다:

<div class="circle-clip clip"></div>
<div class="ellipse-clip clip"></div>
<div class="polygon-clip clip"></div>
<div class="inset-clip clip clip-responsive"></div>
<div class="animated-clip clip"></div>
<div class="svg-clip"></div>
<div class="image-clip"></div>

<svg width="0" height="0">
  <defs>
    <clipPath id="roundedClip">
      <!-- 뷰박스 좌표를 사용하는 반응형 경로 -->
      <path d="M24 498C10.7452 498 0 487.255 0 474V177C0 163.745 10.7452 153 24 153H200C213.255 153 224 142.255 224 129V24C224 10.7452 234.745 0 248 0H481C494.255 0 505 10.7452 505 24V364C505 377.255 494.255 388 481 388H392C378.745 388 368 398.745 368 412V474C368 487.255 357.255 498 344 498H24Z" />
    </clipPath>
  </defs>
</svg>

<style>
/* 클립된 요소의 공통 스타일 */
.clip {
  display: block;
  background: green;
  margin: 2.5rem auto; /* 요소를 수평 가운데 정렬 */
  width: 500px;
  height: 500px;
}

/* 원형 */
.circle-clip {
  clip-path: circle(50% at 50% 50%);
  /* 요소 내에 중심을 둔 반지름 50%의 원 */
}

/* 타원형 */
.ellipse-clip {
  clip-path: ellipse(50% 25% at 50% 50%);
  /* 요소 내에 중심을 둔 너비 50%, 높이 25%의 타원 */
}

/* 다각형 */
.polygon-clip {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  /* 세 개의 점으로 정의된 삼각형 */
}

/* 사각형으로 자르기(Inset) */
.inset-clip {
  clip-path: inset(10% 20% 10% 20%);
  /* 위와 아래에서 10%, 좌우에서 20% 삽입된 사각형 */
}

.clip-responsive {
  width: 100%;
}

/* 애니메이션 클립을 위한 애니메이션 */
@keyframes clip-animation {
  0% {
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    clip-path: circle(50% at 50% 50%);
  }
}

.animated-clip {
  background-image: url("https://images.unsplash.com/photo-1721332154373-17e78d19b4a4?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxfHx8ZW58MHx8fHx8");
  animation: clip-animation 3s infinite alternate;
}

/* SVG 클리핑 경로 */
.svg-clip {
  width: 505px;
  height: 498px;
  background-color: lightcoral;
  clip-path: url(#roundedClip); /* SVG clipPath 참조 */
  margin: 2.5rem auto; /* 요소를 수평 가운데 정렬 */
  display: block;
}

/* 투명 이미지를 사용한 클리핑 마스크 */
.image-clip {
  width: 300px;
  height: 300px;
  background-image: url('https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=60'); /* 클리핑할 배경 이미지 */
  mask-image: url('path/to/your-transparent-mask.png'); /* 투명 이미지를 마스크로 사용 */
  mask-size: cover; /* 마스크를 요소 전체에 맞게 크기 조정 */
  mask-repeat: no-repeat; /* 마스크 반복 방지 */
  -webkit-mask-image: url('path/to/your-transparent-mask.png'); /* WebKit 지원 */
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
}
</style>

다양한 `clip-path` 기법 설명

1. 원형으로 자르기

.circle-clip {
  clip-path: circle(50% at 50% 50%);
}

이 예제는 반지름이 50%인 원형 클리핑 경로를 생성하며, 요소 내에서 중심이 위치합니다. circle() 함수는 두 개의 매개변수를 사용합니다:

50%: 원의 반지름.
at 50% 50%: 요소 내에서 원의 중심 위치(수평 및 수직 모두 중앙).

2. 타원형으로 자르기

.ellipse-clip {
  clip-path: ellipse(50% 25% at 50% 50%);
}

이 예제는 타원형 클리핑 경로를 생성합니다. ellipse() 함수는 수평 및 수직 반지름과 중심 위치를 정의합니다:

50% 25%: 타원의 수평 및 수직 반지름.
at 50% 50%: 타원의 중심 위치.

3. 다각형(삼각형)으로 자르기

.polygon-clip {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

polygon() 함수는 여러 점을 지정하여 사용자 정의 모양을 정의할 수 있습니다. 이 경우, 세 개의 점을 지정하여 삼각형을 생성합니다:

50% 0%: 상단 점.
0% 100%: 왼쪽 하단 점.
100% 100%: 오른쪽 하단 점.

4. 사각형으로 자르기(Inset)

.inset-clip {
  clip-path: inset(10% 20% 10% 20%);
}

inset() 함수는 각 면에 대한 선택적 삽입 값을 사용하여 사각형 클리핑 경로를 만듭니다:

10% 20% 10% 20%: 각각 위, 오른쪽, 아래, 왼쪽에서 삽입 값입니다.

5. 클리핑 경로 애니메이션

@keyframes clip-animation {
  0% {
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    clip-path: circle(50% at 50% 50%);
  }
}

.animated-clip {
  background-image: url("https://images.unsplash.com/photo-1721332154373-17e78d19b4a4?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxfHx8ZW58MHx8fHx8");
  animation: clip-animation 3s infinite alternate;
}

이 예제에서는 CSS 애니메이션을 사용하여### CSS clip-path의 기초 알아보기

`clip-path`란 무엇인가요?

예제 코드 스니펫

다양한 모양을 만들기 위해 clip-path 속성을 사용하는 여러 가지 방법을 보여주는 코드 스니펫입니다:

<div class="circle-clip clip"></div>
<div class="ellipse-clip clip"></div>
<div class="polygon-clip clip"></div>
<div class="inset-clip clip clip-responsive"></div>
<div class="animated-clip clip"></div>
<div class="svg-clip"></div>
<div class="image-clip"></div>

<svg width="0" height="0">
  <defs>
    <clipPath id="roundedClip">
      <!-- 뷰박스 좌표를 사용하는 반응형 경로 -->
      <path d="M24 498C10.7452 498 0 487.255 0 474V177C0 163.745 10.7452 153 24 153H200C213.255 153 224 142.255 224 129V24C224 10.7452 234.745 0 248 0H481C494.255 0 505 10.7452 505 24V364C505 377.255 494.255 388 481 388H392C378.745 388 368 398.745 368 412V474C368 487.255 357.255 498 344 498H24Z" />
    </clipPath>
  </defs>
</svg>

<style>
/* 클립된 요소의 공통 스타일 */
.clip {
  display: block;
  background: green;
  margin: 2.5rem auto; /* 요소를 수평 가운데 정렬 */
  width: 500px;
  height: 500px;
}

/* 원형 */
.circle-clip {
  clip-path: circle(50% at 50% 50%);
  /* 요소 내에 중심을 둔 반지름 50%의 원 */
}

/* 타원형 */
.ellipse-clip {
  clip-path: ellipse(50% 25% at 50% 50%);
  /* 요소 내에 중심을 둔 너비 50%, 높이 25%의 타원 */
}

/* 다각형 */
.polygon-clip {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  /* 세 개의 점으로 정의된 삼각형 */
}

/* 사각형으로 자르기(Inset) */
.inset-clip {
  clip-path: inset(10% 20% 10% 20%);
  /* 위와 아래에서 10%, 좌우에서 20% 삽입된 사각형 */
}

.clip-responsive {
  width: 100%;
}

/* 애니메이션 클립을 위한 애니메이션 */
@keyframes clip-animation {
  0% {
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    clip-path: circle(50% at 50% 50%);
  }
}

.animated-clip {
  background-image: url("https://images.unsplash.com/photo-1721332154373-17e78d19b4a4?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxfHx8ZW58MHx8fHx8");
  animation: clip-animation 3s infinite alternate;
}

/* SVG 클리핑 경로 */
.svg-clip {
  width: 505px;
  height: 498px;
  background-color: lightcoral;
  clip-path: url(#roundedClip); /* SVG clipPath 참조 */
  margin: 2.5rem auto; /* 요소를 수평 가운데 정렬 */
  display: block;
}

/* 투명 이미지를 사용한 클리핑 마스크 */
.image-clip {
  width: 300px;
  height: 300px;
  background-image: url('https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=60'); /* 클리핑할 배경 이미지 */
  mask-image: url('path/to/your-transparent-mask.png'); /* 투명 이미지를 마스크로 사용 */
  mask-size: cover; /* 마스크를 요소 전체에 맞게 크기 조정 */
  mask-repeat: no-repeat; /* 마스크 반복 방지 */
  -webkit-mask-image: url('path/to/your-transparent-mask.png'); /* WebKit 지원 */
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
}
</style>

다양한 `clip-path` 기법 설명

1. 원형으로 자르기

.circle-clip {
  clip-path: circle(50% at 50% 50%);
}

이 예제는 반지름이 50%인 원형 클리핑 경로를 생성하며, 요소 내에서 중심이 위치합니다. circle() 함수는 두 개의 매개변수를 사용합니다:

50%: 원의 반지름.
at 50% 50%: 요소 내에서 원의 중심 위치(수평 및 수직 모두 중앙).

2. 타원형으로 자르기

.ellipse-clip {
  clip-path: ellipse(50% 25% at 50% 50%);
}

이 예제는 타원형 클리핑 경로를 생성합니다. ellipse() 함수는 수평 및 수직 반지름과 중심 위치를 정의합니다:

50% 25%: 타원의 수평 및 수직 반지름.
at 50% 50%: 타원의 중심 위치.

3. 다각형(삼각형)으로 자르기

.polygon-clip {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

polygon() 함수는 여러 점을 지정하여 사용자 정의 모양을 정의할 수 있습니다. 이 경우, 세 개의 점을 지정하여 삼각형을 생성합니다:

50% 0%: 상단 점.
0% 100%: 왼쪽 하단 점.
100% 100%: 오른쪽 하단 점.

4. 사각형으로 자르기(Inset)

.inset-clip {
  clip-path: inset(10% 20% 10% 20%);
}

inset() 함수는 각 면에 대한 선택적 삽입 값을 사용하여 사각형 클리핑 경로를 만듭니다:

10% 20% 10% 20%: 각각 위, 오른쪽, 아래, 왼쪽에서 삽입 값입니다.

5. 클리핑 경로 애니메이션

@keyframes clip-animation {
  0% {
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    clip-path: circle(50% at 50% 50%);
  }
}

.animated-clip {
  background-image: url("https://images.unsplash.com/photo-1721332154373-17e78d19b4a4?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxfHx8ZW58MHx8fHx8");
  animation: clip-animation 3s infinite alternate;
}

이 예제에서는 CSS 애니메이션을 사용하여 clip-path가 점(0%)에서 완전한 원(50%)으로 변경됩니다. 애니메이션은 무한히 교대로 반복되어 동적인 효과를 만듭니다.

6. SVG 클리핑 경로 사용

.svg-clip {
  clip-path: url(#roundedClip);
}

url() 함수는 SVG <clipPath> 요소를 참조하여 더 복잡한 모양을 만들 수 있게 해줍니다. SVG 경로 데이터는 사용자 정의 모양을 정의하며, clip-path 속성은 이를 요소에 적용합니다.

7. 투명 이미지를 사용한 클리핑 마스크

.image-clip {
  width: 300px;
  height: 300px;
  background-image: url('https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=60'); /* 클리핑할 배경 이미지 */
  mask-image: url('path/to/your-transparent-mask.png'); /* 투명 이미지를 마스크로 사용 */
  mask-size: cover; /* 마스크를 요소 전체에 맞게 크기 조정 */
  mask-repeat: no-repeat; /* 마스크 반복 방지 */
  -webkit-mask-image: url('path/to/your-transparent-mask.png'); /* WebKit 지원 */
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
}

이 예제에서는 CSS mask-image 속성을 사용하여 투명 이미지를 클리핑 마스크로 활용합니다. 투명한 부분은 숨겨지고 불투명한 부분만 요소에 나타납니다.

결론

CSS의 clip-path 속성은 맞춤형 모양과 고유한 시각적 효과를 만들 수 있는 다양한 가능성을 제공합니다. circle(), ellipse(), polygon(), inset() 같은 함수와 SVG 경로, 투명 이미지를 참조하여 정교한 디자인과 동적 애니메이션을 구현할 수 있습니다. 이 속성은 웹 디자이너가 창의성과 개성을 프로젝트에 더하는 데 매우 유용한 도구입니다.

이러한 다양한 기법을 실험해보며 웹 디자인을 어떻게 개선할 수 있는지 확인해 보세요!

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

[CSS-in-JS] 이모션(Emotion) 라이브러리 소개 (2)	2024.09.27
CSS의 position: fixed vs position: sticky 이해하기: 간단 비교 (1)	2024.09.02
CSS의 @layer 소개: 스타일을 조직하고 제어하는 새로운 방법 (0)	2024.08.25
CSS에서 z-index의 최소값과 최대값은 얼마일까? (0)	2024.07.07
CSS 기술 학습 자료(웹사이트) 소개 (0)	2024.06.19

단순함연구소 UX개발실

CSS `clip-path`의 기초 알아보기

`clip-path`란 무엇인가요?

예제 코드 스니펫

다양한 `clip-path` 기법 설명

1. 원형으로 자르기

2. 타원형으로 자르기

3. 다각형(삼각형)으로 자르기

4. 사각형으로 자르기(Inset)

5. 클리핑 경로 애니메이션

`clip-path`란 무엇인가요?

예제 코드 스니펫

다양한 `clip-path` 기법 설명

1. 원형으로 자르기

2. 타원형으로 자르기

3. 다각형(삼각형)으로 자르기

4. 사각형으로 자르기(Inset)

5. 클리핑 경로 애니메이션

6. SVG 클리핑 경로 사용

7. 투명 이미지를 사용한 클리핑 마스크

결론

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

티스토리툴바

CSS `clip-path`의 기초 알아보기

clip-path란 무엇인가요?

예제 코드 스니펫

다양한 clip-path 기법 설명

1. 원형으로 자르기

2. 타원형으로 자르기

3. 다각형(삼각형)으로 자르기

4. 사각형으로 자르기(Inset)

5. 클리핑 경로 애니메이션

clip-path란 무엇인가요?

예제 코드 스니펫

다양한 clip-path 기법 설명

1. 원형으로 자르기

2. 타원형으로 자르기

3. 다각형(삼각형)으로 자르기

4. 사각형으로 자르기(Inset)

5. 클리핑 경로 애니메이션

6. SVG 클리핑 경로 사용

7. 투명 이미지를 사용한 클리핑 마스크

결론

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

'UX 개발/CSS' Related Articles

티스토리툴바

`clip-path`란 무엇인가요?

다양한 `clip-path` 기법 설명

`clip-path`란 무엇인가요?

다양한 `clip-path` 기법 설명