여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 텍스트
w3.css – 텍스트
4개월전 작성
5개월전 수정

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 클래스는 더 넓은 텍스트를 지정한다.

이 텍스트는 정상이다.

이 텍스트는 더 넓다.

텍스트 불투명도

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>

⭐ 텍스트 그림자는 IE 9 이하에서는 작동하지 않는다.

참고
Mingg`s Diary
밍구
공부 목적 블로그