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

 
Previous Post 어금니 충치 치통, 자일리톨 껌으로 치료, 어린이 충치 예방; Xylitol Chewing...Java/자바] main 의 반환값 return 메서드(함수), 탈출코드(에러 레벨) Ex...Java/자바] 나머지 값 계산 연산자, 기호 사용 법; Modulus Operator, ...C언어] 숫자 증가, 감소, for 문 사용법 예제 소스; Increase Decrease...Python/파이썬] 반올림 함수, 정수로, 소수점 특정 자리에서; Round To Int...Python/파이썬] 나머지 값 구하기 연산자 기호, 함수; Modulus Operator...Excel/엑셀] 음수의 제곱근 구하기 함수; Square Root of a Negativ...Java/자바] 음의 제곱근, 양의 제곱근 구하기; Principal or Negative...Perl/펄] 제곱근 함수, 루트 근사값 계산 방법, 음수의 제곱근 구하기; Root Ne...Java/자바] 제곱 함수,기호, 거듭제곱(세제곱,네제곱), 몇 승 구하기; Raise P...

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

Monday, March 05, 2007

<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

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

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