웹사이트 섹션과 섹션을 자연스럽게 구분하는 SVG 디바이더를 생성합니다. 랜딩페이지·기업 사이트·블로그에 활용하세요.

디바이더 SVG 사용법

  1. 원하는 디바이더 스타일을 9개 중 선택합니다.
  2. 색상·높이·뒤집기 옵션을 조정합니다.
  3. 실시간 미리보기로 확인합니다.
  4. SVG 코드를 복사하거나 파일로 다운로드합니다.
  5. HTML 섹션 사이에 삽입합니다. (width 100%·height auto 권장)

주요 기능

  • 9가지 스타일 (Wave·Double Wave·Curve·Tilt·Zigzag·Triangle·Arrow·Cloud·Dots)
  • 색상·높이·너비·상하 반전
  • 반응형 viewBox로 어떤 화면 너비에서도 자연스럽게 늘어남
  • 완전 무료, 외부 의존성 없음

활용 예시

  • 랜딩 페이지 섹션 분리 — Hero ~ Feature ~ Pricing 사이
  • 기업 사이트 — About 섹션 상단 그라데이션 디바이더
  • 블로그 푸터 위 — Wave로 부드러운 마무리
  • 이벤트 페이지 — Tilt로 동적인 느낌
  • SaaS 가격표 — Zigzag로 시각적 강조

섹션 디바이더 사용 팁

디바이더의 색상은 다음 섹션의 배경색과 같아야 자연스럽게 연결됩니다. 예: 흰색 섹션 다음에 파란색 섹션이 오면 디바이더 색을 파란색으로 설정. 높이는 80~150px이 적당하며, 모바일에서는 약간 줄이는 미디어쿼리 처리가 좋습니다. SVG는 display: block; width: 100%; height: auto; CSS를 적용해 반응형으로 사용하세요.

자주 묻는 질문

디바이더가 가로로 안 늘어나요.

SVG에 preserveAspectRatio="none"을 추가하고 CSS로 width: 100%를 지정하세요. 본 도구가 생성하는 SVG는 이 속성이 포함되어 있습니다.

그라데이션 디바이더는 만들 수 있나요?

현재는 단색만 지원합니다. 그라데이션이 필요하면 다운로드한 SVG를 텍스트 편집기에서 열어 <linearGradient>를 직접 추가할 수 있습니다.

모바일에서 너무 커 보여요.

미디어쿼리로 모바일에서 SVG 높이를 줄이세요. 예: @media (max-width: 640px) { svg { height: 60px; } }

상업적으로 사용해도 되나요?

네. 생성된 SVG는 자유롭게 사용 가능합니다.