티스토리 뷰

Technical/VMware Windows Linux OS

HTML <HR>태그, 수평 가로 구분선 넣기

귀하신분 2013. 2. 15. 14:22

블로그를 운영하다 보면 HTML 태그를 많이 만지게 되고, 그로 인해 기본적인 html 소스 코드 정도는 무난히 분석이 되시죠? ^^;

저 또한 티스토리 블로그를 만지작 거리다보면 이런 저런 새로운 html 소스 코드를 만지게 되었고 어느정도의 기본적인 코드는 생성할 줄 알게 되었습니다.

오늘은 html 중 기본적인 가로선, 수평 구분선을 넣는 방법에 대해 간단히 설명해 드리도록 하겠습니다.

수평 구분을을 그리기 위해서는 <hr> 코드를 이용하게 되는데요, 기본적인 <hr> 코드의 쓰임과 그 옵션에 대해 잠시 설명해 드리도록 하겠습니다.

우선 <hr> 코드만 사용한 화면을 확인해 보시기 바랍니다.

<html>

<head></head>

<body><hr></body>

</html>

위 코드는 html의 기본이 되는 구성에서 단지 <hr> 하나만 넣어둔 코드입니다.

xhtml에서는 <hr />로 적절히 끝을 알려줘야 합니다.

이 코드로 생성된 웹페이지는 아래 화면과 같이 나타나게 됩니다.



html hrhr 만을 사용한 페이지

간단하게 <hr> 한줄로 수평선이 그려지게 되었죠?

자 여기서 <hr> 의 여러가지 옵션에 대해 잠시 알아보도록 하겠는데요, 기본적인 옵션(엘리먼트)는 size/align/color/width/style/noshade 등 이 되겠습니다.

한방에 보여드리기 위해 위 코드에 하나씩 추가하여 아래와 같은 코드를 만들어 보았습니다.

<html>

<head></head>

<body>

기본 수평선

<hr>

<p>

사이즈가5인 수평선

<hr size="5">

<p>

가로 픽셀 길이가 150인 수평선

<hr width="150">

<p>

가로 길이가 페이지의 100%가 아닌 70%만 차지하게 하는 수평선

<hr width="50%">

<p>

가로 픽셀 길이가 100인 좌측으로 정렬된 수평선

<hr width="100" align="left">

<p>

빨간색의 수평선

<hr color="red">

<p>

파랑색의 굵기 5의 두꺼운 수평선

<hr color="blue" size="5">

<p>

선의 입체감을 제거한 평면 느낌의 수평선

<hr size="5" noshade>

<p>

마지막으로 그림자로 입체감을 살린 수평선 (원하시는 direction과 색상을 선택하시면 되겠음)

<hr style="color: black; filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#0fa400,strength=3)">

<p>

</body>

</html>

이 코드를 익스플로러나 다른 웹브라우저에서 실행시키게 되면 아래와 같은 화면을 만날 수 있겠습니다.

<hr>hr 여러가지 옵션(엘리먼트) 적용 페이지

아주 간단하게 수평선을 그리고 자신의 홈페이지에 맞는 스타일로 수정하여 사용할 수 있겠죠?^^

블로거님들, 특히 티스토리 블로거님들에게 도움이 되셨으면 합니다.

-----

방문 감사합니다 (__)

저작자표시

'Technical > VMware Windows Linux OS' 카테고리의 다른 글

엑셀 하이퍼링크 삭제 및 제거 초간단 방법  (0) 2013.02.27
사진 용량 줄이기 - 알씨를 이용한 방법  (0) 2013.02.26
오토캐드 뷰어 최신버전 다운로드 및 설치, 사용 방법  (8) 2013.02.22
MS오피스 단축키 보기 기능 (전 제품 동일)  (12) 2013.02.19
엑셀, 드롭다운 메뉴 생성 및 수정 방법  (6) 2013.02.07
엑셀, 읽기 및 쓰기 암호 걸기  (12) 2013.02.01
MS 아웃룩, 규칙을 만들어 보자  (0) 2012.12.24
구글 번역기, 전세계 언어를 번역 가능한 구글 번역기  (0) 2012.12.18

댓글