목차
<hr> 예제 - HTML과 XHTML에서의 차이 <hr> 정의 <hr> 속성 <hr> 예제 - 색상/두께 설정 <hr> 예제 - block 요소 특성 비교1 - <div> 태그 이용한 가로선 비교2 - <p> 태그 이용한 가로선
<hr> 예제 - HTML과 XHTML에서의 차이
HTML : 홈짱닷컴 (homzzang.com) <hr> 아, 지루해. 무슨 재미난 일 없나?
XHTML : 홈짱닷컴 (homzzang.com) <hr/> 아, 지루해. 무슨 재미난 일 없나?
<hr> 정의
주제가 확연히 다른 글의 단락이나 문단을 구분 위한 수평선 표시
( hr : h o r izontal의 첫 글자와 세 번째 글자)
즉, 단순한 문단 구분이 아닌, 주제가 확연히 다를 때 사용.
1.
HTML 에선 종료 태그 없이 <hr> 로 단독 사용하나,
XHTML 버전에서는 반드시 <hr /> 처럼 /로 닫아줘야 함. 2.
block 요소 임. 즉, 위아래로 정렬되는 요소 임. 3.
브라우저마다 고유의 윤곽선 두께가 기본으로 잡혀 있음. (예) 크롬 경우, 진회색
4.
종료태그 없이 단독 사용
<hr> 속성
속성
속성값 쓰임새 비고 align
left : 좌측 정렬
center : 중앙 정렬
right : 우측 정렬
width가 100% 아닐 때, 어느 쪽에 정렬시킬것인지 정함. HTML5 제외 noshade
하나 의 굵은선 으로 표시
HTML5 제외 size
px 단위
<hr> 수평선의 세로 두께 HTML5 제외 width
px 단위
% 단위
<hr> 수평선의 가로 길이 HTML5 제외
<hr> 예제 - 색상/두께 설정
[방법1] - background, height 속성 이용
<hr style="background:red; height:100px;">
결과보기
[방법2] - border-color, border-width 속성 이용
<style>
body {
background:gray;
}
.hz {
height: 0;
padding: 0;
border-width: 1px 0 1px 0;
border-style: solid;
border-color: #ccc transparent #fff transparent;
}
<style>
홈짱닷컴<hr>
Homzzang.com<hr class="hz">
홈페이지 제작관리 강의
결과보기
※ background : 배경색
※ border-color : 테두리색 (이 값을 주더라도, 브라우저마다 기본으로 잡혀있는 기본 윤곽선의 색은 변하지 않음.)
<hr> 예제 - block 요소 특성
<hr style="background:red; width:50px; height:100px;">
<hr style="background:red; width:50px; height:100px;">
결과 보기 ※ hr 태그는 block 요소라서, 위처럼 가로 길이를 짧게 하더라도 옆으로 나열되는 게 아니라 세로로 나열됨.
비교1 - <div> 태그 이용한 가로선
<div style='background:red; height:5px;'></div> 결과 보기 ※ 윤곽선 색이 별도로 안 잡혀 있어, 회색 이외의 가로선을 그을 때 유용함. 주로 이거 많이 이용.
비교2 - <p> 태그 이용한 가로선
<p style='background:red; height:5px;'></p> 결과 보기 ※ 가능하나, <p> 태그는 문단 단락의 의미가 있으므로, 되도록이면 hr 또는 div 태그 이용 권장.
