웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

[CSS] css 속성 clip-path 배우기. 원, 타원, 다각형

Last Modified : 2023-01-23 / Created : 2023-01-23
5,664
View Count
CSS 스타일 속성 중에서 사용하면 매우 유용하지만 예전에는 잘 사용하지 않던 속성 중 하나인 clip-path에 대하여 알아봅니다. 예전에는 브라우저 지원 관련하여 잘 사용되지 않았습니다. 하지만 최근의 메이저 브라우저는 clip-path의 경우 대부분 지원하죠. 다만 clip 속성의 경우 Deprecated되었으니 clip-path로 대체하여 사용하는 것이 좋습니다.




# css clip-path 알아보기


CSS 속성 clip-path는 대상이 되는 엘리먼트에 사용하여 circle, ellipsis, polygon(다각형) 등의 원하는 영역만 가위로 자른 것처럼 보여줄 수 있습니다. 쉽게 얘기해 네모난 모양의 엘리먼트를 원이나 별 모양으로 보여줄 수도 있고 아니면 자동차 처럼 만드는 것 역시 가능합니다.

"clip-path를 사용하여 원, 타원, 다각형 영역을 쉽게 구현 가능"


참고로 '잘라서 보여준다'라고 적은 이유가 있는데 pointer: cursor; 등의 값으로 해당 영역의 마우스 커서를 변경했을 때 실제로 잘라낸 부분은 커서 변경 등의 스타일이 적용되지 않기 때문입니다. 이점 참고 하시기 바랍니다.

다음으로 먼저 간단한 문법입니다.

clip-path: circle(value);
// value : 반지름

clip-path: ellipsis(value, value);
clip-path: polygon(value value, ...);


보시는 것처럼 문법은 매우 간단합니다. 지원하는 circle(), ellipsis(), polygon()를 정하고 내부에 값만 선언하면 됩니다. 그럼 아래에서는 몇 가지 예제를 만들어보고 더 자세히 알아보겠습니다.


! clip-path 예제보기


아래는 몇 가지 예제를 만들어보고 실제로 구현된 모습이 어떻게 나타나게 되는지 알아보려고 합니다. 가장 먼저 원과 타원 그리고 다각형 형태를 css clip-pat를 사용하여 만들어보겠습니다.


@ 원 만들기, circle
가장 먼저 원 모양으로 잘라 만드는 방법을 알아보겠습니다. 공통적으로 test-path 클래스 이름의 태그를 만들고 여기에 원하는 도형을 만드는 예제입니다. 아래는 원을 만들겠습니다.
<div class="test-path test-path-circle">
  clip-path : Circle
</div>

이제 원을 만들기 위해서 아래와 같이 스타일 속성을 적용해봅니다. 위에는 공통으로 적용될 속성이고 아래는 원, 타원, 다각형 구분을 위해 적용할 스타일입니다.
.test-path {
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  font-weight: bold;
  background: #ff7777;
}

.test-path-circle {
  clip-path: circle(100px);
}

위 예제를 구현하여 각각 반지름 100px, 50px, 25px 크기의 원을 만들면 아래와 같이 나타나게 됩니다.

<div class="test-path test-path-circle-1">
clip-path : Circle
</div>
<div class="test-path test-path-circle-2">
clip-path : Circle
</div>
<div class="test-path test-path-circle-3">
clip-path : Circle
</div>
<style>
.test-path {
width: 200px;
height: 200px;
clip-path: circle(100px);
background: #ff7777;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-circle-1 {
clip-path: circle(100px);
}
.test-path-circle-2 {
clip-path: circle(50px);
}
.test-path-circle-3 {
clip-path: circle(25px);
}
</style>

각각의 원을 만들 수 있었습니다. 다음은 타원을 만들어봅니다.


@ 타원 만들기, eclipse
타원 역시 위 예제와 비슷합니다. 타원의 경우 상하 좌우의 길이를 전달해야 합니다. 아래와 같이 css를 적용합니다.
.test-path-ellipse {
  width: 200px;
  height: 200px;
  clip-path: ellipse(100px 50px);
}

이제 위 예제를 구현하면 아래와 같이 타원이 각각 나타납니다.
<div class="test-path-ellipse test-path-ellipse-1">
ellipse(100px 50px)
</div>
<div class="test-path-ellipse test-path-ellipse-2">
ellipse(50px 100px)
</div>
<style>
.test-path-ellipse {
width: 200px;
height: 200px;
clip-path: circle(100px);
background: #77c7ff;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-ellipse-1 {
clip-path: ellipse(100px 50px);
}
.test-path-ellipse-2 {
clip-path: ellipse(50px 100px);
}
</style>

타원의 경우 보시는 것처럼 원과 비슷하게 동작하고 구현 가능합니다. 이제 마지막으로 다각형 polygon을 사용하여 만들어봅니다.


@ 다각형 만들기
다각형을 만들기 위해서는 polygon을 사용하며 각각의 값에 콤마를 사용합니다. 각각의 콤마를 연결하여 도형을 만들다고 생각하시면 되며 순서대로 연결되므로 순서도 영향을 미칠 수 있음을 주의하시기 바랍니다. 그럼 아래에서 몇 가지 도형을 먼저 만들어보겠습니다.

가장 먼저 삼각형 도형을 만들어봅니다.
.test-path-polygon-1 {
  clip-path: polygon(100px 0px, 200px 200px, 0 200px);
}

위 코드를 구현하면 아래와 같습니다.
<div class="test-path-polygon test-path-polygon-1">
polygon(100px 0px, 200px 200px, 0 200px)
</div>
<style>
.test-path-polygon {
width: 200px;
height: 200px;
background: green;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-polygon-1 {
clip-path: polygon(100px 0px, 200px 200px, 0 200px);
}
</style>


다음은 마름모 도형을 만들어보겠습니다.
.test-path-polygon-2 {
  clip-path: polygon(100px 0px, 200px 100px, 100px 200px, 0 100px);
}


이를 구현하면 아래와 같이 나타나게 됩니다.
<div class="test-path-polygon test-path-polygon-2">
polygon(100px 0px, 200px 100px, 100px 200px, 0 100px)
</div>
<style>
.test-path-polygon {
width: 200px;
height: 200px;
background: green;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-polygon-2 {
clip-path: polygon(100px 0px, 200px 100px, 100px 200px, 0 100px);
}
</style>


마름모 역시 간단하게 구현할 수 있었습니다.


여기까지 clip-path 속성을 사용한 몇 가지 예제도 함께 알아보았습니다. 이처럼 clip-path를 사용하면 간단한 도형들을 손쉽게 구현할 수 있다는 장점이 있습니다. 기타 주의할 점은 위에도 말했지만 clip-path가 적용된 부분은 클릭 영역 포함되고 텍스트가 포함된 경우 동일하게 잘려서 나타납니다.

Previous

전처리기 sass/scss css로 컴파일 변환하기

Previous

css 속성 position: fixed 사용시 부모 요소에 relative 이슈 해결