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 속성을 잘 활용하면 충분히 그려낼 수 있습니다.

 

 

by 개발자 CofS 2016.01.18 11:58
  • hr태그 2017.02.06 22:05 신고 ADDR EDIT/DEL REPLY

    문제 1에 hr태그를 <hr color="red" width="0.1%" size="100px"> 이렇게 속성 값을 줬는데요 저렇게 얇게는 안나옵니다 ㅠㅠ 픽셀 단위는 정수만 입력 가능한 것 같은데 맞나요??

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2017.02.07 14:49 신고 EDIT/DEL

      width 에 % 가 아닌 px 로 주셔야 하지요
      픽셀단위라고 말씀하시고 % 단위를 입력하시니 굵기가 창크기와 비례하게 됩니다.

  • 굵기 2017.09.02 22:12 신고 ADDR EDIT/DEL REPLY

    <hr width="1px" size="130px" color="red">
    이렇게 해도 저렇게 가늘게 나오지 않습니다 ㅠㅠ
    어떻게 하는 건가요?

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2017.09.04 16:27 신고 EDIT/DEL

      ie11, 크롬, 웨일 등등 다른 브라우저에 다 테스트 해봤는데 잘 되네요 ㅎㅎ
      어떤 현상인지 볼 수 있나요 ?