[HTML/CSS] hr 태그로 가로줄 긋기 (굵기, 길이, 색깔, 모양, 정렬 등)

<hr />

hr 태그는 Horizontal Rule의 약자로, HTML에서 가로줄을 생성해주고, 문단을 구분하는데 사용됩니다.

HTML의 <hr> 태그를 이용하여 가로줄을 긋고, CSS를 활용하여 가로줄의 가로 세로 길이, 색깔, 모양 등을 변경하는 방법을 정리하였습니다.

<hr /> 에 스타일 적용하기

HTML의 <hr />에 스타일을 적용하는 방법은 2가지가 있습니다.

• HTML 속성 사용하기 – align, color, size, width, noshade
• CSS 적용하기

HTML 속성을 사용하여 스타일을 적용하는 것은 편리합니다.

하지만, HTML5 이후, 이 속성들은 대부분 deprecated되었거나, standard가 아닌 경우가 대부분입니다.

따라서, 이 속성들을 사용하여 <hr />의 스타일을 지정하면

브라우저에 따라 해당 속성이 지원되지 않을 수 있습니다.

따라서, <hr />에 스타일을 적용할 때는, html의 속성을 사용하기 보다는 CSS를 적용하는 것이 좋습니다.

가로 길이, 세로 높이 변경하기

width : 50%;
수평선의 가로 길이를 조정하기 위해 CSS에 width 값을 50%로 지정하였습니다.

height : 50px;

수평선의 높이를 50px로 지정하였습니다.

색깔 지정하기

background-color : pink;

선의 색깔을 지정하기 위해 CSS에 background-color 속성을 지정하였습니다.

테두리 선 없애기

border : 0;

테두리 선을 없애기 위해 border 속성을 0으로 지정하였습니다.

왼쪽, 오른쪽, 가운데 정렬

margin-left, margin-right 속성값을 지정하여 수평선의 위치를 정렬하였습니다.
(이 방법은 Internet Explorer에서는 동작하지 않을 수 있습니다.)

선 모양 변경하기

hr {
width : 50%;
}

.hr-solid {
border : 0px;
border-top: 5px solid #663399;
}

.hr-dotted {
border : 0px;
border-top: 5px dotted #663399;
}

.hr-dashed {
border : 0px;
border-top: 5px dashed #663399;
}

border : 0px;

border-top : 5px solid #663399;

수평선의 모양이 변경되는 것처럼 보여지게 하기 위해 각 테두리의 높이를 0px로 하고,

위쪽 테두리의 높이를 5px로 하고, border의 모양을 지정하였습니다.

즉, <hr />의 위쪽 테두리(border)만 보여지도록 하고, 위쪽 테두리의 모양을 CSS 속성을 사용해서 지정한 것입니다.

​

HTML의 <hr /> 태그를 이용하여 수평선을 그리고, CSS를 사용하여 위치, 모양, 색상 등을 변경하는 방법을 알아보았습니다.