---
id: w3css-tags
title: "W3CSS Tags"
category: "Programming_Language"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["w3-tag", "signs", "w3-spin", "W3.CSS 태그"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.87
created_at: 2026-07-04
updated_at: 2026-07-04
review_reason: ""
merge_history: []
tags: ["w3css", "css-framework", "w3schools", "tags", "labels"]
raw_sources: ["https://www.w3schools.com/w3css/w3css_tags.asp"]
applied_in: []
github_commit: ""
---

# [[W3CSS Tags]]

## 🎯 한 줄 통찰 (One-line insight)
The source explicitly states there's "no real difference between a tag, a label, or a sign" in W3.CSS — all three UI concepts share ONE class (`w3-tag`), and a "sign" (like a giant warning placard) is simply the SAME rectangular tag scaled up with `w3-jumbo`, proving that visual role (small status label vs. big warning sign) is purely a matter of size, not a different component. [S1]

## 🧠 핵심 개념 (Core concepts)
- **`w3-tag`** — the ONLY class for tags/labels/signs; rectangular, black by default. [S1]
- **Signs are just large tags** — no separate "sign" class exists; scaling up via `w3-size` classes turns a tag into a sign. [S1]
- **`w3-spin`** — makes a tag rotate 360° continuously. [S1]
- **CSS `transform:rotate()`** — used inline for a static rotation angle (not IE9-safe). [S1]
- **Nested tags for road-sign borders** — an outer `w3-tag` provides the colored border frame, an inner `w3-tag` with `w3-border w3-border-white` creates the classic road-sign double-border look. [S1]

## 📖 세부 내용 (Details)
- Basic tag: `<p>Status: <span class="w3-tag">Done</span></p>`. [S1]
- Sign as an enlarged tag: `<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>`. [S1]
- Road sign via nested tags: `<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>`. [S1]
- Static rotation: `<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">STOP</span>`. [S1]
- Continuous spin: `<span class="w3-tag w3-spin w3-large">STOP</span>`. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
- **transform:rotate()의 브라우저 제약**: IE9 이하에서는 회전 효과가 동작하지 않는다는 점이 명시됨. [S1]

## 🛠️ 적용 사례 (Applied in summary)
현재 발견된 실제 적용 사례가 없습니다 — 이중 테두리로 도로 표지판을 흉내내는 중첩 태그 구조가 창의적 UI 디자인의 대표 사례다. [S1]

## 💻 코드 패턴 (Code patterns)
Road sign look via nested tag with a white inner border (HTML):
```html
<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>
```

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.87
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[W3.CSS Tutorial]]
- **관련 개념:** [[W3CSS Badges]], [[W3CSS Icons]], [[W3CSS Round]]
- **참조 맥락:** 태그/라벨/사인 통합 클래스 — 아이콘(Icons) 챕터로 이어짐.

## 📚 출처 (Sources)
- [S1] W3Schools — W3.CSS Tags (Labels and Signs) — https://www.w3schools.com/w3css/w3css_tags.asp

## 📝 변경 이력 (Change history)
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Tags" page (Astra wiki-curation, P-Reinforce v3.1 format).
