스타일 시트(style sheet)란 HTML 문서내에 서체의 종류, 크기, 색, 여백 등을 지정해 주어,
사용자의 web browser환경에 상관없이 일정한 화면을 보여주는 기능을 말합니다.
스타일 시트는 MS internet explorer 3.0이상,
Netscape 4.0 이상의 web browser에서 지원됩니다.
|
|
| 스타일 시트를 HTML 문서내에 삽입하는 방법 |
|
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=euc-kr">
<TITLE>Style Sheet 사용법</TITLE>
<STYLE type="text/css">
<!--
BODY {font:10pt 돋움,돋움체; margin-left:20pt; margin-right:20pt}
TD {font:10pt 돋움,돋움체; line-height:13pt}
TD.b {font:10pt 돋움,돋움체; color:#ff889e; line-height:13pt}
H1 {font:18pt 돋움,돋움체}
H2 {font:16pt 돋움,돋움체}
H3 {font:13pt 돋움,돋움체}
A:link {font:10pt 돋움,돋움체; color:#89A5F1; text-decoration:none}
A:visited {font:10pt 돋움,돋움체; color:#89A5F1; text-decoration:none}
-->
</STYLE>
</HEAD>
<BODY bgcolor="#ffffff">
............
............
</BODY>
</HTML>
|
|
|
| 스타일 시트 화일을 HTML 문서와 연결하는 방법 |
|
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=euc-kr">
<TITLE>Style Sheet 사용법</TITLE>
<link rel="stylesheet" type="text/css" href="mycss.css">
</HEAD>
<BODY bgcolor="#ffffff">
............
............
</BODY>
</HTML>
|
|
|
| font-family |
|
| 값 |
fonts 폴더에 있는 폰트 이름 |
| 설명 |
화면에 나타나는 글씨의 종류를 설정할 때 쓰인다. 시스템에 있는 폰트 이름 중 하나를 사용하면 된다. |
| 예제 |
P {font-family: Courier New} |
| 기타 |
만일 윈도우 시스템에 굴림체가 없다면 Arial로 대체하라는 의미로 다음과 같이 사용할 수도 있다. 참고로, 이것은 제작자의 시스템에는 해당 폰트가 있으나, 다른 사람들의 컴퓨터에는 폰트가 없을 때 아주 유용하게 쓰인다.
P {font-family: 굴림, Arial} |
|
|
| font-style |
|
| 값 |
normal, italic, oblique |
| 설명 |
화면에 나타나는 글씨의 모양을 설정한다. |
| 예제 |
H1 {font-style: italic} |
|
|
| font-weight |
|
| 값 |
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 |
| 설명 |
글씨의 굵기를 설정한다. 일반적인 폰트는 normal 또는 bold만을 지원한다고 생각하면 된다. |
| 예제 |
H2 {font-weight: bold} |
|
|
| font-size |
|
| 값 |
절대값: 포인트(pt), 센티미터(cm), 픽셀(px), 인치(in)
상대값: larger, smaller, 퍼센트값 등 |
| 설명 |
글씨의 크기를 설정한다. |
| 예제 |
H3 {font-size: 9pt} |
|
|
| color |
|
| 값 |
색깔 이름, RGB값 |
| 설명 |
글씨의 색깔을 설정한다. RGB값을 그대로 사용할 수도 있고, 십진수로도 사용할 수 있다. 또는 색깔의 고유 이름으로도 사용할 수 있다. |
| 예제 |
EM {color: red}
EM {color: rgb(256,0,0)} |
|
|
| background |
|
| 값 |
transparent, 색깔 이름, URL, RGB값 등 |
| 설명 |
백그라운드 색깔 또는 백그라운드 이미지를 설정한다. |
| 예제 |
P {background: transparent}
BODY {background: red}
BODY {background: url(pcline.gif)} |
|
|
| word-spacing |
|
| 값 |
normal, 길이 |
| 설명 |
단어와 단어 사이의 공간을 설정한다. |
| 예제 |
H1 {word-spacing: 0.4cm} |
|
|
| letter-spacing |
|
| 값 |
normal, 길이 |
| 설명 |
글자와 글자 사이의 공간을 설정한다. |
| 예제 |
H1 {letter-spacing: 0.4cm} |
|
|
| text-decoration |
|
| 값 |
none, underline, overline, line-through, blink |
| 설명 |
글자 또는 문자열의 속성을 설정한다. |
| 예제 |
A:link {text-decoration: none} |
|
|
| text-indent |
|
| 값 |
길이, 퍼센트값 |
| 설명 |
들여쓰기를 설정한다. |
| 예제 |
P {text-indent: 3cm} |
|
|
| line-height |
|
| 값 |
숫자, 길이, 퍼센트값 |
| 설명 |
행간을 설정한다. |
| 예제 |
DIV {line-height: 1.2cm} |
|
|
| margin-top, margin-right, margin-bottom, margin-left, margin |
|
| 값 |
길이, 퍼센트값, auto |
| 설명 |
해당하는 내용의 위, 오른쪽, 아래쪽, 왼쪽 등의 여백을 설정한다. |
| 예제 |
BODY {margin-left: 3cm} |
| 기타 |
여백 속성을 상하좌우로 설정해 줄 수도 있지만, 위의 예제처럼 margin이라는 하나의 이름으로 묶어서 설정할 수 있다.
이때 속성값은 네개를 가지는데, 순서는 top, right, bottom, left의 순서이다. 만일 속성값이 하나라면 상하좌우를 모두 해당 값으로 설정하고,
속성값이 두개라면 첫번째 값은 top과 bottom, 두번째 값은 right와 left의 값이 된다.
BODY {margin: 1cm 2cm 3cm 4cm} |
|
|
| padding-top, padding-right, padding-bottom, padding-left, padding |
|
| 값 |
길이, 퍼센트값, auto |
| 설명 |
텍스트나 이미지 등에 있어서 테두리(border)와 내용간의 빈 공간을 설정한다. |
| 예제 |
H1 {padding-left: 1cm} |
| 기타 |
margin과 마찬가지로 padding이라는 하나의 이름으로 속성을 묶어서 사용할 수 있다.
H1 {padding-left: 1cm} |
|
|
| border-top, border-right, border-bottom, border-left, border |
|
| 값 |
thin, medium, thick, 길이값, none, dotted, dashed, solid, double, groove, ridge, inset, outset |
| 설명 |
테두리(border)값을 설정한다. |
| 예제 |
P {border: solid} |
| 기타 |
margin과 마찬가지로 padding이라는 하나의 이름으로 속성을 묶어서 사용할 수 있다. |
|
|
