CSS를 사용하여 원형 요소 주위에 단락 텍스트 블록을 래핑하는 방법.
콘텐츠 프레젠테이션을 좀 더 흥미롭고 잡지 스타일로 만들고 싶다면 CSS를 사용하여 흥미로운 방식으로 텍스트를 정렬하고 요소에 줄 바꿈할 수 있습니다.
먼저 HTML 콘텐츠를 추가해 보겠습니다.
<article class="post">
<img
class="circle"
src="https://www.fwz-elektrotechnik.de/wp-content/uploads/2014/11/Globus-Wikipedia-Kopie-1.png"
alt="A globus"
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
praesentium aliquid quam ut sint explicabo praesentium aliquid quam ut sint
voluptas omnis, quis, est vitae?
</p>
</article>
<article> 요소에는 post라는 클래스가 있습니다. 및 <img> 요소에는 .circle라는 클래스가 있습니다. .
이제 다음 CSS를 추가하세요.
.post {
max-width: 800px;
margin: 3rem auto;
}
.circle {
float: right;
height: 30vw;
margin-left: 1rem;
margin-left: calc(1rem + 2vw);
object-fit: cover;
shape-outside: circle(50%);
width: 30vw;
}결과는 다음과 같아야 합니다.
나쁘지 않죠?
"마법"은 shape-outside에서 나옵니다. 모든 최신 브라우저에서 지원되지만 Internet Explorer에서는 지원되지 않는 CSS 속성입니다.