[html] 수평선 그리기, hr 태그

 

 

[html] 수평선 그리기, hr 태그

 

html 문서에서 문단을 의미적으로 분리하고자 할 때 hr 태그를 사용할 수 있습니다.

 

html 4.01에서 hr 태그는 수평선을 표현했다면,

html5에서는 hr태그를 표현적이기보다 의미적인 요소로 규정하여, 주제를 분리하기 위한 용도로 사용합니다.

 

닫는 태그는 없음.

 

너비, 높이 등 스타일을 주고자 할 때는 전부 css 통해 작성합니다.

 

(html에서 사용했던 align, noshade, size, width은 html5에서 퇴화 속성임)

 

[css]

 

hr{width:500px;} -> width로 수평선 너비 지정

 

hr{height:500px;} -> height로 수평선 높이 지정

 

hr{color:red;} -> color 로 색상 선 지정

                        단, chrome 등 color 속성이 적용되지 않을 때 background-color

 

hr(text-align:left} ->text-align으로 left/center/right 정렬(hr 태그는 기본값이 중앙 정렬)

                        단, chrome, ff 등에서 정렬할 때, 왼쪽은 margin-left:0 오른쪽은 margin-right로 정렬함

 

hr(border:none; border:1px solid red;} ->border 속성을 사용해, 수평선을 지우고 새로운 선을 만들 수 있다

 

*ie와 다르게 크롬이나 ff에서 수평선이 시작점에서 줄이 조금 바깥으로 나오는 경우가 있다

이때 border-bottom:0px으로 지워준다

 

 

 

사용 예

 

html

<h3>TEST 1</h3> <hr class="one">   <h3>TEST 2</h3> <hr class="two">   <h3>TEST 2-1</h3> <hr class="two_1">   <h3>TEST 3</h3> <hr class="three">   <h3>TEST 3-1</h3> <hr class="three_1">   <h3>TEST 4</h3> <hr class="four">   <h3>TEST 5<h3> <hr class="five">   <h3>TEST 6<h3> <hr class="six">

 

css

hr.two{width: 500px;color:red;border: thin solid red;} hr.two_1{width: 500px;border-bottom:0px; text-align:left; margin-left: 0px;} hr.three{height: 50px;} hr.three_1{height: 50px; width:0px;border-right:0px;} hr.four{border:none;} hr.five{border:none; border:1px dashed blue;} hr.six{border:none; border:5px double orange;}

 

 

▶실행 화면입니다.(구글 크롬)

hr.htm

 

 

 

 

TEST1: hr 기본값일 때 화면

 

TEST2:  wdth 500px의 빨간석 샌

 

TEST2-1: 테스트 1과 2를  크롬에서 보면, 왼쪽 시작점에서 살짝 밑으로 내려간 선이 보입니다.

 

그래서 TEST2-1에서는 border-bottom:0px를 적용했습니다.

 

또, ie에서는  text-align 값이 적용되지만 크롬과 ff에서 실행하면 적용되지 않습니다.

그래서 margin 값으로 조절해 주었습니다

TEST3: height: 50px일 때

 

TEST3-1: height: 50px으로 하고 width 0px으로 하면 수직선처럼 표시됩니다.

TEST4: border:none을 적용하자 수평선이 사라졌습니다.

TEST5/6:  border의 다양한 선 모양을 적용해 볼 수 있습니다. 

 

 

[html5] video 태그 사용법

 

[html] frameset, frame 태그, 사용해도 될까요?

 

[html5] audio 태그로 음악 파일 삽입하기