HTML <hr> 태그

정의와 사용법

<hr> 태그는 HTML 페이지에서 주제 분리(예: 주제의 변화)를 정의합니다.

<hr> 요소는 일반적으로 수평선으로 표시되어 HTML 페이지에서 내용을 분리하거나 내용에 변화를 정의하는 데 사용됩니다。

추가로 참조:

HTML DOM 참조 매뉴얼:HR 객체

예제

예제 1

사용 <hr> 내용 내 주제 변화를 정의하는 태그:

<h1>Web의 주요 언어</h1>
<p>HTML은 Web 페이지를 생성하는 표준 마크업 언어입니다. HTML은 Web 페이지의 구조를 설명하며, 요소로 구성되어 있습니다......</p>
<hr>
<p>CSS는 화면, 종이 또는 다른 미디어에서 HTML 요소가 표시되는 방식을 설명하는 언어입니다......</p>
<hr>
<p>JavaScript는 HTML과 Web의 프로그래밍 언어입니다. JavaScript는 HTML 내용과 속성 값을 변경할 수 있습니다......</p>

직접 테스트해 보세요

예제 2

정렬 <hr> 요소(사용 CSS):

<hr style="width:50%;text-align:left;margin-left:0">

직접 테스트해 보세요

예제 3

그림자 없는 <hr> (사용 CSS):

<hr style="height:2px;border-width:0;color:gray;background-color:gray">

직접 테스트해 보세요

예제 4

설정 <hr> 요소의 높이(CSS 사용):

<hr style="height:30px">

직접 테스트해 보세요

예제 5

설정 <hr> 요소의 너비(CSS 사용):

<hr style="width:50%">

직접 테스트해 보세요

전역 속성

<hr> 태그는 또한 HTML에서의 전역 속성。

이벤트 속성을 지원합니다

<hr> 태그는 또한 HTML에서의 이벤트 속성。

기본 CSS 설정

대부분의 브라우저는 다음 기본값으로 표시합니다 <hr> 요소:

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

직접 테스트해 보세요

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원