CSS와 Div를 사용하여 불규칙한 이미지 주위에 텍스트를 감싸는 방법은 무엇입니까?

직사각형이 아닌 이미지 주위에 텍스트를 감싸는 방법은 무엇입니까?

불규칙한 테두리를 감싸도록 텍스트 흐름을 사용자 정의하면 웹 사이트나 애플리케이션의 시각적 매력을 향상시킬 수 있습니다. 이 기사에서는 Tory Lawson이 2011년 블로그 게시물 "직사각형이 아닌 도형 주위에 텍스트 감싸기"에서 제안한 방법을 살펴봅니다.

1단계: 감싸기 영역 정의

이미지 편집 프로그램을 사용하여, 텍스트가 끝나야 하는 위치를 나타내는 경계선을 그려 원하는 텍스트 경계를 결정합니다.

2단계: 목록

일정한 간격(예: 10픽셀마다)으로 랩 영역의 너비를 측정합니다. 스페이서 div의 너비로 사용할 값을 기록합니다.

3단계: 마크업 및 CSS 구현

마크업:

  <div>
<p> <strong>CSS:</strong></p>
<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;
}

이것은 기술은 div를 플로팅하여 모양의 영역을 차단함으로써 텍스트가 직사각형이 아닌 이미지 주위를 둘러싸면서 테두리로부터 일정한 거리를 유지하도록 합니다.

결론

비직사각형 이미지 주위에 텍스트 감싸기 맞춤형 접근 방식이 필요합니다. 직접적인 CSS 솔루션은 없지만 이 문서에 설명된 방법을 사용하면 원하는 효과를 효과적으로 얻을 수 있습니다.