<hr> 태그도 사각형 요소다.

주제별로 문단을 분리하기 위해 넣는 수평선.

수평선을 넣기 위해 쓰는 태그가 아니라 의미적으로 분리하기 위함의 목적이다.

필요없으면 css에서 border: none;으로 숨기면 된다.

 

모든 html 요소는 사각형이므로 <hr>태그도 역시 사각형이다.

수평선으로 보이는 것은 위 아래 변이 합쳐져 있는 것이다.

padding값을 주면 사각형으로 보이는 것을 확인할 수 있다.

때문에 border: 2px; 값을 주면 위 아래 변이 각각 2px가 되어 4px의 수평선으로 보이게 된다.

<hr>태그에 두께를 줄 때는 border: none;으로 네 변을 숨기고 border-top: 2px;처럼 하나의 변을 지정하여 두께를 적용하면 2px의 수평선으로 보이게 될 것이다.

* dashed는 점선

hr {     border: 2px dashed red; }	hr {     border: none;     border-top: 2px dashed red; }