*스타일 시트(CSS)
HTML문서에서 자주 사용되는 문자의글꼴,색상등의 자주 사용하는
스타일형식을 만들어 놓고 사용하는것
*스타일 시트의 장점
1) 소스를 수정하거나 관리가 쉽다
2) 소스가 간결하여 문서를 읽어 들이는 속도가 빠르다
*문자 관련 스타일 시트 속성
| 속성 | 설명 |
| font-family | 글자 종류를 지정한다 글꼴이름 예) {font-family:굴림} |
| font-size | 글자 크기를 지정한다 문자크기,단위 예) {font-size:12pt} |
| font-style | 글자 모양을 지정한다 normal(보통모양),ltalic(기울림) 예) {font-style:ltalic} |
| font-variant | 영문대문자로 변환을 지정한다 normal,small-caps 예) {font-variant:small-caps} |
| font-weight | 글자의 굵기를 지정한다 normal,bold,bolder,lighter 예) {font-weight:bold} |
| letter-spacing | 글자의 간격을 지정한다 예) {letter-spacing:20pt} |
| line-height | 줄 사이의 간격을 지정한다 예) {line-height:15pt} |
| text-align | 텍스트의 정렬을 지정한다 left,right,center, 예) {text-align:center} |
| text-indent | 단락의 들여쓰기를 지정한다 예) {text-indent:20} |
| text-decoration | 텍스트의 링크줄을 지정한다 none,underline,overline,link(깜박임) 예) {text-decoration:none} |
| text-transform | 영문자의 대소문자를 지정한다 none,capitalize(첫대문자),uppercase(대문자),lowercase(소문자) 예) {text-transform:apitalize} |
*내부 스타일시트 만들기
<style type="text/css">
<!--
태그{속성;속성}
-->
</style>
<HTML>
<HEAD>
<TITLE> 내부 스타일 시트</TITLE>
<STYLE type="text/css">
<!--
H1{font-size:20pt; color:green}
H2{font-size:30pt; color:red}
-->
</STYLE>
</HEAD>
<BODY topmargin="50">
<H1>아치의 넋두리</H1>
<H2>아치닷컴</H2>
<H1>아치의 넋두리</H1>
<H2>아치닷컴</H2>
</BODY>
</HTML>
[결과]
아치닷컴
아치의 넋두리
아치닷컴
*태그에 직접 스타일시트 넣기
<태그 style="속성:값">
<HTML>
<HEAD>
<TITLE> 인라인 방식</TITLE>
</HEAD>
<BODY topmargin="50">
<FONT style="background:yellow">아치의 넋두리</FONT><BR>
<FONT style="font-size:15pt; color:green">아치닷컴</FONT><BR>
<FONT style="font-family:궁서">아치의 넋두리</FONT><BR>
<FONT style="font-weight:bold">아치닷컴</FONT><BR>
</BODY>
</HTML>
[결과]
아치닷컴
아치의 넋두리
아치닷컴
*외부 스타일시트 넣기
<link rel="stylesheet" type="text/css" href="스타일시트 파일명">
p {font-size:15pt; font-weight:bold}
이렇게 css파일을 만들어 계정에 등록한후 링크를 걸어서 사용한다.
<HTML>
<HEAD>
<TITLE> 링크 방식</TITLE>
<link rel="stylesheet" type="text/css" href="http://achizzang.tistory.com/ex_01.css">
</HEAD>
<BODY topmargin="50">
<H2>아치의 넋두리</H2>
<P>아치닷컴</P>
<H2>아치의 넋두리</H2>
<p>아치닷컴</P>
</BODY>
</HTML>
[결과]
아치닷컴
아치의 넋두리
아치닷컴
*링크스타일 속성
| 속성 | 설명 |
| a:link | 보통 상태의 텍스트 메뉴(파랑색) |
| a:visited | 한번이라도 방문한적있는 텍스트 (보라색) |
| a:active | 방문중인 텍스트메뉴 (빨강색) |
| a:hover | 마우스르 올렸을때 텍스트 메뉴 (색상지정) |
*스크롤바를 구성하는 7가지요소
형식 설명
scrollbar-face-color 스크롤바 전체색상
scrollbar-arrow-color 스크롤바 위,아래에 있는 화살표색
scrollbar-track-color 스크롤바 움직이는 통로의 색
scrollbar-highlight-color 스크롤바 왼쪽과 위쪽의 색
scrollbar-3dlight-color 왼쪽과 위쪽 바깥부분의 색
scrollbar-shadow-color 오른쪽과 아래쪽 색
scrollbar-darkshadow-color 오른쪽과 아래쪽 바깥부분의 색
예)
<style type="text/css">
body{
scrollbar-face-color:#ffffff
scrollbar-3dlight-color:#ffffff
scrollbar-track-color:#ffffff
scrollbar-arrow-color:#cc2233
scrollbar-highlight-color:#cc2233
scrollbar-shadow-color:#cc2233
scrollbar-darkshadow-color:#cc2233}
</style>
'computer' 카테고리의 다른 글
| HTML 태그 - 7 (0) | 2009.10.11 |
|---|---|
| HTML 태그 - 6 (0) | 2009.10.11 |
| HTML 태그 - 4 (0) | 2009.10.08 |
| HTML 태그 - 3 (0) | 2009.10.08 |
| HTML 태그 - 2 (0) | 2009.10.07 |
