[HTML] hr 태그

HTML hr 태그에 대해서 알아보기로 합니다.

뭐, 간단히 말하면 그냥 웹 페이지에 선을 긋는 것으로 표시되는 건데요.

기본적으로는 아래와 같이 사용합니다.

 

<hr>

 

너무 간단해서 실망하신 건 아니시겠죠? 하하..

hr 태그는 아래와 같은 속성들을 갖기도 합니다.

 

size / width / color / align / style / noshade

 

속성은 단독으로 사용되기도 하지만 중복 사용도 가능합니다.

 

<hr size="5"> //선 굵기가 5px이 됨.

<hr width="300"> //기본적으로 폭은 100%로 표현. 여기서는 300px로 설정. 화면 가운데로 정렬됨.

<hr color="blue"> //선 색깔이 blue 색상으로 바뀜. 기본값은 gray 색상.

<hr aling="left" width="400"> // 가운데로 정렬된 선을 왼쪽으로 정렬함.

<hr size="10" width="300" color="red" align="right" noshade>

 

noshade 속성은 그림자를 제거하는 것인데요.

HTML5에서는 지원하지 않는 속성이라고 하네요.

그래서, CSS로 대신 구현해야 하는데요.

크로스 브라우저를 고려해 다음과 같이 하시면 됩니다.

 

<hr style="height:2px; border-width:0; color:gray; background-color:gray">

 

음... 그런데, size, width 속성이랑 스타일 height, width 사이에 뭐가 다른지 모르겠네요.

일단 구현해보면 눈으로 보이는 결과물은 똑같아 보이는데 말이죠.