hr 태그는 수평선을 보여주어 섹션 또는 단락을 구분짓기 위해서 간편하게 사용할 수가 있습니다. 디바이더로 불리기도 하죠. 이 부분을 표현하기 위해서 섹션 상단 또는 하단에 스타일을 지정하기도 하지만 hr 태그를 사용하면 알아보기가 쉽기 때문에 더 좋죠. 그럼 아래 예제를 참고하세요.


[ 1 ] hr 태그 예제 보기



<html>
   <body>
      <section>A</section>
      <hr class="hrcss"></hr>
      <section>B</section>
   </body>
</html>



 Result 
A



B

// 위처럼 A 섹션과 B섹션을 구분해 주는 구분선이 생기게 되었습니다.



! 두번째 예제. 테두리에 스타일 적용하기



<style>
    .hrcss { border-color: red; width: 50%; }
</style>



 Result 
A



B

// 길이 width를 50%, 테두리 색상을 red로 설정한 결과