https://Hybridego.net/ <Ho Cheol Jeon>

css Peoperties

WebPrograming관련 : 2007. 3. 18. 10:04

CSS (Cascading Style Sheets) Level 1

CSS는 일찍이 HTML의 타락(문서의 구조가 아닌 표현과 관련된 태그로 오염되는)과 웹디자이너의 아픔과 고통을 덜고자 탄생했다.
CSS는 HTML을 보완하고, 사이트의 전체적인 스타일과 디자인을 통일성 있게 계획하고 제작할 수 있도록 도와주는 W3C의 표준입니다.
CSS 명세 … http://www.w3.org/Style/CSS/
CSS1 부라우저 호환성 표 … http://www.ddj.com/webreview/style/css1/charts/mastergrid.shtml
아래의 Form Value Example에서 "속성값1 | 속성값2" 로 적어준 것에서 | 는 or 의 의미로 사용하였다. 즉, 여러 속성값 중에 하나들 선택하여 적용할 수 있음을 뜻한다. || 는 속성값을 적용하는 또 다른 방법을 보여준다.

Cascading Style Sheet Level 1 (CSS1) Properties

Properties Set	Property:	Korean Name	Form Value Example
Font 글꼴	font-family:	글꼴종류	font-family: family-name \| generic-family \|\| , ,"",
	font-style:	글꼴체	font-style: normal \| italic \| oblique
	font-variant:	글꼴변형	font-variant: normal \| small-cap
	font-weight:	글꼴굵기	font-weight: normal \| bold \| bolder \| lighter \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900
	font-size:	글꼴크기	font-size: xx-small \| x-small \| small \| medium \| large \| x-large \| xx- large \|\| larger \| smaller \|\| length
	font:	글꼴	font : font-style font-variant font-weight font-size line-height font-family
Color and Background 색상과 배경	color:	색상	color: #000000 \| black
	background-color:	배경색	background-color: #000000 \| black
	background-image:	배경그림	background-image: url(image.gif)
	background-repeat:	배경그림 반복	background-repeat: repeat\|repeat-x\|repeat-y\|no-repeat
	background-attachment:	배경의 성격	background-attachment: scroll \| fixed
	background-position:	배경그림 위치	background-position: length \|\| top left \|\| top\|center\|bottom\|left\|center\|right
	background:	배경	background: background-color background-image background-repeat background-attachment background-position
Text 문장	word-spacing:	낱말간격	word-spacing: normal \| length
	letter-spacing:	문자간격	letter-spacing: normal \| length
	text-decoration:	장식	text-decoration: none \| underline \| overline \| line-through \| blink
	vertical-align:	수직정렬	vertical-align: baseline \| sub \| super \| top \| text-top \| middle \| bottom \| text-bottom \| percentage
	text-transform:	문자변환	text-transform: none \| capitalize \| uppercase \| lowercase
	text-align:	수평정렬	text-align: left \| right \| center \| justify
	text-indent:	들여쓰기	text-indent: length
	line-height:	줄간격	line-height: normal \| length
Box 바깥여백	margin-top:
	margin-right:
	margin-bottom:
	margin-left:
	margin:	바깥여백	DIV { margin: top right bottom left }
Box 안여백	padding-top:
	padding-right:
	padding-bottom:
	padding-left:
	padding:	안여백	DIV { margin: top right bottom left }
Box 테두리선	border-top-width:
	border-right-width:
	border-bottom-width:
	border-left-width:
	border-width:	선굵기	border-width: thin \| medium \| thick \| length \|\| top rigth bottom left
	border-color:	선색상	border-color: color \|\| top rigth bottom left
	border-style:	선형태	border-style: none\|dotted\|dashed\|solid\|double\|groove\|ridge\|inset\|outset \|\| top rigth bottom left
	border-top:
	border-right:
	border-bottom:
	border-left:
	border:	테두리선	border: border-widht border-style color
Box 크기	width:	너비	width: length \| percentage \| auto
Box 크기	height:	높이	height: length \| percentage \| auto
Box 배치	float:	어울림	float: left \| right \| none
Box 배치	clear:	배척함	clear: none \| left \| right \| both
Classification Properties 문단형식	display:	표시	display: block \| inline \| list-item \| none
	white-space:	공백	white-space: normal \| pre \| nowrap
	list-style-type:	list-style-type: disc \| circle \| square \| decimal \| lower-roman \| upper-roman \| lower-alpha \| upper-alpha \| none
	list-style-image:	list-style-image: url(image.gif) \| none
	list-style-position:	list-style-position: inside \| outside
	list-style:	목록	list-style: list-style-type list-style-position \|\| url(image)