jQuery | javascript | CSS

05.HTML- <hr> 태그

Godffs 2009. 7. 21. 23:44
반응형
수평선(선)을 나타내는 태그 입니다.
문단과 문단 사이에 구분선을 표시 할 수 있는 태그 입니다.
<hr>태그는 <br>태그와 같이 단독으로 사용됩니다. 차이점이라면
<br>태그는 속성이 없고 <hr>태그는 속성이 있습니다.
그리고
<hr>태그 속성에는 중첩 사용이 가능합니다.
 <hr>태그에 사용되는 속성
a.color(색깔) , b.width(길이) , c.size(수평선의 두깨) , d.noshade(그림자)

a.color 속성 사용 소스로 두가지 방법으로 색깔을 선택 할 수 있습니다.
<hr color="red" /> , <hr color=#FF0000 />

b.width는 수평선의 길이를 정해주는 속성으로
길이는 픽셀 단위로 사용 됩니다.
<hr width="100" /> 또는 <hr width="50%" /> 로 쓸 수 있습니다. ( 100->50% )

c.size 수평선의 두깨를 나타냅니다.
<hr size="3" />

d.noshade는 그림자표시(음영)를 없애는 속성입니다.
<hr noshade />
<hr>태그에 사용되는 속성 결과 화면 입니다.
 

그림5-1

 <html xmlns="http://www.w3.org/1999/xhtml" />
<head>
    <title> hr태그 </title>
<body>
    <div>
 a.색상 <br />
 <hr color="red" />
 <hr color="#ff0000" />
 b.길이 <br />
  <hr width="100" />
 <hr width="50%" />
 c.크기 <br />
 <hr size="3" />
 d.그림자표시(음영)<br />
 <hr noshade />
    </div>
</body>
</head>
</html> 

밑에 그림 5-2는 다중 속성으로 작성했습니다.
 

그림5-2

 <html xmlns="http://www.w3.org/1999/xhtml" />
<head>
  <title> hr태그 </title>
<body>
 <div>
   a. 색상 빨간색, 길이50px, 음영사용안함, 가늘게 표시
   <hr color="red" width="50" noshade size="1"/>
   b. 색상 파랑색, 길이50px, 음영사용안함, 두껍게 표시
   <hr color="blue" width="50" noshade size="10" />
   c. 기본 hr 태그
   <hr size="10" />
 </div>
</body>
</head>
</html> 

반응형