mwultong Blog ... 프로그래밍 / 계산기

컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Monday, March 05, 2007

HTML-CSS] 수평선 긋기 태그, 수평 라인(가로 줄) 표현; Horizontal Line Tag


<hr /> 이라는 HTML 태그로 웹페이지에 수평선을 그을 수 있습니다. 닫는 태그는 없고, <hr /> 이것 하나만 있으면 가로줄이 만들어집니다.

그런데 이 hr 태그는 입체적으로 굵게 나오는 것이 기본값이라서 그리 세련되지 않습니다. 따라서 hr 태그에 CSS 스타일을 적용하여, 가늘고 선명하게 만들어 주면 보기에 좋습니다. 다음 예제와 같이 스타일을 선언하면, 페이지의 모든 hr 태그에 일괄적으로 스타일이 적용됩니다.

수평선에 스타일 적용하여 가늘게 만들기 예제


파일명: example.html
<html>
<head>
<style type="text/css">

hr { border-top:1px solid #9C9C9C; border-bottom:1px solid #F6F6F6; }

</style>
</head>


<body>

이런 저런 내용들... 이런 저런 내용들...이런 저런 내용들...

<hr />

이런 저런 내용들...이런 저런 내용들...이런 저런 내용들...

</body>
</html>


hr 태그로 만든 가로줄은 자세히 보면, 1줄이 아닌 2줄의 수평선으로 구성되어 있기에,

* border-top
* border-bottom

이렇게 위쪽 가로 선과 아래쪽 가로 선에, 각각 스타일을 적용해야 합니다.



▶▶ HTML-CSS] 수직선 태그, 세로 줄 긋기, 다단 편집; Vertical Line Tag




tag: html
HTML | CSS | 자바스크립트 JavaScript

0 Comments:

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top