W3.CSS 태그(레이블 및 기호)
태그: 완료 새로운! 더 늦게!
기호로 태그: 팔콘 릿지 파크웨이 그만! 조심해!
W3.CSS 태그 클래스
W3.CSS는 태그, 레이블 및 기호에 대해 하나의 클래스를 제공합니다.
| 등급 | 정의 |
|---|---|
| w3일 | 직사각형 검은색 태그/라벨 |
태그, 라벨 및 표지판
W3.CSS 세계에서는 태그, 레이블 또는 기호 사이에 실질적인 차이가 없습니다.
태그는 직사각형입니다.
w3-tag 클래스 는 직사각형 태그(레이블 또는 기호)를 생성합니다. 기본 색상은 검정색입니다.
상태:완료
예시
<p>Status: <span
class="w3-tag">Done</span></p>
컬러 태그
w3- color 클래스를 사용 하여 태그의 색상을 변경합니다.
새로운!
더 늦게!
예시
<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
66 66 66
66 66
큰 태그에 추가 패딩을 추가할 수 있습니다.
예시
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
편지 태그
ㅏ
유
G
유
에스
티
예시
<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>
예시
<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- 크기 클래스는 큰 기호를 표시하는 데 사용할 수 있습니다 .
비상시:
지옥처럼 달려라!
예시
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
49 ,99
예시
<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 변환 속성을 사용하여 기호를 회전합니다.
그만예시
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
참고: transform:rotate()는 IE 9 및 이전 버전에서 작동하지 않습니다.
회전하는 태그
w3-spin 클래스를 사용하여 기호를 360도 회전할 수 있습니다 .
그만예시
<span class="w3-tag w3-spin w3-large">
STOP
</span>