logo

shape-outside와 polygon 함수

CSS의 shape-outside 속성과 polygon 함수를 사용하여 이미지 모양에 맞게 텍스트를 감싸는 방법

shape-outside

기본적으로 HTML 요소는 사각형의 박스모델을 가지고 있다. CSS의 shape-outside를 사용하면 사각형이 아닌 다양한 도형의 모양으로 박스모델을 정의할 수 있게 된다.

기본 사용방법

shape-outside 속성은 float 속성과 함께 사용되어야 한다. shape-outside 속성에 도형을 정의하면, 해당 도형의 외곽선을 따라 텍스트가 감싸지게 된다.

.shape {
  float: left; /* float 속성을 사용해야 shape-outside가 적용 */
  width: 200px;
  height: 200px;
  shape-outside: circle(50%); /* 원형 모양으로 텍스트 감싸기 */
}

예제

CSS Shape Outside Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

post image

텍스트가 이미지의 원형 모양을 따라 감싸지는 것을 볼 수 있다.

이것을 이용해 about 페이지의 프로필 이미지 주변에 텍스트를 감싸는 효과를 주었다.

이 영역은 polygon() 함수를 사용해 정의하였다.

    .shape-outside {
        float: right;
        shape-outside: polygon(37% 0%, 0% 0%, 100% 0%, 100% 100%, 6% 100%, 9% 97%, 12% 94%, 20% 86%, 24% 83%, 29% 63%, 16% 59%, 9% 50%, 10% 39%, 20% 30%, 30% 20%, 33% 15%)
    }
post image

polygon() 함수

polygon(x1 y1, x2 y2, ...)로 사용되며 각 쌍은 도형의 꼭지점 좌표를 나타내며 다각형을 그릴때 사용된다. 좌표는 백분율(%) 또는 픽셀(px) 단위로 지정할 수 있다.

    clip-path: polygon(
      0% 20%,
      60% 20%,
      60% 0%,
      100% 50%,
      60% 100%,
      60% 80%,
      0% 80%
    );

따라서 좌표값을 촘촘히 지정할수록 더 정교한 도형을 만들 수 있다.

정리

  • HTML 요소는 기본적으로 사각형 박스 모델을 따른다.
  • shape-outside는 float 속성이 있어야만 동작한다.
  • width와 height가 명시되어야 도형 계산이 가능하다.
  • 도형과 텍스트 사이의 간격은 shape-margin으로 조정한다.
  • clip-path와 함께 사용하면 보이는 모양과 텍스트 흐름을 일치시킬 수 있다.
  • polygon() 좌표는 % 기준으로 계산되며, 점이 많을수록 곡선처럼 보인다.

언제 사용하면 좋은가

  • 프로필 이미지나 인물 사진처럼 윤곽선을 따라 텍스트를 감싸야 할 때
  • 매거진, 블로그, 인터뷰 레이아웃처럼 텍스트가 시각적으로 어우러져야 할 때
  • 단조로운 박스형 레이아웃에서 벗어나고 싶을 때

언제 사용하지 말아야 하는가

  • 단순한 레이아웃 정렬 목적일 때 (그럴 땐 flex나 grid가 더 적합함)
  • 본문 텍스트가 많고 가독성이 중요한 문서형 페이지
  • 반응형 레이아웃에서 도형의 비율이 깨질 위험이 있을 때