스타일 시트 총정리

속성

의미

Font 속성

Font-size

글자의 크기

Font-family

글꼴의 종류

Font-weight

글자의 두께 - normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Font-style

글자의 모양 - normal | italic | oblique

color

글자의 색상

(예) .body1 { font-family: "굴림"; font-size: 9pt; font-style: normal; font-weight: bold; color: #9900CC }

Text 속성

Text-decoration

글자를 꾸며주는 방법
- none | [ underline || overline || line-through || blink ]

Block 속성

Text-align

문자열의 수평 정렬 방식 - left | right | center | justify

Line-height

문자열의 줄간격 - normal | 숫자 | 길이 | 퍼센트

(예) .body2 { line-height: 130%; text-decoration: underline; text-align: left}

Background 속성

Background-color

배경색상 - 색이름 | 16진수값 | transparent

Background-image

배경이미지의 URL

Background-repeat

배경이미지가 타일링 되는 방식 - repeat | repeat-x | repeat-y | no-repeat

Background-position

배경이미지가 시작되는 위치 - [퍼센트 | 길이 ]{1,2} | [top | center | bottom] || [left | center | right]

(예) .body3 { background-color: #FFFFFF; background-image: url(img/bg1.gif); background-repeat: no-repeat; background-position: 0px 0px}

Position 속성

Width, Height

블록의 가로, 세로 길이

Left, Top

블록의 화면에서의 좌표

Position

블록이 화면에 배치되는 위치. 값이 "absolute"면 브라우저 화면, 또는 부모 요소를 기준으로 배치되고, 값이 "relative"면 상대적 배열이 적용된다. - absolute | relative | static

Visibility

요소를 화면에 보일것인가의 여부 - inherit | visible | hidden

Z-index

요소가 상하로 쌓이는 순서

(예) .body4 { position: absolute; visibility: visible; z-index: 10; height: 200px; width: 300px; left: 0px; top: 0px;}