Divider

Divider (디바이더 요소)

Divider는 콘텐츠를 세로 또는 가로로 구분하는 경계선 요소예요. 섹션을 나누고 텍스트·아이콘을 함께 표시할 수 있으며, 크기·색상 변형을 지원해요.

출처: 문서

본문

Types (유형)

Divider (디바이더)

표준 디바이더예요.

To add a divider between parts of a grid use a divided grid variation.

그리드의 부분 사이에 구분선을 추가하려면 divided 그리드 변형을 사용해요.

Vertical Divider (세로 디바이더)

디바이더는 콘텐츠를 세로로 구분할 수 있어요.

Due to a change in W3C implementation of absolutely positioned elements in flex containers vertical dividers now currently only support 50/50 splits automatically, and only if not positioned as direct children of flex containers (like grid).

flex 컨테이너에서 절대 위치 요소의 W3C 구현 변경으로 인해, 세로 디바이더는 현재 그리드 같은 flex 컨테이너의 직접 자식으로 위치하지 않을 때만 50/50 분할을 자동으로 지원해요.

A vertical divider will automatically swap to a horizontal divider at mobile resolutions when used inside a stackable grid

세로 디바이더는 stackable 그리드 안에서 사용하면 모바일 해상도에서 자동으로 가로 디바이더로 바뀌어요.

Username (사용자 이름)
Password (비밀번호)
Login (로그인)
Or (또는)
Sign Up (가입)

Horizontal Divider (가로 디바이더)

디바이더는 콘텐츠를 가로로 구분할 수 있어요.

Search (검색)
      
      
        Or (또는)
      
      
        Create New Order (새 주문 만들기)

Description (설명)

강아지 간식은 사계절 내내 좋아요. 전 세계 모든 개의 99.9%가 먹는 것으로 입증됐어요.

Size (크기)
          1" x 2"
        
        
          Weight (무게)
          6 ounces (6온스)
        
        
          Color (색상)
          Yellowish (노란빛)
        
        
          Odor (냄새)
          Not Much Usually (보통 별로 없음)

Horizontal Alignment (가로 정렬)

가로 디바이더는 정렬될 수 있어요.

Variations (변형)

Inverted (반전)

디바이더는 색상이 반전될 수 있어요.

Fitted (핏)

디바이더는 위나 아래에 공간이 없이 꼭 맞게(fitted) 설정할 수 있어요.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
      
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Hidden (숨김)

숨겨진 디바이더는 구분선을 만들지 않고 콘텐츠를 나눠요.

Section One (섹션 1)
    
    
    Section Two (섹션 2)

Section (섹션)

디바이더는 콘텐츠 섹션을 나누는 더 큰 마진을 제공할 수 있어요.

Section One (섹션 1)
    
    
    Section Two (섹션 2)

Clearing (정리)

디바이더는 위의 콘텐츠를 정리(clear)할 수 있어요.

Floated Content (부동 콘텐츠)

Size (크기)

디바이더 텍스트는 크기를 다양하게 바꿀 수 있어요.

Mini
    Tiny
    Small
    Large
    Big
    Huge
    Massive

더 알아보기 (Learn more)

Divider는 섹션을 구분하는 단순한 요소지만, 중앙에 텍스트나 아이콘을 넣은 가로 디바이더와 세로 디바이더로 다양한 구분 패턴을 만들 수 있어요. section 변형으로 큰 간격, hidden 변형으로 보이지 않는 구분도 활용해 보세요.