CSS를 사용하여 직사각형이 아닌 이미지 주위에 텍스트를 어떻게 감쌀 수 있습니까?

직사각형이 아닌 이미지 주위의 텍스트 감싸기: 가이드

직사각형이 아닌 이미지 주위에 텍스트를 넣을 수 있나요? 텍스트가 국가 모양이나 기타 불규칙한 모양에 매끄럽게 일치하는 이 효과를 얻으려면 블로그 게시물에서 Tory Lawson이 공유한 방법을 살펴보겠습니다.

1단계: 랩 영역 설정

텍스트가 감싸야 할 영역을 식별하는 것부터 시작하세요. Fireworks와 같은 이미지 편집 소프트웨어를 사용하여 이 작업을 수행할 수 있습니다. 적절한 간격으로 그리드를 설정한 다음 약간의 여백을 고려하여 원하는 텍스트 끝 위치를 나타내는 경계선을 그립니다.

2단계: 목록 만들기

이 불규칙한 모양의 너비를 미리 정의된 간격(예: 10픽셀)으로 측정합니다. 이러한 측정값을 목록에 기록하십시오. 이 목록은 다음 단계에서 div 생성을 안내합니다.

3단계: Div 구축 및 CSS 적용

목록의 각 측정에 대한 div 요소를 생성하고 중첩합니다. 래퍼 div 내에 있습니다. 이러한 div를 오른쪽으로 플로팅하고 오른쪽으로 플로팅하는 요소가 모두 지워졌는지 확인하세요. 마지막으로 래퍼 div의 높이와 너비, 불규칙한 모양의 배경 이미지를 설정합니다.

코드 예

다음은 Tory Lawson의 방법을 기반으로 단순화된 코드 예입니다. :

<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 옵션만큼 간단하지는 않지만 이 방법은 웹 디자인에서 영향력 있는 시각 효과를 만들기 위한 해결 방법을 제공합니다.