Files

T

Antigravity Agent 1cfd3bbb56 docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화

Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고,
Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.

2026-07-05 00:10:59 +09:00

2.9 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

HOWTO CSS Pill Button

🎯 한 줄 통찰 (One-line insight)

A "pill" shape is simply border-radius set LARGER than half the button's own height — at 16px against a button whose padding produces roughly that height, the corners round out so far that they meet, turning the rectangle's short ends into full semicircles, which is the exact same property (border-radius) that [[HOWTO CSS Round Buttons]] uses at 50% to make a full circle — pill and circle buttons are two points on the SAME radius-value spectrum, not different techniques. [S1]

🧠 핵심 개념 (Core concepts)

border-radius: 16px — large enough relative to the button's height that the short ends become fully rounded semicircles, producing the "pill" look. [S1]

📖 세부 내용 (Details)

.button { background-color: #ddd; border: none; padding: 10px 20px; border-radius: 16px; }. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

Round Buttons와 동일한 속성의 다른 값: [[HOWTO CSS Round Buttons]]가 border-radius: 50%로 완전한 원을 만드는 것과 달리, 이 레시피는 16px이라는 절댓값으로 버튼 높이의 절반 이상을 채워 알약 모양을 만든다는 점이 확인됨 — 같은 속성의 스펙트럼 상 다른 지점일 뿐, 별개 기법이 아님. [S1]

🛠️ 적용 사례 (Applied in summary)

사각형 버튼과 알약 모양 버튼을 나란히 비교하는 예제가 원문에서 직접 제시됨. [S1]

💻 코드 패턴 (Code patterns)

Pill-shaped button via a large border-radius (CSS):

.button {
  background-color: #ddd;
  border: none;
  padding: 10px 20px;
  border-radius: 16px;
}

✅ 검증 상태 및 신뢰도

상태: draft
검증 단계: conceptual
출처 신뢰도: B (W3Schools — widely used educational reference)
신뢰 점수: 0.77
중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

상위/루트: W3Schools HOW TO
관련 개념: HOWTO CSS Round Buttons, HOWTO CSS Pill Nav
참조 맥락: CSS Buttons 섹션.

📚 출처 (Sources)

[S1] W3Schools — How To - Pill Buttons — https://www.w3schools.com/howto/howto_css_pill_button.asp

📝 변경 이력 (Change history)

2026-07-04: Initial draft synthesized from the W3Schools "How To - Pill Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).

2.9 KiB Raw Blame History