[HTML 기초 강좌] 4. hr 태그 ( 구분선, 수평선 )

1. hr 태그

hr 태그는 화면에 가로로 선(구분선, 수평선) 을 긋는 태그입니다.

단락의 구분을 할 때 가장 많이 사용하게 됩니다.

그 외에도 문자의 밑줄을 넣을 때도 사용 가능하며 때때로 세로로 선을 넣을 수 도 있습니다.

줄바꿈 효과도 있어 br 태그나 p 태그와 같이 사용할 필요가 없으며 br 태그나 p 태그와 마찬가지로 단독으로 사용합니다.

 

 

hr 태그의 속성은 다음과 같습니다.

size : 태그의 굵기를 설정한다.

width : 태그의 가로 길이를 설정한다.

align : 태그의 정렬값을 설정한다. left, center, right

color : 태그의 색상을 설정한다.

noshade : 입체감을 없애고 평평한? 상태로 보여준다.

 

 

다음과 같이 코딩합니다.

ex) hr태그.html

 

 

 

출력 결과물은 다음과 같습니다.

 

문제 1

다음과 같은 출력 결과물을 얻기 위해서는 어떻게 코딩해야 할까요 ?

hint : center tag, br tag, font tag, hr tag

여러 방법이 있겠지만 위 태그를 적극 사용하여 작성해 봅니다.

가운대 정렬을 할 태그가 필요하고 줄바꿈 태그도 필요하겠네요.

그리고 글자의 색상을 줄 태그도 필요하고 세로로 선을 그을 수 있는 태그도 필요해 보입니다.

 

 

 

 

문제 2

다음과 같은 출력 결과물을 얻기 위해서는 어떻게 코딩해야 할까요 ?

 

hr 태그만을 사용하여 작성해 봅니다.

hr 태그만 이용해도 위와 같은 모양을 만들 수 있습니다.

size와 width 속성을 잘 활용하면 충분히 그려낼 수 있습니다.