List

List

List 요소는 관련된 콘텐츠를 그룹으로 묶어 보여줘요. 글머리 기호, 번호, 링크, 아이콘, 이미지, 헤더, 설명 등을 조합해 다양한 목록을 만들 수 있어요.

출처: List

본문

Types

List

목록은 관련 콘텐츠를 그룹화해요

Apples
      Pears
      Oranges
Fomantic UI
        
      
      
        
        
          Worldwide
        
      
      
        
        
          [email protected]
        
      
      
        
        
          fomantic-ui.com
fomantic/Fomantic-UI
          Updated 10 mins ago
        
      
      
        
        
          fomantic/Fomantic-UI-Docs
          Updated 22 mins ago
        
      
      
        
        
          fomantic/Fomantic-UI-LESS
          Updated 34 mins ago
src
          Source files for project
          
            
              
              
                site
                Your site's theme
              
            
            
              
              
                themes
                Packaged theme files
                
                  
                  
                    default
                    Default packaged theme
                  
                  
                  
                    my_theme
                    Packaged themes are also available in this folder
                  
                
              
            
            
              
              
                theme.config
                Config file for setting packaged themes
              
            
          
        
        
        
          
          dist
          Compiled CSS and JS files
          
            
              
              
                components
                Individual component CSS and JS
              
            
          
        
        
        
          semantic.json
          Contains build settings for gulp

Bulleted

목록은 항목을 글머리 기호로 표시할 수 있어요

Gaining Access
      Inviting Friends
      
        Benefits
        
          Link to somewhere
          Rebates
          Discounts
        
      
      Warranty
For convenience, a simple bulleted list can also use ul tag.
    
      Gaining Access
      Inviting Friends
      Benefits
        
          Use Anywhere
          Rebates
          Discounts
        
      
      Warranty
About Us
      
      
        Sitemap
      
      
        Contact

Ordered

목록은 숫자로 정렬될 수 있어요

Getting Started
      Introduction
      
        Languages
        
          HTML
          Javascript
          CSS
        
      
      Review
An ordered list can also use the ol tag
    
      Signing Up
      User Benefits
      User Types
        
          Admin
          Power User
          Regular User
        
      
      Deleting Your Account
Signing Up
      User Benefits
      User Types
        
          Admin
          Power User
          Regular User
        
      
      Deleting Your Account
Signing Up
      User Benefits
      User Types
        
          Admin
          Power User
          Regular User
        
      
      Deleting Your Account

Link

목록은 내비게이션 링크용으로 특별히 포맷할 수 있어요

Home
      About
      Jobs
      Team

Content

Item

목록 항목은 항목들의 집합을 포함할 수 있어요

1
      
      
        2
      
      
        3

Icon

목록 항목은 아이콘을 포함할 수 있어요

Floated Icon
          This text will always have a left margin to make sure it sits alongside your icon
        
      
      
        
        
          Icon Alignment
          Floated icons are by default top aligned. To have an icon top aligned try this example.
        
        
      
      
        
        Inline Text

Image

목록 항목은 이미지를 포함할 수 있어요

Rachel
          Last seen watching Arrested Development just now.
        
        
      
      
        
          Lindsay
          Last seen watching Bob's Burgers 10 hours ago.
        
        
      
      
        
          Matthew
          Last seen watching The Godfather Part 2 yesterday.
        
        
      
      
        
          Jenny Hess
          Last seen watching Twin Peaks 3 days ago.
        
        
      
      
        
          Veronika Ossi
          Has not watched anything recently

Link

목록은 링크를 포함할 수 있어요

What is a FAQ?
      Who is our user?
      Where is our office located?
Header
        
          Click a link in our description.
        
        
      
      
        Learn More
        
          Learn more about this site on our FAQ page.

Header

목록 항목은 헤더를 포함할 수 있어요

New York City
        A lovely city
      
      
        Chicago
        Also quite a lovely city
      
      
        Los Angeles
        Sometimes can be a lovely city
      
      
        San Francisco
        What a lovely city

Description

목록 항목은 설명을 포함할 수 있어요

Krolewskie Jadlo
          An excellent polish restaurant, quick delivery and hearty, filling meals.
        
        
      
      
        
        Xian Famous Foods
          A taste of Shaanxi's delicious culinary traditions, with delights like spicy cold noodles and lamb burgers.
        
        
      
      
        
        Sapporo Haru
          Greenpoint's best choice for quick and delicious sushi.
        
        
      
      
        
        Enid's
          At night a bar, during the day a delicious brunch spot.

Variations

Horizontal

목록은 항목이 가로로 나타나도록 포맷할 수 있어요

Tom
          Top Contributor
        
      
      
        
        Christian Rocha
          Admin
        
      
      
        
        Matt
          Top Rated User
Steve Jobes
          50 Points
        
      
      
        
        Stevie Feliciano
          44 Points
        
      
      
        
        Jenny Hess
          11 Points
Terms and Conditions
      
      
        Privacy Policy
      
      
        Contact Us

Inverted

목록은 어두운 배경에 나타나도록 반전시킬 수 있어요

Snickerdoodle
            An excellent companion
          
        
        
          
            Poodle
            A poodle, its pretty basic
          
        
        
          
            Paulo
            He's also a dog

Selection

선택 목록은 목록 항목을 선택 가능한 항목으로 포맷해요

Helen
        
      
      
        
        
          Christian
        
      
      
        
        
          Daniel

Animated

목록은 현재 항목을 목록에서 구분되도록 애니메이션할 수 있어요

Helen
        
      
      
        
        
          Christian
        
      
      
        
        
          Daniel

Relaxed

목록은 여백을 완화해 더 많은 네거티브 공간을 제공할 수 있어요

Daniel Louise
          Last seen watching Arrested Development just now.
        
        
      
      
        
        Stevie Feliciano
          Last seen watching Bob's Burgers 10 hours ago.
        
        
      
      
        
        Elliot Fu
          Last seen watching The Godfather Part 2 yesterday.
Daniel Louise
        
      
      
        
        Stevie Feliciano
        
      
      
        
        Elliot Fu
Daniel Louise
          Last seen watching Arrested Development just now.
        
        
      
      
        
        Stevie Feliciano
          Last seen watching Bob's Burgers 10 hours ago.
        
        
      
      
        
        Elliot Fu
          Last seen watching The Godfather Part 2 yesterday.
Daniel Louise
        
      
      
        
        Stevie Feliciano
        
      
      
        
        Elliot Fu

Divided

목록은 콘텐츠 사이에 구분선을 보여줄 수 있어요

Daniel Louise
        
      
      
        
        Stevie Feliciano
        
      
      
        
        Elliot Fu

Celled

목록은 항목을 셀(cell)로 나눌 수 있어요

Snickerdoodle
          An excellent companion
        
      
      
        
        Poodle
          A poodle, its pretty basic
        
      
      
        
        Paulo
          He's also a dog
Cats
      Horses
      Dogs
        
          Labradoodles
          Shiba Inu
          Mastiff
About Us
      Contact
      Support

Size

목록은 다양한 크기로 변할 수 있어요

Helen
        
      
      
        
        
          Christian
        
      
      
        
        
          Daniel
Helen
        
      
      
        
        
          Christian
        
      
      
        
        
          Daniel
Helen
        
      
      
        
        
          Christian
        
      
      
        
        
          Daniel
Helen
        
      
      
        
        
          Christian
        
      
      
        
        
          Daniel
Helen
        
      
      
        
        
          Christian
        
      
      
        
        
          Daniel
Helen
        
      
      
        
        
          Christian
        
      
      
        
        
          Daniel
Helen
        
      
      
        
        
          Christian
        
      
      
        
        
          Daniel

Content Variations

Vertically Aligned

목록 안의 요소는 수직으로 정렬될 수 있어요

Top Aligned
        
      
      
        
        
          Middle
        
      
      
        
        
          Bottom

Floated

목록 또는 목록 안의 요소는 왼쪽이나 오른쪽으로 띄울 수 있어요

Add
        
        
        
          Lena
        
      
      
        
          Add
        
        
        
          Lindsay
        
      
      
        
          Add
        
        
        
          Mark
        
      
      
        
          Add
        
        
        
          Molly
© GitHub, Inc.
      Terms
      Privacy
      Contact
    
    
      About Us
      Jobs

더 알아보기

List는 관련 항목을 구조적으로 보여주는 요소예요. 아이콘·이미지·헤더·링크를 조합하면 피드, 내비게이션, 상세 설명 목록까지 다양하게 만들 수 있어요.