hr 태그

hr 태그는 수평 구분선을 설정합니다. 이 태그의 장점은 단일 선을 그리기 위해 불필요한 블록을 생성할 필요가 없다는 점입니다. 닫는 태그가 필요하지 않습니다.

예제

hr 태그가 어떻게 동작하는지 살펴보겠습니다:

<hr>

CSS 속성 border-color를 사용하여 선의 색상을 변경해 보겠습니다:

<hr style="border-color: red;">

선의 색상은 color 속성으로도 변경할 수 있습니다 (이때 color 속성과 border-color 속성이 동시에 지정된 경우 후자가 우선순위를 가집니다):

<hr style="color: red">

이제 CSS 속성 border를 사용하여 선의 색상을 변경해 보겠습니다. 이 경우 선이 두 배 두께가 될 것에 주의하세요 (위쪽과 아래쪽 모두 테두리를 설정했기 때문입니다):

<hr style="border: 1px solid red;">

CSS 속성 border-top를 사용하여 선의 색상을 변경하고 위쪽 테두리만 설정해 보겠습니다. 이제 이중선은 나타나지 않을 것입니다:

<hr style="border-top: 1px solid red;">

CSS 속성 border-top를 사용하고, solid 대신 dotted 값을 지정하여 점선 형태의 선을 만들어 보겠습니다:

<hr style="border-top: 1px dotted red;">

CSS 속성 border-width를 사용하여 선의 두께를 늘려 보겠습니다:

<hr style="border-width: 10px; border-color: red;">

이제 선에 높이 height와 border를 통해 테두리를 추가해 보겠습니다. 이 경우 테두리는 위쪽과 아래쪽으로 분리될 것입니다:

<hr style="height: 10px; border: 1px solid red;">