Div와 CSS를 사용하여 불규칙한 이미지 주위에 텍스트 줄 바꿈을 어떻게 달성할 수 있습니까?

불규칙한 이미지 주변의 텍스트 감싸기

오늘날의 웹 디자인 환경에서는 국가 지도나 복잡한 벡터 그래픽과 같이 직사각형이 아닌 이미지를 접하는 일이 점점 더 흔해지고 있습니다. 이러한 이미지 주위에 텍스트를 배치하면 이미지의 시각적 효과가 향상될 수 있지만 이는 고유한 과제를 제기합니다. 이미지의 불규칙한 테두리에서 일정한 거리를 유지하면서 어떻게 텍스트가 자연스럽게 흐를 수 있습니까?

래핑 영역 정의

이 문제에 대한 창의적인 솔루션은 Tory Lawson이 2011년 블로그 게시물 "Wrapping text around"에서 제안했습니다. 직사각형이 아닌 모양." Lawson의 방법에는 모양 옆에 떠 있는 일련의 div를 만들고 텍스트가 둘러싸일 영역을 차단하는 것이 포함됩니다.

모양 측정 및 나누기

랩 영역을 정의하면 Fireworks와 같은 이미지 편집 소프트웨어를 사용하여 이미지 위에 격자를 배치하고 원하는 텍스트 경계 주위에 경계선을 그립니다. 그런 다음 이 선의 너비를 측정하고 동일한 간격(예: 10픽셀마다)으로 나눕니다.

Divs 만들기

측정이 결정되면 HTML 목록은 일련의 div를 만드는 데 사용됩니다. 각 div는 랩 영역의 수직 간격을 나타내며 오른쪽으로 부동되어 텍스트가 도형 위로 흐르는 것을 방지하는 "차단기" 효과를 생성합니다.

CSS 스타일링

마지막 단계에서는 CSS 스타일을 div와 텍스트에 적용하는 작업이 포함됩니다. 래퍼 div에는 전체 이미지를 둘러싸는 너비와 높이가 할당되고, background-image 속성은 모양의 이미지로 설정됩니다. 스페이서 div에는 간격 측정에 해당하는 높이가 할당되고 차단 효과를 생성하기 위해 오른쪽으로 부동됩니다. 마지막으로 텍스트는 이미지에 표시되도록 인라인 디스플레이와 색상으로 스타일이 지정됩니다.

예제 코드

<div>
<pre class="brush:php;toolbar:false">#wrapper {
  width: 634px;
  height: 428px;
  display: block;
  background-image: url("headshot.jpg");
}
.spacer {
  display: block;
  float: right;
  clear: right;
}
p {
  display: inline;
  color: #FFF;
}

결론

불규칙한 텍스트 줄 바꿈에 대한 쉬운 CSS 솔루션은 없을 수 있지만 모양, Lawson의 방법은 실행 가능한 접근 방식을 제공합니다. 모양을 주의 깊게 측정하고 div를 만들어 둘러싸기 영역을 차단하면 텍스트가 자연스럽게 흐르고 모양의 테두리에서 일정한 거리를 유지하는 시각적으로 매력적인 결과를 얻을 수 있습니다.