웹 표준 CSS 속성

CHIGONG BLOG

 

폰트 css 속성

font-family		글꼴
font-style	normal/italic/oblique	기울임
font-variant	normal/small-caps	small-caps 크기가 작은 대문자
font-weight	normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit ]	숫자는 글자 굵기
font-size	절대적 단위 : cm, mm, in, pt, pc, px/상대적 단위 : em, ex/퍼센트(%)	폰트사이즈

 

텍스트 css 속성

line-height	normal, cm, mm, in, pt, pc, px, %	줄간격
text-indent	normal, cm, mm, in, pt, pc, px, em, ex, %	문단 첫줄 들여쓱기,음수사용시 내여쓰기
text-align	left, right, center, justify	텍스트,이미지 수평정렬
text-decoration	none, underline, overline, line-through,blink	줄긋기
vertical-align	baseline, sup, sub, middle, text-top, top, text-bottom, bottom	텍스트나 이미지 수직정렬
text-transform	capitalize, uppercase, lowercase, none	영문자변환
letter-spacing	normal, cm, mm, in, pt, pc, px, %	자간 간격

 

색상/배경 css 속성

color	#영문자, RGB	글자,밑줄색
background-color	영문자, RGB, transparent	배경색
background-image	none, url(파일위치)	배경이미지
background-repeat	repeat, repeat-x, repeat-y, no-repeat	배경반복
background-position	top, bottom, left, center, right, 가로% 세로%"	이미지 반복여부
background-attachment	scroll, fixed	화면스크롤시 이동여부

 

박스/테두리 css 속성

margin	margin-top, margin-right, margin-bottom, margin-left	시계방향 여백지정
border	border-top, border-right, border-bottom, border-left	시계방향 테두리선
border-style	dotted, dashed, groove, ridge, inset, outset	시계방향 테두리선 모양
border-width	border-top-width, border-right-width, border-bottom-width, border-left-width	시계방향 테두리 두께
border-color	border-top-color, border-right-color, border-bottom-color, border-left-color	각각 테두리 색상 지정
padding	padding-top, padding-right, padding-bottom, padding-left	시계방향 테두리 안쪽여백
float	left, right, none	이미지,텍스트 다른 내용과의 배치
position	absolute, relative, static	브라우저에서의 위치표시
overflow	scroll hidden(할당된 공간에 들어가는 내용만 보여주고, 나머지는 자른다.), visible(크기에 관계없이 내용을 모두 보여준다.), auto(할당된 공간의 크기 이상이 되면 스크롤바를 나타낸다.)	상자안의 내용이 상자를 넘어 갈 때의 처리 여부
overflow	overflow-x, overflow-y	스크롤 바를 따로 지정
visibility	inherit, visible, hidden	element의 화면 표시 여부
z-index	auto, 숫자	엘리먼트가 위로 겹치는 속성. 상대,절대값일때 사용가능 숫자가 높을수록 젤 상위
top, left	숫자, %, auto	위, 왼쪽위치, 위치가 상대․절대일때만 사용
width, height	숫자, %, auto	내용의 너비와 높이를 지정, 위치가 상대․절 대일때만 사용
clear	none, left, right, both	지정한 방향에는 다른 내용이 올 수 없음을 나타낸다

 

목록 css 속성

list-style-type	disc, circle, square, decimal, lower-roman, none, upper-roman, lower-alpha, upper-alpha	리스트 스타일 타입
list-style-image	url, none	리스트의 블릿 기호 이미지로 지정
list-style-position	inside, outside	리스트의 문장이 출력될 지점
list-style	list-style-type, position, image	3가지 속성을 한꺼번에 지정

 

커서 css 속성

cursor	crosshair, help, move, pointer, text, wait	커서 모양
	e-resize, w-reseze, s-resize, n-resize, ne-resize, nw-resize, sw-resize, se-resize

 

글자/그림 효과 css 속성

filter	alpha,blur,chroma,dropshadow,shadow,filph,filpv,glow,gray,invert, light,xray,wave	필터
alpha	alpha(opacity="값", style="값", finishopacity="값", startx="값", starty="값", finishx="값", finishy="값")	그림,글자에 투명도
blur	blur(add="값", direction="값", strength="값") ․ chroma	그림,글자에 블러효과
chroma	chroma(color="색상값")	그림,글자에특정색을 투명하게
shadow	shadow(color="색상값", direction="그림자 방향 도") ․ dropshadow	지정된 색상의 그림자 효과를 지정하는 속성
dropshadow	dropshadow(color="색상값", offx="값", offy="값",positive="0,1") ․ filph	그림자의 위치를 지정해서 그림자 효과를 지정
filph		그림이나 글자를 수평 반전
filpv		그림이나 글자를 수직 반전
glow	glow(color="색상값", strength="값")	경계선 바깥쪽을 발광하게하는 효과
gray()		그림이나 글자를 흑백
invert()		그림이나 글자의 채도 및 색조를 반전
light()		빛이 투과된 효과를 지정
xray()		빛이 투과된 효과를 지정
wave	wave(add="값", freq="값", lightstrength="값", phase="값", strength="값")	파도 효과를 지정하는 속성
mask	mask(color="색상값")	투명한 채색 효과를 지정

 

페이지 나누는 css 속성

page-break-after		지정후 페이지를 나눈다.
page-break-before		지정전 페이지를 나눈다.