본문 바로가기

블로그/꾸미기

hr 태그 사용하기

hr 태그 쓰는 방법에 대해서 간략히 설명하겠습니다.

hr 태그는 수평선(티스토리 글쓰기 에디터의 구분선과 비슷하지만 티스토리 에디터는 div 태그를 사용합니다.)을 긋는 데 쓰입니다. 기본 형태는 다음과 같습니다.

<hr>
그러면 다음과 같은 줄이 생깁니다.



웹표준을 지키려면 <hr />과 같이 사용해 끝에 /을 넣어 hr 태그가 닫혔음을 확실히 하는 것이 좋습니다.

밑에 보기를 들어 놓겠습니다. (D)가 있는 것은 deprecated로서, 차후 버전의 HTML에서 없어질 수 있음을 뜻합니다. 곧, 웹표준이 아님을 뜻합니다.

<hr width="234"> : 234px의 가로줄을 긋습니다.(D)


<hr width="50%"> : 가로의 50%를 차지하는 줄을 긋습니다.(D)


<hr width="70%" align="left"> : 가로의 70%를 차지하는 줄을 왼쪽 정렬해서 긋습니다.(D)


<hr color="red"> : 빨간색 줄을 긋습니다.(D?)


<hr size="5" color="blue"> : 5픽셀 높이의 줄을 긋습니다.(D)


<hr size="5"> : 속이 비어 있는 5픽셀 높이의 줄을 긋습니다.(D)


<hr size="5" noshade> : 속이 비어 있지 않은 5픽셀 높이의 줄을 긋습니다.(D)


<hr style="width:234px" /> : 234px의 가로줄을 긋습니다.


<hr style="width:50%" /> : 가로의 50%를 차지하는 줄을 긋습니다.


<hr style="float:left; width:30mm" /> : 30mm 길이의 가로줄을 왼쪽 정렬해서 긋습니다.(float는 인터넷 익스플로러에서 지원하지 않을 수 있습니다.)



<hr style="color:red" /> : 인터넷 익스플로러에서 빨간 줄을 긋습니다.


<hr style="background-color:red" /> : style로 색을 지정할 경우, 웹브라우저에 따라 빨간 줄 그을 때 이렇게 해야 할 수도 있습니다.


높이가 정해져 있어야 색이 변하는 웹브라우저도 있습니다. style로 색을 지정할 때, 모든 브라우저에 보이려면 이렇게 하면 됩니다.(border:none이 없으면 검은 색과 빨간 색이 섞여 나오는 경우가 있습니다.)
<hr style="color:red; background-color:red; height:1px; border:none" />


<hr style="height:3px" /> : 높이 3인 선을 긋습니다.