w3.css

태그

태그: Done New! More Later!

표지판으로서의 태그: Falcon Ridge Parkway STOP! WATCH OUT!

W3.CSS 태그 클래스

W3.CSS는 태그, 레이블 및 기호에 대해 하나의 클래스를 제공한다.

Class	Defines
w3-tag	직사각형 검정색 태그/라벨

태그, 라벨 및 표시

W3.CSS 세계에서는 태그, 레이블 또는 기호 사이에 실질적인 차이가 없다.

직사각형 태그

w3-tag 클래스는 직사각형 태그(라벨 또는 기호)를 생성한다. 기본 색상은 검정색이다.

상태:완료

예제

<p>Status: <span class="w3-tag">Done</span></p>

컬러 태그

태그 색상을 변경하려면 w3-color 클래스를 사용한다.

New!

More Later!

예제

<p><span class="w3-tag w3-blue">New!</span></p>
<p><span class="w3-tag w3-teal">More Later!</span></p>

태그 크기

기본적으로 태그는 해당 컨테이너의 크기를 상속한다.

w3 크기 클래스(w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo)를 사용하여 태그 크기를 수정할 수 있다.

6 6 6

666666

6666

큰 태그에 추가 패딩을 추가할 수 있다.

예제

<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo w3-blue w3-padding-large">66</span>

글자 태그

예제

<span class="w3-tag w3-xlarge">A</span>
<span class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">G</span>
<span class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">S</span>
<span class="w3-tag w3-xlarge">T</span>

 

S A L E

예제

<span class="w3-tag w3-jumbo w3-red">S</span>
<span class="w3-tag w3-jumbo">A</span>
<span class="w3-tag w3-jumbo w3-yellow">L</span>
<span class="w3-tag w3-jumbo">E</span>

표지판

표지판은 큰 태그에 지나지 않는다.

예제

<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>

도로 표지판

예제

<div class="w3-tag w3-round w3-green" style="padding:3px">
  <div class="w3-tag w3-round w3-green w3-border w3-border-white">
    Falcon Ridge Parkway
  </div>
</div>

대형 간판

w3-size 클래스를 사용하여 큰 기호를 표시할 수 있다.

긴급 상황 발생 시
:
지옥에 있는것처럼 달려보세요!

예제

<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>

 

예제

<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>

둥근 모서리

w3-round-size 클래스를 사용하여 기호에 둥근 모서리를 추가할 수 있다.

물 속에서 숨을

쉬지 마십시오

예제

<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>

태그 회전

표준 CSS 변환 속성을 사용하여 기호를 회전한다.

STOP

예제

<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>

⭐ transform:rotate()는 IE 9 및 이전 버전에서 지원되지 않는다.

회전하는 태그

w3-spin 클래스를 사용하면 표지판을 360도 회전시킬 수 있다.

STOP

예제

<span class="w3-tag w3-spin w3-large">
STOP
</span>