타이포그래피
text-align
텍스트 정렬을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
text-left | text-align: left; |
text-center | text-align: center; |
text-right | text-align: right; |
text-justify | text-align: justify; |
text-start | text-align: start; |
text-end | text-align: end; |
예제
텍스트 왼쪽 정렬
엘리먼트의 텍스트를 왼쪽으로 정렬하려면 text-left 유틸리티를 사용하세요:
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분에게 거짓말하지 않겠다, 나는 무서웠다. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌다. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감 때문이었는지 모르겠지만, 제리, 그 순간 나는 해양 생물학자였다.
<p class="text-left">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>텍스트 오른쪽 정렬
text-right 유틸리티를 사용해 엘리먼트의 텍스트를 오른쪽으로 정렬할 수 있습니다.
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분에게 거짓말하지 않겠다, 나는 무서웠다. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌다. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감 때문이었는지 모르겠지만, 제리, 그 순간 나는 해양 생물학자였다.
<p class="text-right">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>텍스트 가운데 정렬
엘리먼트의 텍스트를 가운데 정렬하려면 text-center 유틸리티를 사용하세요:
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분에게 거짓말하지 않겠다, 나는 무서웠다. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌다. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감이었는지 모르겠지만, 제리, 그 순간 나는 해양 생물학자였다.
<p class="text-center">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>텍스트 양쪽 정렬
text-justify 유틸리티를 사용해 요소의 텍스트를 양쪽 정렬할 수 있습니다.
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분에게 거짓말하지 않겠다, 나는 무서웠다. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌다. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감이었는지 모르겠지만, 그 순간 나는 제리에게 말했다. 나는 해양 생물학자였다고.
<p class="text-justify">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>반응형 디자인
접두사 a text-align 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<p class="text-left md:text-center ..."> <!-- ... --></p>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
