스타일 정의를 위한 속성

1.폰트 속성

속성	속성값	설명가 사용 예
font-family	글자체(굴림,바탕...)	글자체 이름  font-family : verdana
font-style	normal,italic	글자 모양 지정 font-style : italic
font-size	pt(포인터),px(픽셀),in(인치) cm(센티미터),%(퍼센트)	글자 크기 font-size: 16pt, font-size : 20px
font-weight	normal,bold,light,bolder,ligher	글자 긁기 font-weight :  bold
font-variant	normal,small-caps	작은 대문자 font-variavt : small-caps

2.텍스트속성

속성	속성값	설명과 사용 예
text-align	left, cener, right, justify	가로 정렬 text-align  : center
vertical-align	baseline, botoom, middle, text-bottom, text-top, top, sub, super	세로 정렬 vertical-align : middle
text-indent	pt(포인터),px(픽셀),in(인치) cm(센티미터),%(퍼센트)	들여 쓰기 text-indent : 30%
text-decoration	none, underline, overline, linethrough, blink	글자 꾸밈 text-decoration : none
text-transform	none, uppercase, lowercase, capitalize	대소문자 변환 text-transform : uppercase
text-spacing	pt,px,in,cm	글자 간격 text-spacing : 20pt
word-spacing	pt,px,in,cm	단어 간격 word-spacing : 30pt

3.색과 배경 속성

속성	속성값	설명과 사용 예
color	색상명 또는 RGB 값	색상 color : red
background-color	색상명 또는 RGB 값	배경색 background-color : blue
background-image	배경 이미지의 URL	배경 이미지 background-image : url("sky,jpg")
background-repeat	no-repeat, repeat-x, repeat-y, repet	배경 이미지 반복 background-repeat : repeat-x
background-attachment	fixed, scroll	배경 이미지 고정 background-attachmet : fixed
background-position	top, bottom, left, right, center(조합해서 사용가능)	배경 이미지 위치 background-position : top left

4.위치 속성

속성	속성값	설명과 사용 예
position	absolute, relative	위치 속성 position : absolute
left	pt, px, in ,cm ,% auto	좌측 여백 지정 left : 20pt
top	pt, px, in ,cm ,% auto	상단 여백 지정 top : 10px
width	pt, px, in ,cm	요소의 넓이 지정 width : 150pt
height	pt, px, in ,cm	요소의 높이 지정 height : 120pt
visibility	넷스케이프 : show, hide 익스플로러 : visible, hidden	보이기, 감추기 속성 지정 visibility : visible
z-index	정수값, auto (값이 작을 수록 아래에 층)	겹치는 순서 지정 z-index : 1, z-index : 3

5.목록 속성

속성	속성값	설명과 사용 예
list-style-type	none, disk, circle, square, decimal, lower-roman, upper-roman	블릿의 모양 지정 list-style-type : circle
list-style-image	블릿 이미지의 URL	블릿의 이미지 지정 list-style-image  : url(".gif")
list-style-position	inside, outside	블릿의 위치 지정 list-style-position : outside

6.박스 스타일 속성

속성	속성값	설명과 사용 예
width	pt, px, in ,cm, %	내용 영역의 너비 width : 140pt
list-style-image	pt, px, in ,cm, %	내용 영역의 높이 height : 50px
float	none, left, right	블록 영역의 위치 float : right
border-style	double, inset, groove, solid,ridge, outset	테두리의 형태 border-style : solid
border-width	pt, px, in ,cm, %	테두리의 폭 border-width : 20pt
border-color		테두리의 색상 corder-color : navy
margin,   margin-top, margin-bottom, margin-left, margin-right	pt, px, in ,cm, %	여백 margin-top : 50pt
padding, padding-top, padding-bottom, padding-left, padding-right	pt, px, in ,cm, %	안여백 padding-left : 10px