HTML hr 태그 색, 굵기 조절 및 그림자 삭제 방법

HTML <hr> 태그는 수평선을 그리는 태그입니다. 단순 선긋기가 아니라 내용상으로 구분하는 문단의 기능을 합니다. hr 태그의 색 변경, 굵기 변경, 그림자 변경 기능을 살펴보겠습니다.

<hr> 태그 기본 형태

<hr> 태그는 <br> 태그처럼 닫는 태그가 없는 빈태그입니다. 따라서 <hr> 태그를 입력한 부분이 줄바꿈이 일어나고 대신 수평선이 생깁니다.

<hr> 수평선의 경우 border와 다르게 약간의 입체감 또는 두 줄로 보입니다.

<hr>

<hr> 기능은 수평선 긋기입니다. 시각적 의미뿐만 아니라 의미론적 요소로써도 내용이 바뀌었음을 나타냅니다.

border-bottom 속성이 단순한 시각적 줄긋기를 말한다면, <hr> 태그는 내용상 줄긋기를 말합니다. 만약 검색 엔진에 해당 영역의 내용이 달라졌다는 메시지를 주려면 border-bottom 속성이 아닌 <hr> 태그로 수평선을 표현해야 합니다.

<p>서울에서 가장 추운 대학은?</p>
<p>서울 시립대</p>
  <hr>
<p>아픈 우유를 두 글자로?</p>
<p>앙팡</p>
  <hr>
<p>인천 앞바다의 반댓말은?</p>
<p>인천엄마다</p>
  <hr>

<hr> 색 변경은 CSS 선택자에서 background-color 또는 background 속성을 이용합니다.

hr {
  background-color: blue;
}

<hr> 태그에 클래스 속성을 삽입해서 여러 종류의 색을 표현해봤습니다.

.a {
  background-color: red;
  height: 20px;
}
.b {
  background-color: green;
  height: 20px;
}
.c{
  background-color: purple;
  height: 20px;
}

<hr> 태그 굵기는 HTML 5에서는 CSS 선택자에서 height 속성명으로 두께를 지정합니다.

hr {
  height: 20px;
  background-color: gold;
}

size 속성을 이용한 <hr> 태그 굵기 조절은 HTML 4에서 사용했었습니다. HTML 5에서는 웹표준이 아니므로 사용을 지양해야 합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
    </style>
  </head>
  <body>
    <hr size="20px;">
  </body>
</html>

border: 0; 속성을 삽입하면 외부선 또는 그림자 효과를 삭제할 수 있습니다.

.x {
border: 0px;
height: 40px;
background-color: gold;
}

HTML 4에서 사용했던 noshade 속성은 HTML 5에서는 웹표준이 아니므로 사용을 지양합니다.

<hr size="20px;">
<hr noshade size="20px;">

<hr> 태그의 굵기를 조절하는 size 및 그림자를 조절하는 noshade는 HTML4의 구문법이므로 사용을 지양합니다.