css Peoperties

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 height: 높이 height: length | percentage | auto Box 배치 float: 어울림 float: left | right | none 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)