태그 자료실

HTML과 자바스크립트에서 스타일시트 속성

　

BACKROUND(배경)
속 성 명		속 성 값	내 용
css	jsss	속 성 값	내 용
background	background	background-color background-images background-repeat background-attachment background-position	웹문서의 배경을 정의하며 각각의 속성값을 "," 없이 두 개 이상 설정할수 있다.
background-attachment	backgroundAttachment	scroll fixed	배경그림을 고정 또는 스크롤
background-color	backgroundColor	color_RGB color_NAME rgb(red,green,blue) transparent	배경 색상 및 배경색의 투명성 설정
background-image	backgroundImage	url(url) none	배경그림 설정
background-position	backgroundPosition backgroundPositionX backgroundPositionY	top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos	배경그림의 위치를 설정하며 백분율을 표시할 때는 숫자와 %를 사용하고 절대위치는 숫자로 표시한다.
background-repeat	backgroundRepeat	repeat repeat-x repeat-y no-repeat	배경그림이 화면보다 작을 경우 반복해서 보여줄지 여부를 설정

TEXT(글자)
속 성 명		속 성 값	내 용
css	jsss	속 성 값	내 용
color	color	color_RGB color_NAME rgb(red,green,blue)	글자 색을 설정
direction	direction	ltr rtl	글자를 표시하는 방향설정
letter-spacing	letterSpacing	normal lengthpx	글자 사이의 간격을 지정 하며 픽셀은 숫자 다음에 px로 표시
text-align	textAlign	left right center justify	글자의 정렬을 설정
text-decoration	textDecoration	none underline overline line-through blink	글자의 꾸밈 및 형식 설정
text-indent	textIndent	lengthpx %	좌측 여백을 백분율 또는 픽셀값으로 설정
text-transform	textTransform	none capitalize uppercase lowercase	글자의 대.소문자 변환 여부를 설정
word-spacing	whiteSpace	none lengthpx	단어 사이의 간격을 설정

FONT(글꼴)
속 성 명		속 성 값	내 용
css	jsss	속 성 값	내 용
font	font	font-style font-variant font-weight font-size line-height font-family caption icon menu	글꼴에 관련된 속성을 설정하며 line-height 값은 줄과 줄 사이의 간격을 백분율로 표시하고 각각의 요소 값은 콤마없이 두 개 이상 설정할 수 있다.
font-family	fontFamily	family-name generic-family	글꼴이름을 설정 우선순위에 따라 두 개이상 콤마로 연결할수 있다.
font-size	fontSize	xx-small x-small small medium large x-large xx-large smaller larger lengthpx %	글자 크기를 설정
font-style	fontStyle	normal italic	글자의 형태를 설정
font-variant	fontVariant	normal small-caps	글자의 크기를 설정
font-weight	fontWeight	normal bold bloder lighter 100 200 ..... 800 900	글자의 두께를 설정

BORDER(경계선)
속 성 명		속 성 값	내 용
css	jsss	속 성 값	내 용
border	border	border-width border-style border-color	경계선의 너비, 형식, 색을 설정 두 개이상 설정 가능
border-bottom	borderBottom	border-bottom-width border-style border-color	아래 경계선의 너비, 형식, 색을 설정 두 개이상 설정 가능
border-bottom-color	borderBottomColor	border-color	아래 경계선의 색을 설정
border-bottom-style	borderBottomStyle	none hidden dotted dashed solid double groove ridge inset outset	아래 경계선의 형식을 설정
border-bottom-width	borderBottomWidth	thin medium thick lengthpx	아래 경계선의 두께를 설정
border-color	borderColor	color	콤마없이 두 개이상의 값을 설정가능
border-left	borderLeft	border-left-width border-style border-color	왼쪽 경계선의 너비, 형식, 색을 지정 두 개이상의 값을 설정가능
border-left-color	borderLeftColor	border-color	왼쪽 경계선의 색을 설정
border-left-style	borderLeftStyle	border-style	왼쪽 경계선의 형식을 설정
border-left-width	borderLeftWidth	width	왼쪽 경계선의 두께를 설정
border-right	borderRight	border-right-width border-style border-color	오른쪽 경계선의 너비, 형식, 색을 지정 두 개이상의 값을 설정가능
border-right-color	borderRightColor	border-color	오른쪽 경계선의 색을 설정
border-right-style	borderRightStyle	border-style	오른쪽 경계선의 형식을 설정
border-right-width	borderRightWidth	width	오른쪽 경계선의 두께를 설정
border-style	borderStyle	style	경계선의 형식을 설정
border-top	borderTop	border-top-width border-style border-color	위쪽 경계선의 너비, 형식, 색을 지정 두 개이상의 값을 설정가능
border-top-color	borderTopColor	border-color	위쪽 경계선의 색을 설정
border-top-style	borderTopStyle	border-style	위쪽 경계선의 형식을 설정
border-top-width	borderTopWidth	width	위쪽 경계선의 두께를 설정
border-width	borderWidth	width	경계선의 두께를 설정

MARGIN(여백)
속 성 명		속 성 값	내 용
css	jsss	속 성 값	내 용
margin	margin	margin-top margin-right margin-bottom margin-left	여백의 속성을 설정
margin-bottom	marginBottom	auto lengthpx %	아래의 여백을 설정
margin-left	marginLeft	auto lengthpx %	왼쪽의 여백을 설정
margin-right	marginRight	auto lengthpx %	오른쪽의 여백을 설정
margin-top	marginTop	auto lengthpx %	위쪽의 여백을 설정

PADDING(경계선과 내용과의간격)
속 성 명		속 성 값	내 용
css	jsss	속 성 값	내 용
padding	padding	padding-top padding-right padding-bottom padding-left	상,하,좌,우의 경계선과 글자 사이의 간격을 설정
padding-bottom	paddingBottom	lengthpx %	아래 경계선과 글자 사이의 간격을 설정
padding-left	paddingLeft	lengthpx %	왼쪽 경계선과 글자 사이의 간격을 설정
padding-right	paddingRight	lengthpx %	오른쪽 경계선과 글자 사이의 간격을 설정
padding-top	paddingTop	lengthpx %	위쪽 경계선과 글자 사이의 간격을 설정

LIST(목록)
속 성 명		속 성 값	내 용
css	jsss	속 성 값	내 용
list-style	list-style	list-style-type list-style-position list-style-image	목록의 형식,위치,그림의 속성을 설정
list-style-image	listStyleImage	none url(url)	목록의 표시를 그림으로 설정
list-style-position	listStylePosition	inside outside	목록 항목의 위치를 설정
list-style-type	listStyleType	none disc circle square decimal decimal-leading-zero lower-roman lower-alpha upper-roman upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha	목록의 항목 표시자의 속성을 설정

DIMENSION(영역)
속 성 명		속 성 값	내 용
css	jsss	속 성 값	내 용
height	height	auto legthpx %	영역의 높이를 설정
line-height	lineHeight	auto legthpx %	영역의 줄 간격을 설정
width	width	auto legthpx %	영역의 너비를 설정

CLASSIFICATION(식별)
속 성 명		속 성 값	내 용
css	jsss	속 성 값	내 용
cursor	cursor	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	커서의 모양을 설정
float	float	left right none	해당요소를 상위 요소안에서 좌.우로 이동할 것인가를 설정
position	position	static relative absolute	화면에 표시할 위치를 설정
visibility	visibility	visible hidden	화면에 표시 여부를 설정

POSITION(위치)
속 성 명		속 성 값	내 용
css	jsss	속 성 값	내 용
bottom	bottom	auto legthpx %	상위의 요소 아래 경계선에서 떨어진 간격을 설정
clip	clip	rect(top,right,bottom,left) auto