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

 

HTML의 <hr> 태그를 이용하여 가로줄을 긋고,

CSS를 활용하여

가로줄의 가로 세로 길이, 색깔, 모양 등을 변경하는 방법을 정리하였습니다.

 

 

<hr />

HTML의 hr 태그는 Horizontal Rule의 약자로,

HTML에서 가로줄을 생성해주고, 문단을 구분하는데 사용됩니다.

<hr />

 

 

 

단순히 HTML에 <hr /> 태그를 추가하여

가로선을 그었습니다.

 

 

---

 

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

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

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

 

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

하지만, HTML5 이후,

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

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

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

따라서, <hr />에 스타일을 적용할 때는,

html의 위 속성을 사용하기 보다는

CSS를 적용하는 것이 좋습니다.

 

 

 

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

 

<hr />

hr {
  width : 50%;
  height : 50px;
}

 

 

width : 50%;

수평선의 가로 길이를 조정하기 위해

CSS에 width 값을 50%로 지정하였습니다.

 

height : 50px;

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

 

 

 

색깔 지정하기

 

<hr />

hr {
  width : 50%;
  height : 50px;
  background-color : pink;
}

 

 

 

background-color : pink;

선의 색깔을 지정하기 위해

CSS에 background-color 속성을 지정하였습니다.

 

 

 

테두리 선 없애기

 

<hr />

hr {
  width : 50%;
  height : 50px;
  background-color : pink;
  border : 0;
}

 

 

 

border : 0;

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

 

 

 

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

 

<hr class='left-hr'/>
<hr class='center-hr'/>
<hr class='right-hr'/>

hr {
  width : 50%;
  height : 50px;
  background-color : pink;
  border : 0;

}

.left-hr {
  margin-left : 0;
}

.center-hr {
  margin-left : auto;
  margin-right : auto;
}

.right-hr {
  margin-right : 0;
}

 

 

 

margin-left, margin-right 속성값을 지정하여

수평선의 위치를 정렬하였습니다.
(이 방법은 Internet Explorer에서는 동작하지 않을 수 있습니다.)

 

 

 

선 모양 변경하기

 

<hr class='hr-solid'/>
<hr class='hr-dotted'/>
<hr class='hr-dashed'/>

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를 사용하여, 위치, 모양, 색상 등을 변경하는 방법을 알아보았습니다.