목록

Style Sheet 스타일시트1. 폰트 관련 속성

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이라는 하나의 이름으로 속성을 묶어서 사용할 수 있다.
CSS . HTML4.0

이 게시물을