본문 바로가기
Reference/HTML

hr 태그는 단란 요소간의 주제별 구분을 설정합니다.

by @webs 2022. 11. 1.
Reference/HTML

<hr> 태그는 단란 요소간의 주제별 구분을 설정합니다.

by @webs 2022. 7. 4.

<hr>

<hr> 태그는 단란 요소간의 주제별 구분을 설정합니다. 단순 줄바꿈을 위함이라면 <br> 태그를 사용합니다. 주제를 구분하기 위한 요소이며, 시각적인 표현은 CSS를 통해 설정합니다.


특징 설명
요소 블록 요소(Block Element)
닫는 태그 없음
버전 HTML4
시각적 표현 수평선
사용성 ★★☆☆☆

정의(Definition)

  • <hr> 태그는 horizontal rule의 약자이며, 단란 요소간의 주제별 구분을 위해 설정합니다.
  • <hr> 태그는 연극에서 주제를 구분하거나, 책에서 화제 변경을 구분하기 위해 사용합니다.
  • <hr> 태그는 시각적인 부분보다 의미론적으로 사용하므로, 시간적인 표현은 CSS를 통해 표현합니다.

크로스브라우징(CrossBroswing)

  • HTML4에서 <hr> 태그는 수평선을 의미하지만, HTML5에서 <hr> 태그는 주제를 분리할 때 사용합니다.

예제1(Sample)

hr 태그 적용 여부 확인 예제입니다.

태그는 단란 요소간의 주제별 구분을 설정합니다.


태그는 단란 요소간의 주제별 구분을 설정합니다.

HTML
CSS
SCRIPT
<div class="hr-box">
    <p>태그는 단란 요소간의 주제별 구분을 설정합니다.</p>
    <hr>
    <p>태그는 단란 요소간의 주제별 구분을 설정합니다.</p>
</div>
.hr-box {
    background-color: white;
    overflow: hidden;
    width: 100%;
    padding: 1%;
}
.hr-box hr {
    margin: 20px 0;
}
//Javascript none

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<hr>

참고(Reference)


태그

, ,

댓글1