W3.CSS 텍스트
텍스트 정렬
w3-left-align 및 w3-right-align 클래스는 텍스트를 정렬하는 데 사용됩니다 .
왼쪽 정렬된 텍스트입니다.
오른쪽 정렬된 텍스트입니다.
예시
<div class="w3-container w3-border w3-large">
<div
class="w3-left-align"><p>Left aligned text.</p></div>
<div
class="w3-right-align"><p>Right aligned text.</p></div>
</div>
센터링 요소
w3-center 클래스는 요소를 가운데 정렬하는 데 사용됩니다 .
중심 콘텐츠
일부 중앙 텍스트.
예시
<div class="w3-container w3-center">
<h2>Centered Content</h2>
<img src="img_car.jpg" alt="car" style="width:80%;max-width:320px">
<p>Some centered text.</p>
</div>
와이드 텍스트
w3-wide 클래스는 더 넓은 텍스트를 지정합니다 .
이 텍스트는 정상입니다.
이 텍스트는 더 넓습니다.
예시
<p class="w3-wide">The w3-wide class specifies a wider text.</p>
텍스트 불투명도
w3-opacity 클래스 는 모든 색상에서 작동하도록 설계되었습니다.
텍스트 불투명도
텍스트 불투명도
텍스트 불투명도
텍스트 불투명도
예시
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
텍스트 그림자
CSS3 text-shadow 속성을 사용하여 텍스트에 그림자 또는 흐림 효과를 추가할 수 있습니다.
텍스트 그림자
텍스트 그림자
텍스트 그림자
텍스트 그림자
예시
<h2
class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
특수 효과
텍스트 불투명도 + 굵게
노란색 텍스트 + 그림자 + 굵게
주황색 텍스트 + 그림자 + 굵게
예시
<div class="w3-panel w3-pink">
<h1 class="w3-opacity">
<b>Text Opacity + Bold</b></h1>
</div>
<div class="w3-panel w3-amber">
<h1 class="w3-text-yellow"
style="text-shadow:1px 1px 0 #444">
<b>Yellow Text + Shadow + Bold</b></h1>
</div>
<div class="w3-panel w3-blue">
<h1 class="w3-text-orange"
style="text-shadow:1px 1px 0 #444">
<b>Orange Text + Shadow + Bold</b></h1>
</div>
Text Shadow는 IE 9 및 이전 버전에서 작동하지 않습니다.