CSS 구분선 생성기

단순한 선 구분선

/* Subtle horizontal rule */
.divider {
  height: 1px;
  background: #e5e7eb;
  border: 0;
  margin: 3rem 0;
}

/* With text in the middle */
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #6b7280;
}
.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

사선 섹션 전환

clip-path 기법:

.hero {
  background: #0f172a;
  color: white;
  padding: 4rem 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 48px));
}

왼쪽 아래 모서리를 48px 끌어올려 대각선 경사를 만듭니다. 깔끔하게 전환하려면 다음 섹션이 경사면에 딱 맞게 시작해야 하며, 흰 틈이 생기지 않도록 합니다.

반대 방향의 대각선을 원한다면 어느 쪽 아래 모서리를 끌어올릴지 바꾸면 됩니다. 노치나 지그재그를 만들려면 꼭짓점을 더 추가하세요.

SVG 물결 구분선

유기적인 곡선을 표현하기에는 SVG가 가장 깔끔한 방법입니다.

<div class="hero">…</div>
<svg class="wave" viewBox="0 0 1440 80" preserveAspectRatio="none">
  <path d="M0 80 C 360 0, 1080 0, 1440 80 L 1440 80 L 0 80 Z"
        fill="white"/>
</svg>

.wave {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: -1px; /* close any subpixel gap */
}

preserveAspectRatio="none"를 지정하면 원본 크기와 상관없이 SVG가 컨테이너 너비에 맞게 늘어납니다. margin-top: -1px는 일부 렌더러에서 남는 머리카락처럼 가는 틈을 메웁니다.

자주 쓰는 구분선 모음

유용한 코드 조각:

팁

• 이음매 맞추기. 구분선의 배경(SVG 채움색 또는 사선 섹션의 색상)은 바로 다음 섹션의 배경과 정확히 일치해야 합니다. 단 1px의 색조 차이만으로도 효과가 망가집니다.
• 좁은 화면에서는 가파른 곡선을 피하세요. 1440px에서 우아해 보이는 물결도 360px에서는 짓눌린 사인파처럼 보일 수 있습니다. 모바일에서는 미디어 쿼리로 진폭을 줄이거나 다른 SVG 경로를 사용하세요.
• 구분선을 여러 개 겹치지 마세요. 섹션 경계마다 이음매는 하나면 충분합니다.
• 성능. 인라인 SVG 구분선은 거의 부담이 없지만, 이미지 기반 구분선은 네트워크 요청이 발생합니다. 인라인 SVG가 더 낫습니다.