웹 문서에 HR 태그를 사용하는 방법
HR 태그는 전통적으로 웹 문서에 가로선 (가로 괘선이라고도 함)을 추가하는 데 사용되었습니다. 선을 추가하려면
을 입력하여 브라우저가 기본 설정을 사용하여 페이지 또는 부모 요소의 전체 너비에 걸쳐 선을 그리도록 지시합니다. 이 기본 행은 단순하며 목적에 따라 종종 사용되지만 속성을 지정하여 행의 크기, 색상 및 다른 특성 사이의 위치를 변경할 수 있습니다. 수평선의 모양을 수정하는 방법은 HTML4와 HTML5 간에 변경되었습니다.
HR 태그는 의미 론적입니까?
HTML4에서 HR 태그는 의미가 아닙니다. 의미 론적 요소는 브라우저와 개발자가 쉽게 이해할 수있는 용어로 의미를 설명합니다. HR 태그는 원할 때마다 문서에 간단한 선을 추가하는 방법이었습니다. 선을 표시하려는 요소의 위쪽 또는 아래쪽 테두리 만 스타일을 지정하면 요소의 위쪽 또는 아래쪽에 수평선이 생기지 만 일반적으로 HR 태그는이 용도로 사용하기가 더 쉽습니다.
HTML5부터는 HR 태그가 의미 론적으로 바뀌었고 이제는 단락 수준의 주제별 구분을 정의합니다.이 단락은 새로운 페이지 나 다른 더 강력한 구분 기호를 보증하지 않는 내용의 흐름을 중단하는 것입니다. 주제가 변경되었습니다 . 예를 들어 스토리에서 장면이 변경된 후 HR 태그를 찾거나 참조 문서에서 주제가 변경되었음을 나타낼 수 있습니다.
HTML4 및 HTML5의 HR 속성
HTML4에서는 HR 태그에 "align", "width"및 "noshade"와 같은 간단한 속성을 지정할 수 있습니다. 정렬은 왼쪽, 가운데, 오른쪽 또는 양쪽 정렬로 설정할 수 있습니다. 너비는 페이지를 가로 지르는 선을 확장 한 기본 100 %에서 수평선의 너비를 조정합니다. noshade 속성은 음영 처리 된 색상 대신 단색 색상 선을 렌더링했습니다. 이러한 속성은 HTML5에서는 더 이상 사용되지 않으며 CSS를 사용하여 HTML5에서 HR 태그의 스타일을 지정해야합니다. 예를 들어, HTML 4 :
높이가 10 픽셀 인 수평선을 생성합니다.
HTML5에서 CSS를 사용하면 높이가 10 픽셀 인 수평선 스타일이 적용됩니다.
CSS 를 사용 하여 수평선의 스타일을 지정하면 웹 페이지를 자유롭게 디자인 할 수 있습니다. 이 스타일 HR 태그 기사에서 HR 태그의 스타일 예제를 많이 볼 수 있습니다. 너비와 높이 스타일 만 모든 브라우저에서 일관되므로 다른 스타일을 사용할 때 약간의 시행 착오가 필요할 수 있습니다. 기본 너비는 항상 웹 페이지 또는 부모 요소 너비의 100 %입니다. 규칙의 기본 높이는 2 픽셀입니다.