How To - 구분선

w3.css

구분선

CSS를 사용하여 다양한 구분선을 만드는 방법을 알아보자.

구분선을 만드는 방법

1단계) HTML 추가

<hr class="dashed">
<hr class="dotted">
<hr class="solid">
<hr class="rounded">

2단계) CSS 추가

/* Dashed border */
hr.dashed {
  border-top: 3px dashed #bbb;
}

/* Dotted border */
hr.dotted {
  border-top: 3px dotted #bbb;
}

/* Solid border */
hr.solid {
  border-top: 3px solid #bbb;
}

/* Rounded border */
hr.rounded {
  border-top: 8px solid #bbb;
  border-radius: 5px;
}

기본 예시

예제 보기