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

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	7	8	9	10	11
<hr>	○	○	○	○	○	○	○	○	○	○	○	○	○	○

참고(Reference)

• https://html.spec.whatwg.org/multipage/grouping-content.html#the-hr-element

---