달력

062018  이전 다음

  •  
  •  
  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
[홈페이지제작] HTML 태그 기초 7-HR 태그

웹 페이지 상에 단락과 단락을 구분하기 위해 HR 태그를 사용하곤 한다. <HR> 태그의 HR은 Horizontal Reference의 약자이다. 가장 간단히 <HR> 태그만 사용하면 다음과 같은 수평선이 생겨난다.

이제 이 수평선의 폭을 조정해 보도록 하자.


<HR WIDTH="60%">

폭을 줄이는 방법은 간단하다. HR태그의 WIDTH 속성에 적당한 값을 주면 된다. 만일 이 값을 위와 같이 % 단위로 주면 페이지 넓이의 상대적인 비율로 그 폭을 결정하게 된다.

자, 이번엔 이 수평선의 높이를 조정해 보도록 하자.







위 결과에 대한 소스 코드는 다음과 같다. 높이를 조정하기 위해서는 HR 태그의 SIZE 속성에 1 ~ 6 사이의 값을 넣어주면 된다.

<HR width="80%" SIZE=1>
<HR width="80%" SIZE=2>
<HR width="80%" SIZE=3>
<HR width="80%" SIZE=4>
<HR width="80%" SIZE=5>
<HR width="80%" SIZE=6>

이번엔 이 수평선에 정렬 속성을 부여한 결과를 보자.





위 결과에 대한 소스 코드는 다음과 같다. HR 태그에 ALIGN 속성에 left, right, center 중 하나의 값을 설정하면 된다.

<HR width="60%" ALIGN="LEFT">
<HR width="60%" ALIGN="RIGHT">
<HR width="60%" ALIGN="LEFT">
<HR width="60%" ALIGN="RIGHT">

이번엔 수평선에서 음영 속성을 제거해 보자. 결과는 다음과 같다.


위 결과에 대한 소스 코드는 다음과 같다. 미세한 차이이긴 하지만 자세히 보면 음영이 없다.

<HR width="60%" NOSHADE>

이번엔 이 수평선에 색상을 넣어 보자. 결과는 다음과 같다.




위 결과에 대한 소스 코드는 다음과 같다.

<HR width="60%" color="yellow">
<HR width="60%" color="purple">
<HR width="60%" color="green">

HR 태그를 적용할 수 있는 예는 다양하다. 한 예로 다음과 같이 바닥글에 저자 소개라든지, 각주 처리 등에 이 수평선을 이용해볼 수 있을 것이다.

HR 태그 사용 예1:


<저자>찰스 커넬(Charles Connell)은 CHC-3 컨설팅의 대표로 재직 중입니다. 또한 커넬은 보스턴 대학에서 컴퓨터 과학을 가르치고 있으며, 각 잡지와 언론에 컴퓨터 관련 기사를 제공하고 있습니다.

위 결과에 대한 소스 코드는 다음과 같다:

<HR width="50%" SIZE=1 color="#D03636" align="left">
<FONT color=#800000><b><저자></b></FONT><font color="gray">찰스 커넬(Charles Connell)은 CHC-3 컨설팅의 대표로 재직 중입니다. 또한 커넬은 보스턴 대학에서 컴퓨터 과학을 가르치고 있으며, 각 잡지와 언론에 컴퓨터 관련 기사를 제공하고 있습니다.</font>

HR 태그 사용 예2:


<저자>찰스 커넬(Charles Connell)은 CHC-3 컨설팅의 대표로 재직 중입니다. 또한 커넬은 보스턴 대학에서 컴퓨터 과학을 가르치고 있으며, 각 잡지와 언론에 컴퓨터 관련 기사를 제공하고 있습니다.

위 결과에 대한 소스 코드는 다음과 같다:

<HR width="40%" SIZE=4 color="GOLD" align="left">
<FONT color=#800000><b><저자></b></FONT><font color="gray">찰스 커넬(Charles Connell)은 CHC-3 컨설팅의 대표로 재직 중입니다. 또한 커넬은 보스턴 대학에서 컴퓨터 과학을 가르치고 있으며, 각 잡지와 언론에 컴퓨터 관련 기사를 제공하고 있습니다.</font>





쇼핑몰창업 홈페이지제작 홍보마케팅 창업정보
국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com/
Posted by 문땡글이

티스토리 툴바