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
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)
 

 

반응형

'WebPrograming관련' 카테고리의 다른 글

CSS요약 정리  (0) 2007.03.20
css 적용하기  (0) 2007.03.18
웹폰트 기초 사용법  (0) 2007.03.16
Posted by Real_G