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

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기