HTML HR tag : 가로줄 넣기와 굵기 색상 정렬 등 속성 지정하는 방법

*
블로그나 웹페이지에 가로줄을 넣는 태그는 <hr>이며, hr은 horizontal rule의 두문자어이다.
<hr>이라고만 간단하게 넣으면 가로줄이 그으진다. 이 때는 블로그나 웹페이지에서 지정한 기본 설정이 적용된다.

[1] 가로줄 넣기 - 기본
<hr>
실제 적용한 모습



[2] 가로줄의 선종류 굵기 색상 지정
가로줄에 속성을 지정하면 아래와 같은 모양이 된다.
<hr style="border: 선종류 선굵기 선색상;">

선종류: solid dotted dashed double groove ridge inset outset 등이 있다
선굵기: 단위는 px, pt, %, em 등을 쓸 수 있다
선색상: red blue black 등과 같이 색상이름을 쓰도 되고, #eeeeee 와 같이 코드로 쓰도 된다

아래의 예에서는 선의 특징을 보이기 위해 선굵기를 10px로 굵게 하였다. 선굵기를 1px와 같이 가늘게 하면 다르게 보이므로 알맞게 조절하여 꾸미면 된다.


[선종류: solid]
<hr style="border: solid 10px red;">
실제 적용한 모습



[선종류: dotted]
<hr style="border: dotted 10px red;">
실제 적용한 모습



[선종류: dashed]
<hr style="border: dashed 10px red;">
실제 적용한 모습



[선종류: double]
<hr style="border: double 10px red;">
실제 적용한 모습



[선종류: groove]
<hr style="border: groove 10px red;">
실제 적용한 모습



[선종류: ridge]
<hr style="border: ridge 10px red;">
실제 적용한 모습



[선종류: inset]
<hr style="border: inset 10px red;">
실제 적용한 모습



[선종류: outset]
<hr style="border: outset 10px red;">
실제 적용한 모습






[3] 가로줄에 길이를 지정하고 정렬하기


[길이를 지정하고 왼쪽 정렬]
<hr align="left" style="border: solid 10px green; width: 50%;">
실제 적용한 모습



[길이를 지정하고 가운데 정렬]
<hr align="center" style="border: solid 10px green; width: 50%;">
실제 적용한 모습



[길이를 지정하고 오른쪽 정렬]
<hr align="right" style="border: solid 10px green; width: 50%;">
실제 적용한 모습






>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

도움이 되기를 바랍니다.