<aside> 📍 How to use Tabs

• 정의된 구조를 적절한 상황에 사용해야 하며, 정의되지 않은 새로운 구조의 사용은 지양합니다.
• 동일하거나 유사한 레벨의 콘텐츠와 데이터간의 구분에만 사용합니다. </aside>

Tabs

탭은 한 페이지 내에서 연관된 콘텐츠와 정보를 효율적으로 묶어 구성합니다. 페이지 내의 유사한 콘텐츠를 그룹화하여 노출하며 해당 페이지를 벗어나지 않고 분류된 그룹별로 콘텐츠를 볼 수 있습니다. 사용자의 위치를 시각적으로 빠르고 쉽게 나타내야 하며 시각적인 일관성이 필요합니다. 4가지의 스타일이 기본이며, PC와 모바일의 구분없이 적절한 상황과 구조에 맞게 사용합니다.

Area-line

구분할 수 있는 섹션의 수가 최소 2개에서 최대 3개로 한정되어 있는 경우 사용합니다.

Size

PC와 모바일에 따라 두가지의 사이즈로 구분합니다. Large의 경우에는 PC에서 사용하고 Small의 경우에는 모바일에서 주로 사용됩니다. 디바이스에 따라 100%로 적용하되, min-width를 준수하여 사용합니다.

State

Selected/Unselected에 따라 분류하며 각각의 State에 따른 스타일을 명시합니다.

Text-line

분류되는 섹션의 수가 4가지 이상, 즉 다수일 경우 사용합니다. 텍스트 아래로 위치하는 라인요소는 텍스트의 길이에 맞춰 유동적으로 변화하며, 고정값이 없습니다.

Layout

하나의 컴포넌트에 들어가는 섹션들의 정렬 위치에 따라 3가지의 레이아웃으로 구분합니다. 좌측 정렬된 레이아웃 컴포넌트의 경우, 컴포넌트가 디바이스의 Width값을 넘어갔을 때 좌우로 스크롤이 가능하며 텍스트 길이를 기준으로 각 섹션 탭의 너비가 변화합니다. 가운데 정렬된 레이아웃 컴포넌트의 각 섹션 탭은 화면 전체 너비를 동일한 비율로 나누어 사용합니다.

Behaviors

Tabs가 디바이스의 Width 값을 넘어갈 경우에 요소가 가려지며 가로 스크롤을 적용합니다.

State

Selected/Unselected에 따라 분류하며 각각의 State에 따른 스타일을 명시합니다.

Box

페이지 내에 구성된 콘텐츠 중간에 탭이 필요한 경우 사용합니다. 디바이스에 따라 Both Sides Spacing을 제외하고 100%로 적용하되, min-width를 준수하여 사용합니다.

State

Selected/Unselected에 따라 분류하며 각각의 State에 따른 스타일을 명시합니다.

Fill

PC 컴포넌트로 사용하며, 주로 너비가 넓은 디바이스에서 탭을 구성할 때 사용됩니다. 텍스트 길이를 기준으로 각 섹션 탭의 너비가 변화합니다. 좌우 스크롤을 사용할 수 없는 컴포넌트로, 컴포넌트가 디바이스의 Width값을 벗어나지 않도록 주의합니다.

State

Selected/Unselected에 따라 분류하며 각각의 State에 따른 스타일을 명시합니다.

• 추후 도입 제안

목차