정의

hr 태그는 콘텐츠 내용에서 주제가 바뀔 때, 사용하는 수평 가로선이다.

HTML 문서에서 주로 내용을 구분하거나 주제의 변화를 정의한다

HTML5에서 변경된 사항

  • HTML5 이전에서는 단순히 가로선을 나타냈지만, HTML5에서는 주제의 흐름 변경을 나타내도록 변경되었다.
  • 시각적인 의미보다는 의미적 용어(semantic term)로 사용된다.

또한, HTML5에서는 hr 요소의 layout을 더 이상 지원하지 않으며 CSS를 대신 사용하도록 변경되었다.

CSS

1
2
3
4
5
6
7
8
9
.news::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  width: 80%;
  height: 1px;
  background: #aaa linear-gradient(to right, #aaa, #fff)
}
  • news라는 클래스의 가상 선택자로 css 스타일링 해줄 수 있다.