Monday, March 05, 2007
HTML-CSS] 수평선 긋기 태그, 수평 라인(가로 줄) 표현; Horizontal Line Tag
<hr /> 이라는 HTML 태그로 웹페이지에 수평선을 그을 수 있습니다. 닫는 태그는 없고, <hr /> 이것 하나만 있으면 가로줄이 만들어집니다.
그런데 이 hr 태그는 입체적으로 굵게 나오는 것이 기본값이라서 그리 세련되지 않습니다. 따라서 hr 태그에 CSS 스타일을 적용하여, 가늘고 선명하게 만들어 주면 보기에 좋습니다. 다음 예제와 같이 스타일을 선언하면, 페이지의 모든 hr 태그에 일괄적으로 스타일이 적용됩니다.
파일명: example.html
hr 태그로 만든 가로줄은 자세히 보면, 1줄이 아닌 2줄의 수평선으로 구성되어 있기에,
* border-top
* border-bottom
이렇게 위쪽 가로 선과 아래쪽 가로 선에, 각각 스타일을 적용해야 합니다.
▶▶ HTML-CSS] 수직선 태그, 세로 줄 긋기, 다단 편집; Vertical Line Tag
그런데 이 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>
<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
<< Home