(html강좌) 8. 수평선 그리기
<HR> 태그는 수평선을 그린다.
이 태그는 단락과 단락을 구분하기 위해
사용하거나, 보기 좋게 배치하는데 사용된다.
또 <HR> 태그를 사용하면 자동으로
줄바꿈이 실행되기 때문에
본문과 같은 행에 선을 긋는 것은 불가능하다.
이 수평선은 웹 브라우저에서 보면 입체적인
수평막대로 보인다. 지정 가능한 옵션은 다음의
네 종류가 있고, 네 종류 전부를
동시에 지정할 수도 있다.
㈎ size = "픽셀 수" - 수평선의 굵기를
지정하는데 단위는 픽셀 수이다.
㈏ width = "픽셀 수 또는 가로 폭에 대한 비율(%)" -
수평선의 길이를 지정하는데 단위는 픽셀 수나
웹 브라우저의 가로 길이에 대한 비율(%)로 지정한다.
㈐ align = "left 또는 center 또는 right" -
수평선의 위치를 지정하는데 기본적으로는
가운데로 위치한다.
㈑ noshade -<HR>의 수평선은 입체감이
있는 수평막대로 되어 있다. 이러한 입체감이나
음영을 갖지 않고 보통의 선으로만
그리고 싶을 때 지정한다.
(예) <HR SIZE=5 WIDTH=50% ALIGN=CENTER NOSHADE> :
음영 없이 선의 굵기는5, 브라우저폭의 50%의 길이로 하고
가운데 정렬하는 선을 그으라는 지시자이다.
(실습 - html기본소스)
<html>
<head> <title>선 그리기</title> </head>
<body>
우선 보통의 괘선을 그려보면 <hr>
굵기를 좀더 굵게 지정해 보면
<hr size="8">
길이를 200픽셀로 지정하여 바꿔보면
<hr width="200">
길이를 70% 비율로 지정하여 바꿔보면
<hr width="70%">
수평선의 위치를 왼쪽으로 바꿔보면
<hr align="left" width="50%">
<hr align="left" width="30%" size="4">
<hr align="left" width="10%" size="6">
수평선의 위치를 오른쪽으로 바꿔보면
<hr align="right" width="10%">
<hr align="right" width="30%" size="6">
<hr align="right" width="50%" size="4">
입체감을 없애보면
<hr noshade>
</body>
</html>
hwaninea.net All rights reservd