섹션 구분선·디바이더. 6가지 종류 (선·점선·그라데이션·물결·V자·지그재그).
➖ 미리보기
— 위 콘텐츠 영역 —
— 아래 콘텐츠 영역 —

사용법

  1. 디바이더 종류 선택 (6가지)
  2. 두께·여백·가로 비율 조정
  3. 색 설정 (그라데이션이면 끝색)
  4. 텍스트(OR·★ 등) 입력 (선택)
  5. HTML+CSS 복사

주요 기능

  • 6가지 디바이더 (단순·점선·도트·그라데이션·텍스트·이중선)
  • 두께 1~20px, 여백 0~120px
  • 가로 비율 20~100% (가운데 정렬 자동)
  • 그라데이션 디바이더 (한쪽이 사라지는 효과)
  • 가운데 텍스트·아이콘 옵션 (OR·★·❤ 등)

활용 예시

  • 웹사이트 섹션 구분 — Hero ↔ Features 사이
  • 블로그 본문 — 챕터 구분
  • 로그인 폼 — "OR" 가운데 텍스트 (소셜 로그인)
  • 이메일 푸터 — 콘텐츠와 푸터 분리
  • 제품 카드 — 정보 그룹 분리

디바이더 디자인 팁

(1) 가로 비율 60~80%가 가장 자연스러움 — 100%는 너무 강조됨. (2) 색상은 본문 색의 30% 명도로 — 너무 진하면 시선 차단. 회색 `#cbd5e1` 추천. (3) 그라데이션 페이드는 디바이더 양 끝이 자연스럽게 사라져 모던한 인상. (4) "OR" 텍스트 디바이더는 폼 UI에서 표준.

자주 묻는 질문

hr 태그 사용해야 하나?

의미적으로 명확한 섹션 구분이면 `<hr>`이 SEO·접근성에 좋음. 장식용이면 `<div>`로.

다크 모드 대응?

CSS 변수: `--divider: rgba(255,255,255,0.1)` 다크 모드용 / `rgba(0,0,0,0.1)` 라이트.

SVG 물결·지그재그는?

이건 단순 디바이더용. 복잡한 모양은 별도 도구(wave-pattern, action-lines) 추천.

무료인가요?

네.