Divider

Divider (구분선)

Divider는 콘텐츠의 섹션들을 묶어서 시각적 리듬과 위계(hierarchy)를 만들어 줘요. 레이아웃에서 콘텐츠를 정리할 때 스페이싱(spacing)과 헤더와 함께 활용하면 좋아요. 화면을 차분하게 정돈해 주는 얇은 선 하나라고 생각하면 돼요.

출처: Divider 문서

본문

Types (유형)

Block (블록) — 블록 구분선은 컨테이너의 폭을 가로질러요. 항목 사이에 엄격한 구분을 만들 때 사용하세요.

Inset (인셋) — 인셋 구분선은 컨테이너의 가장자리까지 닿지 않으며, 더 가까운 관계를 암시해요. 비슷한 항목들을 묶을 때 사용하세요.

Layout (레이아웃)

Margins (여백)

여백은 서로 다른 레이아웃에서 유연하게 사용할 수 있도록 구분선 컴포넌트에 기본 내장되지 않아요. 최소한 기본 구분선과 콘텐츠가 있는 구분선은 위아래로 12픽셀의 공간을 두어야 해요. 아이콘이 있는 구분선은 위아래로 8픽셀을 두세요.

Creating text hierarchy (텍스트 위계 만들기)

긴 텍스트에서는 텍스트 제목 위에 구분선을 배치해 콘텐츠 그룹을 만들어 주세요. 헤더 위에 구분선을 두고, 헤더에 밑줄로 구분선을 사용하지는 마세요.

Accessibility (접근성)

구분선이 시각적 구분만 만들고 콘텐츠 구분은 만들지 않는다면 aria-hidden으로 스크린 리더에서 숨기세요.

Content (콘텐츠)

선택 텍스트를 사용한다면, 다음 섹션에 무엇이 있는지 짧게 알려주는 표현이어야 해요. 문장형 대문자 표기(sentence style capitalization)를 사용하세요 — 첫 단어만 대문자로 써요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization를 참고하세요.

더 알아보기 (Learn more)

• Divider 스토리북 및 React/Web Components 가이드 확인
• Microsoft Writing Style Guide: Capitalization