최근 브라우저(2024.05이후)에 적용이 가능한 멋진 CSS 속성 소개입니다.

 

text-wrap: balance

 

이 속성을 이용하면 컨테이너 안의 텍스트를 멋지게 자동 정렬해 줍니다. 텍스트가 들어가는 컨테이너의 폭이 변경되어도 자동으로 맞춰줍니다.

 

HTML : 

<div class="title">웹학교는 그누보드/영카트를 위한 다양한 기술적이고 상업적인 영역을 제공합니다.</div>

 

CSS : 

.title {

 text-wrap:balance;

}

 

이와 유사한 기능을 하는 속성값으로 

text-wrap: pretty

가 있습니다.

balance가 적극적인 줄바꿈이 있는 반면 pretty는 소극적인 균형을 찾아갑니다.

 

그 외에도 text-wrap과 관련된 속성값이 많이 있습니다.

 

 

웹학교 무료강좌 / 웹학교 컨텐츠몰

PHP포탈 / 구인구직 솔루션

By 웹학교