[ type ] : 글자에 관련된 속성을 설정하는 부분입니다.
|
font-family
|
굴림,굴림체;
|
글꼴을 설정합니다. |
|
font-size
|
12px;
|
글자 크기와 함께 단위를 설정합니다. |
|
font-style
|
italic;
|
글자의 모양을 설정합니다. |
|
line-height
|
18px;
|
문단 내이 줄 간격과 단위를 설정합니다. |
|
font-weight
|
bold;
|
글자의 굵기와 관련된 속성을 설정합니다. |
|
font-variant
|
small-caps;
|
[small-cap]을 선택하면 영문자 모두 소문자로 나타납니다 |
|
text-transform
|
none;
|
|
|
color
|
#033;
|
글자의 색상설정 |
|
text-decoration
|
밑줄긋기, 윗줄 긋기와 같이 문단의 장식적인 효과를 적용합니다. | |
|
underline;
|
글자 밑에 줄을 그어 나타냅니다. | |
|
overline;
|
글자 위에 줄을 그어 나타냅니다. | |
|
line-through
|
글자 중간에 줄을 그어 나타냅니다. | |
|
blink
|
글자를 깜박거리게 만듭니다. 넷스케이프 웹브라우저에서만 나타납니다. | |
|
none
|
아무 장식 없이 글자를 나타냅니다. 하이퍼링크 속성 설정에서 주로 사용합니다. |
[ Background ] : 배경그림, 배경색상, 반복, 고정, 수평 및 수직 위치와 같은 속성을 설정합니다.
|
background-color
|
#CCC;
|
배경색상을 지정합니다. |
|
background-image
|
url(images/bg_comm_roll.jpg);
|
배경 그림을 설정합니다. |
|
background-repeat
|
배경 그림이 채우기 속성을 설정합니다. | |
|
no-repeat;
|
배경 그림이 한 번만 채워져서 나타납니다. | |
|
repeat
|
배경 그림이 바둑판 형태로 채워져서 나타납니다. | |
|
repeat-x;
|
선택한 배경 그림이 수평 방향으로 가로로만 반복되어 나타납니다. | |
|
repeat-y;
|
선택한 배경 그림이 수직 방향으로 세로로만 반복되어 나타납니다. | |
|
background-position
|
10px center;
|
배경 그림의 수평 및 수직 위치를 설정합니다. |
|
background-attachment
|
||
|
fixed;
|
스크롤되어도 배경 그림은 고정되어 있어 나머지 문서에 삽입된 요소만 이동합니다. | |
|
scroll;
|
일반 스크롤과 마찬가지로 배경 그림과 함께 문서에 삽입된 요소도 이동합니다. |
[ Border ] : 테두리 스타일, 굵기, 색상속성등을 설정합니다.
|
order-width
|
5px;
|
테두리 굵기를 설정합니다. |
|
border-style
|
solid;
|
단일선, 이중선, 점선과 같은 테두리 스타일을 설정합니다. |
|
border-color
|
#039;
|
테두리 색상을 설정합니다. |
|
border
|
5px solid #039;
|
테두리 굵기, 스타일, 색깔을 설정합니다(border속성으로 한번에 설정할수있음) |
[ Block ] : 단어간격, 글자간격, 정렬, 들여쓰기와 같은 속성을 설정합니다.
|
10em;
|
글자와 글자 사이의 간격을 단위와 함께 설정합니다. | |
|
text-align
|
left;
|
가로 수평에 관련된 정렬 방식을 설정합니다. |
|
text-indent
|
10px;
|
문단의 들여쓰기 간격을 설정합니다. |
|
vertical-align
|
middle;
|
세로 수직에 관련된 정렬 방식을 설정합니다. |
|
word-spacing
|
10em;
|
단어와 단어 사이의 간격을 단위와 함께 설정합니다. |
|
white-space
|
공백에 관련된 처리 방식을 설정합니다. | |
|
nomal;
|
공백을 축소합니다. | |
|
pre;
|
PRE’태그를 쓰는 것처럼 레이아웃 그대로 공백을 처리합니다. | |
|
nowrap;
|
BR’ 태그가 있을 때에만 줄 바꿈을 하도록 설정합니다. | |
|
display
|
inline;
|
표시 방식을 설정합니다. |
[ Box ] : 선택한 글자, 테이블, 그림과 같은 요소 주위의 여백, 정렬, 크기 등의 속성을 설정합니다.
|
margin
|
10px;
|
주위에 함께 삽입되어 있는 요소와의 여백을 설정합니다. |
|
padding
|
10px;
|
테두리 선과 요소 사이의 여백을 설정합니다. |
|
clear
|
right;
|
왼쪽, 오른쪽, 양쪽에 다른 요소가 위치되지 못하게 설정합니다. |
|
float
|
left;
|
스타일시트가 적용되는 요소를 정렬합니다. |
|
width
|
300px;
|
스타일시트가 적용되는 요소의 가로 크기를 단위화 함께 설정합니다. |
|
height
|
auto;
|
스타일시트가 적용되는 요소의 세로 크기를 단위화 함께 설정합니다. |
[ Border ] : 테두리 스타일, 굵기, 색상속성등을 설정합니다.
|
border-width
|
5px;
|
테두리 굵기를 설정합니다. |
|
border-style
|
solid;
|
단일선, 이중선, 점선과 같은 테두리 스타일을 설정합니다. |
|
border-color
|
#039;
|
테두리 색상을 설정합니다. |
|
border
|
5px solid #039;
|
테두리 굵기, 스타일, 색깔을 설정합니다(border속성으로 한번에 설정할수있음) |
[ List ] : 목록 문단의 목록을 나타내는 ‘LI’ 태그의 속성을 설정합니다.
|
list-style-type
|
circle;
|
목록 앞에 붙는 블릿 기호나 숫자 형태를 설정합니다. |
|
list-style-position
|
inside;
|
목록 문단의 줄 바꿈, 들여쓰기 및 내어쓰기 방식을 설정합니다. |
|
list-style-image
|
url(images/bg_comm_arrow.gif);
|
목록 앞에 표시되는 블릿 기호 대신 나타나는 그림 경로를 설정합니다. |
[ Positioning ] : AP엘리먼트에 관련된 위치, 표시, z-index, 영역에 관련된 속성을 설정합니다.
|
position:
|
fixed;
|
AP엘리먼트의 배치 방식을 설정합니다. |
|
visiblility
|
inherit;
|
AP엘리먼트의 표시 방식을 설정합니다. |
|
width
|
300px;
|
AP엘리먼트의 가로 크기를 설정합니다. |
|
height
|
300px;
|
AP엘리먼트의 세로 크기를 설정합니다. |
|
z-index
|
auto;
|
AP엘리먼트의 겹치기 순서를 설정합니다. |
|
overflow
|
AP엘리먼트의 크기보다 요소가 클 경우의 처리 방식을 설정합니다. | |
|
placement
|
AP엘리먼트의 위치와 크기를 설정합니다. | |
|
clip
|
AP엘리먼트의 표시 부분을 설정합니다. |
[ Extensions ] : 마우스 포인터의 모양 변경, 인쇄 범위, 필터와 같은 속성을 설정합니다.
|
page-break-before
|
left;
|
스타일시트가 적용된 요소의 앞을 기준으로 인쇄 범위를 설정합니다. |
|
page-break-after
|
auto;
|
스타일시트가 적용된 요소의 뒤를 기준으로 인쇄 범위를 설정합니다. |
|
cursor
|
crosshair;
|
스타일시트가 적용된 요소 위에 마우스 포인터를 가져가면 포인터의 모양이 변경되도록 설정합니다. |
|
filter
|
Gray;
|
포토샵의 필터를 적용한 것과 같이 그림에 Blur, Wave, Invert와 같은 다양한 왜곡 효과를 적용합니다. |
단위
| 상대단위 | 절대단위 |
|---|---|
|
|
CSS Font-Size Comparative Table
| Points | Pixels | Ems | Percent | Point (Photoshop) / Gulim | Point (Photoshop) / Dotum |
|---|---|---|---|---|---|
| 6pt | 8px | 0.5em | 50% | 8pt, 9pt | 8pt |
| 7pt | 9px | 0.55em | 55% | 10pt | 9pt, 10pt |
| 7.5pt | 10px | 0.625em | 62.5% | 11pt | 11pt |
| 8pt | 11px | 0.7em | 70% | 12pt, 13pt | 12pt |
| 9pt | 12px | 0.75em | 75% | 14pt | x |
| 10pt | 13px | 0.8em | 80% | 15pt | 13pt |
| 10.5pt | 14px | 0.875em | 87.5% | 16pt, 17pt | 14pt, 15pt |
| 11pt | 15px | 0.95em | 95% | 18pt | 16pt |
| 12pt | 16px | 1em | 100% | 19pt | 17pt |
| 13pt | 17px | 1.05em | 105% | 20pt, 21pt | 18pt, 19pt |
| 13.5pt | 18px | 1.125em | 112.5% | x | 20pt |
| 14pt | 19px | 1.2em | 120% | 22pt | 21pt |
| 14.5pt | 20px | 1.25em | 125% | 23pt | 22pt |
| 15pt | 21px | 1.3em | 130% | 24pt | x |
| 16pt | 22px | 1.4em | 140% | 25pt, 26pt | 23pt, 24pt |
| 17pt | 23px | 1.45em | 145% | 27pt | x |
| 18pt | 24px | 1.5em | 150% | 28pt | 25pt |