Divider & Separator

콘텐츠 블록을 구분하는 Divider와 인라인 항목을 구분하는 Separator의 디자인 및 사용 가이드입니다.
Divider는 수평 경계선을, Separator는 텍스트/버튼 링크 등 인라인 요소 사이에 구분선을 제공합니다.

Anatomy
Divider
.divider
Separator
item
item
item
Divider · Basic

기본 Divider는 상/하 여백과 상단 보더로 구성됩니다. 여백은 rem(25px), 보더 두께는 rem(1px)를 사용합니다.

Preview Notes Markup

섹션 A 내용

섹션 B 내용
  • 상/하 여백: margin-top / margin-bottom: rem(25px)
  • 라인: border-top: rem(1px) solid var(--bbc-color-border-100)
  • 주요 섹션 구분에 사용합니다.
 
<div class="divider"></div>
Divider · Spacing

상황에 따라 여백을 확장/축소해야 한다면 프로젝트의 유틸리티 스페이싱 클래스(예: .mt-*, .mb-*)를 병행해 사용하세요.
컴포넌트 자체 SCSS는 기본 여백만 정의합니다.

Case Preview Markup
기본 
<div class="divider"></div>
여백 확장(예시) 
<div class="divider mt-100 mb-100"></div>

접근성 · Divider는 시각적 구분선으로 의미가 비슷한 연속 콘텐츠를 나눌 때 사용합니다. WAI-ARIA 역할이 필요하지 않으며, 헤딩 구조(H1~H6)를 통한 문서 구조화가 우선입니다.

Separator · Basic

인라인 항목을 가로로 나열하고, 각 항목 사이에 세로 구분선을 표시합니다.
.separator 컨테이너와 내부 .item 요소를 사용하며, 구분선은 .item:not(:first-child)::before의 가상요소로 렌더링됩니다.

Preview Notes Markup
  • 레이아웃: inline-flex + gap: 0 rem(12px), 줄바꿈 허용(flex-wrap: wrap)
  • 구분선: 가상요소 ::before로 렌더링(스크린리더에 읽히지 않음)
  • 포커스 링: 내부 a, button에 :focus-visible 적용(믹스인 focus(fit))
 
<div class="separator">
  <div class="item"><a href="#">이용약관</a></div>
  <div class="item"><a href="#">개인정보처리방침</a></div>
  <div class="item"><button type="button">문의하기</button></div>
</div>

접근성 · 구분선은 장식적 요소로 스크린리더에 노출되지 않습니다. 링크/버튼에는 키보드 포커스 표시(:focus-visible)가 적용됩니다. 항목 그룹에 내비게이션 의미가 있는 경우 <nav aria-label="...">로 감싸세요.

Separator · Mixed Items

텍스트 링크와 버튼이 혼합된 경우에도 동일한 마크업 패턴을 유지합니다. 버튼은 상호작용 요소이므로 type="button"을 명시합니다.

Preview Markup
공지사항
자주 묻는 질문
 
<div class="separator">
  <div class="item"><a href="#">공지사항</a></div>
  <div class="item"><a href="#">자주 묻는 질문</a></div>
  <div class="item"><button type="button" class="text-btn">1:1 문의</button></div>
</div>
Do / Don’t
Case Do Don’t
Divider 간격
  • 유틸리티 클래스로 상황별 상/하 여백을 조절
  • 문서 구조는 헤딩 체계를 우선 정리
  • 여러 줄의 Divider를 과도하게 중첩
  • 의미 없는 콘텐츠 사이에 무분별하게 사용
Separator 항목
  • 각 항목은 .item으로 감싸 일관된 구분선 표시
  • 포커스 가능한 요소(a, button)를 내부에 배치
  • .item 없이 텍스트만 직접 나열
  • 의미 없는 | 문자 삽입으로 구분선 대체
Patterns

프로젝트에서 반복적으로 사용하는 Divider/Separator 패턴 모음입니다.

1