웹 페이지 상에 단락과 단락을 구분하기 위해 HR 태그를 사용하곤 한다. <HR> 태그의 HR은 Horizontal Reference의 약자이다. 가장 간단히 <HR> 태그만 사용하면 다음과 같은 수평선이 생겨난다.
이제 이 수평선의 폭을 조정해 보도록 하자.
폭을 줄이는 방법은 간단하다. HR태그의 WIDTH 속성에 적당한 값을 주면 된다. 만일 이 값을 위와 같이 % 단위로 주면 페이지 넓이의 상대적인 비율로 그 폭을 결정하게 된다.
자, 이번엔 이 수평선의 높이를 조정해 보도록 하자.
위 결과에 대한 소스 코드는 다음과 같다. 높이를 조정하기 위해서는 HR 태그의 SIZE 속성에 1 ~ 6 사이의 값을 넣어주면 된다.
|
<HR width="80%" SIZE=1> |
이번엔 이 수평선에 정렬 속성을 부여한 결과를 보자.
위 결과에 대한 소스 코드는 다음과 같다. HR 태그에 ALIGN 속성에 left, right, center 중 하나의 값을 설정하면 된다.
|
<HR width="60%" ALIGN="LEFT"> |
이번엔 수평선에서 음영 속성을 제거해 보자. 결과는 다음과 같다.
위 결과에 대한 소스 코드는 다음과 같다. 미세한 차이이긴 하지만 자세히 보면 음영이 없다.
|
<HR width="60%" NOSHADE> |
이번엔 이 수평선에 색상을 넣어 보자. 결과는 다음과 같다.
위 결과에 대한 소스 코드는 다음과 같다.
|
<HR width="60%" color="yellow"> |
HR 태그를 적용할 수 있는 예는 다양하다. 한 예로 다음과 같이 바닥글에 저자 소개라든지, 각주 처리 등에 이 수평선을 이용해볼 수 있을 것이다.
HR 태그 사용 예1:
<저자>찰스 커넬(Charles Connell)은 CHC-3 컨설팅의 대표로 재직 중입니다. 또한 커넬은 보스턴 대학에서 컴퓨터 과학을 가르치고 있으며, 각 잡지와 언론에 컴퓨터 관련 기사를 제공하고 있습니다.
위 결과에 대한 소스 코드는 다음과 같다:
|
<HR width="50%" SIZE=1 color="#D03636" align="left"> |
HR 태그 사용 예2:
<저자>찰스 커넬(Charles Connell)은 CHC-3 컨설팅의 대표로 재직 중입니다. 또한 커넬은 보스턴 대학에서 컴퓨터 과학을 가르치고 있으며, 각 잡지와 언론에 컴퓨터 관련 기사를 제공하고 있습니다.
위 결과에 대한 소스 코드는 다음과 같다:
|
<HR width="40%" SIZE=4 color="GOLD" align="left"> |
쇼핑몰창업 홈페이지제작 홍보마케팅 창업정보
국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com/
'쇼핑몰제작 정보' 카테고리의 다른 글
| [홈페이지제작] 아이템을 한 라인에 표시하는 방법 <li 태그> (0) | 2008.05.26 |
|---|---|
| [홈페이지제작] HTML 태그 기초8- IMG 태그 (0) | 2008.05.26 |
| [홈페이지제작] HTML 태그 기초7-HR 태그 (1) | 2008.05.21 |
| [홈페이지제작] 이미지와 관련하여 로딩 속도를 올리는 방법 (0) | 2008.05.21 |
| [홈페이지제작] HTML 태그 기초6- 링크 요소 (0) | 2008.05.20 |
| [홈페이지제작] HTML 태그 기초5-2- 표(TABLE) 요소 (0) | 2008.05.19 |