Segment

Segment는 페이지의 콘텐츠 블록을 시각적으로 구분하는 요소예요. 기본 세그먼트부터 올림(stacked), 쌓음(piled), 수직, 색상, 강조 등 다양한 변형을 제공해요.

출처: Segment

본문

Types

Segment

기본 콘텐츠 세그먼트예요

Placeholder Segment

세그먼트는 조건부로 표시되는 콘텐츠를 위해 공간을 예약하는 데 사용할 수 있어요.

No documents are listed for this customer.
      
      Add Document

We don't have any documents matching your query
      
      
        Clear Query
        Add Document

Or
        
          
            
              
              
              Find Country
            
            
              
                
                  
                  
                
                
              
            
          
          
            
              
              
              Add New Country
            
            
              
              Create

Raised

세그먼트는 페이지보다 위로 올라오도록 포맷될 수 있어요.

Stacked

세그먼트는 여러 페이지를 포함하고 있음을 보여주도록 포맷할 수 있어요

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Piled

세그먼트는 페이지 무더기처럼 보이도록 포맷할 수 있어요

Vertical Segment

수직 세그먼트는 수직 그룹의 일부로 정렬되도록 콘텐츠를 포맷해요

Groups

Segments

세그먼트 그룹은 함께 나타나도록 포맷할 수 있어요

Top

Top

Top

Nested Segments

세그먼트 그룹은 다른 세그먼트 그룹 안에 중첩될 수 있어요

Horizontal Segments

세그먼트 그룹은 가로로 나타날 수 있어요

Horizontal equal width Segments

가로 세그먼트 그룹은 자동으로 세그먼트를 동일한 너비로 나눌 수 있어요

Segment One
        
        
            Segment Two with a lot of additional content
        
        
            Segment Three

Horizontal wrapping Segments

가로 세그먼트 그룹은 작은 화면에서 자동으로 세그먼트를 감쌀(wrap) 수 있어요

Segment One
      
      
        Segment Two
      
      
       Segment Three
      
      
       Segment Four
      
      
        Segment Five
      
      
        Segment Six
      
      
        Segment Seven
      
      
        Segment Eight

Raised Segments

세그먼트 그룹은 올려질 수 있어요

Stacked Segments

세그먼트 그룹은 쌓일 수 있어요

Piled Segments

세그먼트 그룹은 무더기로 쌓일 수 있어요

States

Disabled

세그먼트는 콘텐츠가 비활성화되었음을 보여줄 수 있어요

Loading

세그먼트는 콘텐츠가 로딩 중임을 보여줄 수 있어요

로더는 세그먼트의 색을 상속해요. 이것을 막고 싶다면 일반 클래스를 추가해서 세그먼트는 색을 유지하면서 로더 색은 기본값으로 남게 하세요.

Variations

Inverted

세그먼트는 대비를 위해 색을 반전시킬 수 있어요

Attached

세그먼트는 페이지의 다른 콘텐츠에 붙일 수 있어요

Dogs are one type of animal

Dogs
    
    
    
      
    
    
    
      Cats
    
    
    
      
    
    
    
      Lions
    
    
    
      
    
    
    
      You've reached the end of this content segment!

Seamless attached

세그먼트는 이음새 없이(seamless) 붙여 관련된 변의 테두리를 제거할 수 있어요. 수직 탭 메뉴를 다룰 때 특히 유용해요.

Padded

세그먼트는 패딩을 늘릴 수 있어요

Fitted

세그먼트는 패딩을 수직 또는 수평으로 제거할 수 있어요

Compact

세그먼트는 필요한 만큼만 공간을 차지할 수 있어요

Pellentesque habitant morbi

Colored

세그먼트는 색을 칠할 수 있어요

Red
    Orange
    Yellow
    Olive
    Green
    Teal
    Blue
    Violet
    Purple
    Pink
    Brown
    Grey
    Black

이 색들은 반전시킬 수 있어요

Red
    Orange
    Yellow
    Olive
    Green
    Teal
    Blue
    Violet
    Purple
    Pink
    Brown
    Grey
    Black

Emphasis

세그먼트는 더 눈에 띄거나 덜 띄도록 포맷할 수 있어요

반전된 색도 더 눈에 띄거나 덜 띄게 할 수 있어요

I'm here to tell you something, and you will probably read me first.

Circular

세그먼트는 원형일 수 있어요

Buy Now
        $10.99
      
    
    
      
        Buy Now
        $10.99

Clearing

세그먼트는 부동(floated) 콘텐츠를 클리어할 수 있어요

Floated

Floated

세그먼트는 다른 콘텐츠의 왼쪽이나 오른쪽에 나타날 수 있어요

This segment will appear to the right
    
    
      This segment will appear to the left

Text Alignment

세그먼트는 텍스트를 한쪽으로 정렬할 수 있어요

Right
    
    
      Left
    
    
      Center

Basic

기본 세그먼트는 특별한 포맷이 없어요

Scrolling

스크롤 세그먼트는 콘텐츠가 스크롤 가능하도록 미리 정의된 높이를 가져요

You can also use resizable scrolling and a native resize drag handler will appear to the bottom right of the segment. This needs a modern browser, so does not work in IE11 or legacy Edge.

스크롤 세그먼트는 선택적으로 미리 정의된 높이 long, very long, short, very short를 지원해요.

Size

세그먼트는 다양한 크기로 변할 수 있어요

Mini
      Tiny
      Small
      Large
      Big
      Huge
      Massive

더 알아보기

Segment는 페이지 레이아웃을 블록 단위로 구성하는 기본 요소예요. 그룹·색상·강조·첨부(attached) 변형을 조합하면 카드형 UI부터 구분된 콘텐츠 영역까지 폭넓게 활용할 수 있어요.