Label
Label
Label은 콘텐츠에 부가적인 정보를 붙여주는 요소예요. 수량, 키보드 단축키, 태그, 리본, 부동(foating) 배지 등 다양한 형태로 활용돼요.
출처: Label
본문
Types
Label
기본 라벨이에요
23
키보드 단축키를 강조해요
CTRL + Alt + Del
+ L
WASD
Image
라벨은 이미지를 강조하도록 포맷할 수 있어요
Joe
Elliot
Stevie
Veronika
Friend
Veronika
Student
Helen
Co-worker
Adrienne
Zoe
Nan
Pointing
라벨은 옆에 있는 콘텐츠를 가리킬 수 있어요
Please enter a value
Please enter a value
That name is taken!
Your password must be 6 characters or more
Please enter a value
Please enter a value
That name is taken!
Your password must be 6 characters or more
Corner
라벨은 요소의 모서리에 위치할 수 있어요
Tag
라벨은 태그로 나타날 수 있어요
New
Upcoming
Featured
Ribbon
라벨은 요소에 붙는 리본으로 나타날 수 있어요.
Overview
Account Details
Community User Reviews
Specs
Reviews
Hotel
Food
Hotel
Food
Bottom and Center Ribbon
리본 라벨은 수직 중앙에 나타나거나 하단에 위치할 수 있어요.
Overview
Account Details
Overview
Account Details
Attached
라벨은 콘텐츠 세그먼트에 붙을 수 있어요
HTML
CSS
Code
View
Admin View
HTML
CSS
Code
View
User View
Admin View
Horizontal
가로 라벨은 옆에 있는 콘텐츠를 가로로 라벨링하도록 포맷돼요
Fruit
Kumquats
Candy
Ice Cream
Fruit
Orange
Dog
Poodle
Floating
라벨은 다른 요소의 위나 아래에 떠 있을 수 있어요.
부동(floating) 라벨은 제대로 표시되려면 position: relative를 가진 컨테이너 안에 위치해야 해요.
Messages
22
Friends
22
Messages
22 Mails
Friends
22 Friends
Messages
22
Friends
22
Messages
22 Mails
Friends
22 Friends
Floating left
부동 라벨은 왼쪽에도 위치할 수 있어요
Messages
22
Friends
22
Messages
22 Mails
Friends
22 Friends
Floating aligned
큰 텍스트를 포함하는 부동 라벨은 왼쪽이나 오른쪽으로 정렬할 수 있어요
Messages from Fomantic-UI-Users
22 Mails unread
Friends of the Fomantic-UI Community
22 Friends online
Inverted
모든 라벨 변형은 반전시킬 수 있어요
Primary
Secondary
Red
Orange
Yellow
Olive
Green
Teal
Blue
Violet
Purple
Pink
Brown
Grey
Black
Primary
Secondary
Red
Orange
Yellow
Olive
Green
Teal
Blue
Violet
Purple
Pink
Brown
Grey
Black
Tag
Primary
Secondary
Red
Orange
Yellow
Olive
Green
Teal
Blue
Violet
Purple
Pink
Brown
Grey
Black
Content
Detail
라벨은 세부 정보를 포함할 수 있어요
Dogs
214
Icon
라벨은 아이콘을 포함할 수 있어요
Mail
Test Passed
Dog
Cat
Icons can be placed to the right inside a label.
Mail
Test Passed
Dog
Cat
Labels can contain individual icons without text.
For backward-compatibility during v2.x, close/delete icon.
Requires left icon to be added to the parent label when the icon is placed on the left of a label.
Does not require right icon to be added to parent label when the icon is placed on the right of the label.
This rule may be simplified in a later minor or major version.
Close
Delete
Close
Delete
Image
라벨은 이미지를 포함할 수 있어요
Elliot
Stevie
Link
라벨은 링크가 되거나 링크하는 항목을 포함할 수 있어요
23
23
View Mail
States
Disabled
라벨은 현재 상호작용할 수 없음을 보여줄 수 있어요
Disabled Label
Variations
Fluid
라벨은 컨테이너의 너비를 차지할 수 있어요
Fits container
Centered
텍스트는 중앙에 표시될 수 있어요
Fits container
Circular
라벨은 원형일 수 있어요
2
2
2
2
2
2
2
2
2
2
2
2
2
Basic
라벨은 복잡성을 줄일 수 있어요
Basic
Pointing
Elliot
Red Pointing
Blue
Colored
라벨은 다양한 색을 가질 수 있어요
Primary
Secondary
Red
Orange
Yellow
Olive
Green
Teal
Blue
Violet
Purple
Pink
Brown
Grey
Black
Basic Tag Labels
Standard Tag
Primary
Secondary
Red
Orange
Yellow
Olive
Green
Teal
Blue
Violet
Purple
Pink
Brown
Grey
Black
Size
라벨은 작거나 클 수 있어요
Mini
Tiny
Small
Medium
Large
Big
Huge
Massive
Groups
라벨 그룹은 줄바꿈될 때 라벨이 서로 붙어 보이지 않도록 수직 여백도 갖고 있어요
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen
Seventeen
Eighteen
Nineteen
Twenty
Twentyone
Twentytwo
Twentythree
Twentyfour
Twentyfive
Twentysix
Twentyseven
Twentyeight
Twentynine
Thirty
Group Size
라벨은 함께 크기를 공유할 수 있어요
Fun
Happy
Smart
Witty
Colored Group
라벨은 함께 색을 공유할 수 있어요
Fun
Happy
22
Smart
Insane
Exciting
Basic Group
라벨은 함께 스타일을 공유할 수 있어요
Fun
Happy
22
Smart
Insane
Exciting
Tag Group
라벨은 태그 포맷을 공유할 수 있어요
$10.00
$19.99
$24.99
$30.99
$10.25
Circular Group
라벨은 모양을 공유할 수 있어요
11
22
33
44
141
더 알아보기
Label은 콘텐츠에 캐주얼하게 정보를 붙이는 다재다능한 요소예요. 태그, 리본, 부동 배지, 아이콘 조합 등으로 푸시 알림 개수나 상태 표시 같은 UI를 빠르게 만들 수 있어요.