글꼴 관련

1. font-family:글꼴이름

    지정한 옵션에 포함된 글꼴로 지정한 부분의 글자 모양이 바뀝니다. Html에서의 <font>에서 face 옵션과 비슷한 거지요..

2. font-style:스타일 종류

   지정한 글꼴 스타일로 지정한 부분의 글자모양이 바뀝니다.

normal : 보통문자
italic : 이탤릭 문자    
oblique : 이탤릭 문자체
 3. font-variant:글자 속성

    지정한 글자 속성으로 지정한 부분의 글자모양이 지정된다.

normal : 보통문자
small-caps : 소문자를 대문자로 변경하여 표시
4. text-decoration:표시 속성

    지정한 표시 속성으로 글자 모양이 지정된다.

none : 아무런 속성도 지정하지 않는다.
underline : 밑줄이 그려진다.
overline : 글자위에 줄이 그려진다.
5. font-weight:글자두께 예약어/글자 두께

   지정한 글자 두께로 글자 모양이 지정된다.

   1) 글자두께 예약어

normal : 일반적인 글자 두께로 표시된다.
bold : 두꺼운 글자로 표시된다.
bolder : 가장 두꺼운 글자로 표시된다.
lighter : 가장 얇은 글자로 표시된다.
   2) 글자 두께

       지정하고자 하는 두께를 지정하는 것으로 100에서 900사이의 수치를 100단위로 지정한다.

6. font-size:글자크기 예약어/현재크기의 비율/상대크기/포인터

    지정한 글자 크기로 글자 모양이 지정된다.

    1) 글자크기 예약어

xx-small : 가장 작은 글자 크기로 출력된다.
x-small : small보다 150% 작은 글자 크기로 출력된다.
small : 보통 글자보다 150% 작은 글자로 출력된다.
midium : 보통 글자 크기로 출력된다.
large : 보통 글자보다 150% 큰 글자로 출력된다.
x-large : large보다 150% 큰 글자로 출력된다.
xx-large : 가장 큰 글자 크기로 출력된다.
    2) 현재 크기의 비율

        현재 크기(원래의 크기)에 대한 백분율로 지정한다.

    3) 상대 크기

smaller : 현재크기보다 150% 작은 글자로 출력된다.
larger : 현재크기보다 150% 큰 글자로 출력된다.
    4) 포인터

        지정하고자 하는 크기를 포인터 방식으로 지정한다.

색상 관련

1. color:색상코드/RGB코드

    지정한 색상으로 글자가 출력된다.

2. background-color:색상코드/RGB코드

    지정한 색상으로 바탕 색상이 지정된다.

3. background-image:url(그림파일이름)

    지정한 파일의 그림이 배경화면으로 출력된다.

4. background-repeat:반복방식

    지정한 방식으로 배경화면에 그림을 반복 출력한다.

repeat : 그림을 수평과 수직 방향으로 반복한다.
repeat x : 그림을 수평방향으로 반복한다.
repeat y : 그림을 수직방향으로 반복한다.
no-repeat : 그림을 반복하지 않는다.

5. background-attachment:스크롤 형태

    배경화면이 스크롤 될 때 지정한 형태로 행동한다.

    1) 스크롤 형태

scroll : 화면이 스크롤 되면 배경그림도 같이 스크롤 된다.
fixed : 화면이 스크롤 되어도 배경그림은 그대로 고정된다.
 
문단 관련

1. letter-spacing:크기

    지정한 크기만큼 글자와 글자사이의 간격을 지정한다.

2. line-height:크기/비율

    지정한 크기만큼 줄과 줄사이의 간격을 지정한다.

    1) 크기 : 줄과 줄 사이의 간격을 지정하는 길이로 픽셀단위로 입력한다.

    2) 비율 : 줄과 줄 사이의 간격을 지정하는 길이로 현재 글자크기의 비율로 입력한다.

3. margin-left, margin-right, margin-top, margin-bottom:비율

    지정한 만큼 화면 너비에 대한 비율로 왼쪽, 오른쪽, 위쪽, 아래쪽 여백을 지정한다.

4. text-align:정렬방식

    지정한 정렬 방식으로 문단이 정렬된다.

    1) 정렬방식

left : 왼쪽 정렬
right : 오른쪽 정렬
center : 가운데 정렬
justify : 양쪽 정렬

5. text-indent:길이/비율

    지정한 길이나 비율만큼 들여쓰기를 해준다.

6. text-transform:표시방식

    지정한 표시방식으로 영문내용을 표시해준다.

    1) 표시방식

capitalize : 각 단어의 첫 번째 문자를 대문자로 출력한다. 원래 대문자로 입력된 것은 그대로 출력.
uppercase : 모두 대문자로 변경하여 출력한다.
lowercase : 모두 소문자로 변경하여 출력한다.
none : 입력한 그대로 출력한다.

display의 속성에 대하여...

1. none는 뿌려주지 않는 것.

2. block와 inline는 뿌려주는 것.

3. block와 inline의 차이는 같은 줄에 뿌려주느냐, 아니면 다른줄에 뿌려주느냐의 차이.

4. div와 span의 차이와 같다고 생각하면 된다.

디폴트는 inline.

테이블 관련

1. border-left-width, border-right-width, border-top-width, border-bottom-width:두께 지정 예약어/크기

   지정한 예약어나 크기로 경계선의 굵기를 지정한다.

    1) 두께 지정 예약어

thin : 가장 얇은 테두리선으로 그린다.
medium : 보통 테두리선으로 그린다.
thick : 가장 두꺼운 테두리선으로 그린다.
    2) 크기 : 경계선의 두께를 지정하는 것으로 픽셀단위로 지정한다.

2. border-color:색상코드/RGB코드

    지정한 색상으로 테이블의 테두리를 보여준다.

3. border-style:경계선표시 예약어

    지정한 예약어의 모양으로 테이블의 테두리를 표시해준다.

    1) 경계선 표시 예약어

none : 일반적인 테두리선
dotted : 점선으로 테두리를 그려준다.
dashed : 쇄선으로 테두리를 그려준다.
solid : 직선으로 테두리를 그려준다.(none과 비슷)
double : 두줄로 테두리를 그려준다.
groove : 들어가는 모양의 3차원선으로 그려준다.
ridge : 나오는 모양의 3차원선으로 그려준다.
inset : 위쪽으로 음영을 주는 3차원선으로 그려준다.
outset : 아래쪽으로 음영을 주는 3차원선으로 그려준다.
4. padding-left, padding-right, padding-top, padding-bottom:크기/비율

    지정한 크기나 비율만큼 테이블의 테두리와 실제 내용의 간격을 지정해준다.

목록, 커서모양 관련

1. list-style-type:모양 지정 예약어

    지정한 예약어로 목록의 부호를 만들어 준다.

    1) 모양 지정 예약어

none : 부호를 표시하지 않는다.
disc : 속이 칠해진 동그라미로 표시한다.
circle : 속이 칠해지지 않는 동그라미로 표시한다.
square : 속이 칠해진 사각형으로 표시한다.
decimal : 아라비아 숫자로 표시한다.
lower-roman : 소문자 로마자로 표시한다.
upper-roman : 대문자 로마자로 표시한다.
lower-alpha : 소문자 알파벳으로 표시한다.
upper-alpha : 대문자 알파벳으로 표시한다.
2. list-style-image:url(그림파일이름)

    지정한 그림을 목록의 부호로 만들어 준다.

3. cursor:커서모양 관련 예약어

    지정한 예약어대로 커서 모양을 바꾸어 준다.

    1) 모양 관련 예약어

hand : 보통의 링크 모양으로 나온다.(손모양)
help : 물음표가 나온다.
move : move모양으로 나온다.
text : 텍스트 위에 커서가 있는 것 같이 나온다.
wait : 모래시계 모양으로 나온다.
crasshair : 십자선 모양으로 나온다.
ne-resize : 커서의 화살표가 오른쪽 위로 본다.
nw-resize : 커서가 기본 모양과 동일하다.(왼쪽 위를 보는 형태)   
sw-resize : 커서의 화살표가 왼쪽 아래를 본다.
se-resize : 커서의 화살표가 오른쪽 아래를 본다.
n-resize : 커서의 화살표가 위쪽을 본다.
e-resize : 커서의 화살표가 오른쪽을 본다.
s-resize : 커서의 화살표가 아래쪽을 본다.
w-resize : 커서의 화살표가 왼쪽을 본다.

링크, 스크롤바 관련

1. a:link, a:active, a:vistied, a:hover {color:색상값; text-decoration:표시속성}

   링크걸린 곳, 움직일 동안, 방문했던 곳, 커서를 올렸을 경우 등 링크부분의 색상및 표시될 형태를 지정해 준다.

    1) color :색상값

        지정해준 색상으로 링크관련 색상이 바뀐다.

    2) text-decoration:표시속성

        밑줄등을 없애줄 때 사용하지요... text-decoration:none 요렇게요..

2. 스크롤 바

    스크롤바의 색상 바꾸기는 익스플로러 5.5이상에서 적용이 됩니다. 그렇기 때문에 낮은 버전의 익스플로러에서는 적용이 않되구요.

    요즘은 거의 익스플로러 5.5이상을 사용들하구 계시잖아여.. ^^**

    1) scrollbar-3dlight-color : 스크롤 박스와 화살표의 왼쪽과 위쪽 가장자리에 해당 색상을 적용

    2) scrollbar-arrow-color : 화살표 부분의 색상 적용

    3) scrollbar-base-color : 스크롤바의 기본적인 색상 적용(scroll box, track, scroll arrows)

    4) scrollbar-darkshadow-color : 스크롤바의 홈에 색상 적용

    5) scrollbar-face-color : 스크롤 박스와 화살표박스에 색상 적용

    6) scrollbar-highlight-color : scrollbar-3dlight-color 와 적용되는 곳은 같지만 약간 다르게 나타나요.

    7) scrollbar-shadow-color : 스크롤 박스와 화살표의 오른쪽과 아래쪽 가장자리에 색상 적용

    8) scrollbar-track-color : 스크롤 트랙에 색상 적용

    *. scrollbar-base = scroll arrows + scroll box + scroll track

필터란 포토샵의 필터 기능들을 실제로 스타일 시트에서 적용할 수 있게 만든 태그입니다. 그림에 작업할 내용이 간단한 경우에는 이렇게 스타일 시트를 쓰는 것이

훨씬 간단하게 작업할 수 있구요. 기본적인 형태는 다음과 같습니다.

이미지
 <img src="이미지 파일" style="filter:필터속성">
 
글씨
 <태그 style="width:글자넓이;height:글자폭;font-size:글자크기pt;filter:필터속성">
 

태그라고 적혀있는 부분에는 body, div, img, input, marquee, table, td, textarea, th등의 태그명령어가 들어갈 수 있습니다.

1. alpha

    그림이나 글자에 투명도를 조절할 수 있는 명령어입니다.

    1) 옵션

opacity(불투명도) : 기본값은 100이며 0~100까지 수치조절을 하구요. 숫자가 작을수록 투명해집니다.
style(모양) : 0~3까지 선택. 0은 단일, 1은 선형, 2는 타원형, 3은 직사각형.
finishopacity : style 1, 2, 3의 경우 불투명도에 영향을 줍니다. 0~100까지 수치조절이 가능하구요.
2. blur

    그림을 약간 흐리게 하구요. 빛이 들어오는 방향등을 지정해 줍니다. 일명 번지는 효과쯤 될까요...

    1) 옵션

add : 원본이미지를 합칠 것인가 결정하구요. 합칠 경우는 1, 그렇지 않으면 2.
direction : 빛이 들어오는 각도. 즉 흐려지는 방향이 되겠죠. 시계각도로 0, 45, 90, 135, 180, 225, 270, 315값을 설정합니다.
strength : 강도 조절. 0~100까지 설정. 수치가 클수록 강도가 높아집니다.
3. chroma

    지정한 부분을 투명하게 해주는 필터 태그로 이미지에만 적용됩니다.

    1) 옵션

color=색상명/RGB색상코드 : 투명하게 하고자 하는 색을 지정
4. dropshadow

    특정위치에 그림자를 만들어 줍니다. 글씨에만 적용이 되구요.

    1) 옵션

color=색상/RGB색상코드 : 그림자의 색상을 지정
offx=수치 offy=수치 : 대상으로부터 그림자의 x, y 좌표
positive=0/1 : 0이면 투명픽셀로, 1이면 불투명픽셀로부터 그림자를 만들어줍니다. 그림자의 투명한 정도랄까요?
5. glow, gray

    글자나 이미지에 색상효과를 나타내는 명령어입니다.

    1) 옵션

glow : 글자나 색상에 지정된 색을 번지게 하는 효과를 나타냅니다.     
color=색상/RGB색상코드, strength=1~100 : 번지는 강도를 조절
gray : 이미지를 흑백으로 나타내주구요... 당연 이미지에만 적용 됩니다.
6. wave

   물결모양으로 효과를 주는 역할을 합니다.

    1) 옵션

add=0/1 : 원본이미지를 합칠 경우 0, 그렇지 않으면 1.
freq=수치 : wave의 개수를 지정
lightstrength=0~100 : wave에서 빛의 강도 %
phase=0~100 : 웨이비의 시작위치를 지정합니다.
strength=1~100 : 웨이브의 강도를 지정합니다.
7. xray

    엑스레이 화면처럼 이미지를 나타나게 해줍니다.

    1) 옵션

xray : 이미지를 흑백으로