개요
기존에 clip-path: rect로 작성된 코드가 일부 브라우저에서 제대로 동작하지 않습니다.
주어진 인자에 따라 사각형의 형태로 영역이 잘려야 하나, 예상과 달리 전부 잘려서 아무것도 보이지 않는 상태가 됩니다.
2024년 9월 18일 현재 구글 크롬 브라우저, 마이크로소프트 엣지 브라우저로 아래의 링크 접속 시 rect 예제가 제대로 보이지 않습니다. 반면, 파이어폭스 브라우저에서는 이미지가 보입니다.
아래는 MDN clip-path 문서입니다.
clip-path - CSS: Cascading Style Sheets | MDN
The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
developer.mozilla.org
MDN 예제가 수정될 가능성이 있으니 이미지 첨부
rect의 인자가 가지는 의미
round 키워드와 border-radius는 빼고 생각하겠습니다. x를 행, y를 열로 생각해서 글을 썼으니 x를 가로, y를 세로로 간주하시려면 x와 y를 반대로 생각해 주십시오.
파이어폭스 브라우저에서 예제가 렌더링되는 방식을 유추해 보면, 아래와 같이 사용됨을 추측할 수 있었습니다.
clip-path: rect(x1 y1 x2 y2)파이어폭스 브라우저는 (x1, y1), (x2, y2)의 상대적인 위치와 관계없이 해당 좌표 사이의 영역을 잘라서 보여줍니다.
위의 네 가지 형태로 작성해도 무방하다는 것입니다. 파이어폭스 브라우저로 위의 네 가지 경우가 같다는 것을 보여 드리겠습니다.
제 기억상 이전에는 크롬 브라우저에서도 MDN 예제가 정상적으로 출력되었기 때문에, 아마도 같은 방식으로 영역을 잘라서 출력했을 가능성이 높습니다. 이러한 변경사항이 적용되기 전에 작업된 코드 블록은 정상적으로 작동하다가 해당 업데이트 이후에 정상적으로 표시되지 않게 되었을 겁니다.
위의 파이어폭스 방식으로 기준도 없이 적당히 (x1, y1), (x2, y2) 좌표를 전달하는 식으로 코드가 작성되어 있었다면 수정이 필요합니다.
인자 순서 교정
clip-path: rect(top right bottom left)정상적으로 표시하기 위해서는 top, right, bottom, left를 순서대로 작성하여야 합니다. 이를 x, y로 나타내면 아래와 같습니다.
clip-path: rect(x1 y2 x2 y1)top right bottom left의 css 순서를 모르고 보면 완전히 불친절하고 뒤죽박죽입니다.
인자의 순서가 중요하다는 것을 알게 되었으니 크롬 브라우저 상에서 MDN 예제를 수정해 보겠습니다.
(5px, 5px) ~ (160px, 145px)까지 표시하는 게 목적이었으므로 5px 145px 160px 5px로 수정합니다.
잘 표시됩니다.
auto 활용 팁
auto 키워드를 사용해서 각 자리의 값을 대체할 수 있는데, top과 left는 0, bottom과 right는 100%입니다. 전부 auto일 때 전체 영역이 그대로 표시되어야 한다는 점을 생각하면 쉽게 기억할 수 있습니다. (0, 0) ~ (100%, 100%) 사이의 영역을 잘라내면 전체 영역이 그대로 표시됩니다.
별점에 따라 별 아이콘을 색칠하는 영역의 크기가 달라져야 한다고 생각해 봅시다. 이 경우 좌우로만 크기가 달라지면 됩니다.
top, bottom, left에 해당하는 부분은 auto로 고정해 놓고 right에 해당하는 영역만 값을 달라지게 하면 별의 채우기를 달리 할 수 있습니다.
clip-path: rect(auto right auto auto)
이미지만 별 아이콘으로 바꾸고 얼마나 채워야 하는지를 변수로 관리하면 어느새 완성되어 있을 것입니다.
이와 같이 한 방향으로만 크기가 달라지는 영역은 나머지 인자를 auto로 고정해 놓고 사용하면 편리하게 작업할 수 있습니다.
참고
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/rect
https://issues.chromium.org/issues/334192367: chromium - "크롬 브라우저 측의 오류가 아니라 MDN 측에서 실수한 것"