2012년 9월 6일 목요일

CSS 속성

FONT(글꼴)
CSSScript내 용
fontfont글꼴에 관련된 속성을 설정
font-familyfontFamily글꼴이름을 설정
font-sizefontSize글자 크기를 설정
font-stylefontStyle글자의 형태를 설정
font-variantfontVariant글자의 대/소문자 설정
font-weightfontWeight글자의 두께 설정






    TEXT(글자)

CSSScript내 용
colorcolor글자 색 설정
directiondirection글자를 표시하는 방향 설정
letter-spacingletterSpacing글자 사이의 간격 설정
text-aligntextAlign글자의 정렬 설정
text-decorationtextDecoration글자의 꾸밈 및 형식 설정
text-indenttextIndent문단의 첫 줄 들여쓰기 설정
text-transformtextTransform대.소문자 변환 여부 설정
line-heightlineHeight줄 간격 설정
text-underline-positiontextUnderlinePosition밑줄이 그어지는 위치 지정
word-spacingwordSpacing단어 사이의 간격 설정
ime-modeimeMode입력모드 IME(한/영) 설정


BACKGROUND(배경)
CSSScript내 용
backgroundbackground웹문서의 배경을 정의하며 각각의 속성값을 "," 없이 두 개 이상 설정 가능
background-attachmentbackgroundAttachment배경그림을 고정 또는 스크롤 설정
background-colorbackgroundColor배경색 설정
background-imagebackgroundImage배경그림 설정
background-positionbackgroundPosition배경그림 위치 설정
background-repeatbackgroundRepeat배경그림 반복 여부 설정


BORDER(테두리)
CSSScript내 용
borderborder테두리의 너비, 형식, 색을 설정 두 개이상 설정 가능
border-topborderTop위쪽 테두리의 너비, 형식, 색등을 설정
border-bottomborderBottom아래 테두리의 너비, 형식, 색등을 설정
border-leftborderLeft왼쪽 테두리의 너비, 형식, 색등을 설정
border-rightborderRight오른쪽 테두리의 너비, 형식, 색등을 설정
border-colorborderColor테두리의 색을 설정
border-top-colorborderTopColor위쪽 테두리의 색을 설정
border-bottom-colorborderBottomColor아래 테두리의 색을 설정
border-left-colorborderLeftColor왼쪽 테두리의 색을 설정
border-right-colorborderRightColor오른쪽 테두리의 색을 설정
border-styleborderStyle테두리 형식 설정
border-top-styleborderTopStyle위쪽 테두리 형식 설정
border-bottom-styleborderBottomStyle아래 테두리 형식 설정
border-left-styleborderLeftStyle왼쪽 테두리 형식 설정
border-right-styleborderRightStyle오른쪽 테두리 형식 설정
border-widthborderWidth테두리 두께 설정
border-top-widthborderTopWidth위쪽 테두리 두께 설정
border-bottom-widthborderBottomWidth아래 테두리 두께 설정
border-left-widthborderLeftWidth왼쪽 테두리 두께 설정
border-right-widthborderRightWidth오른쪽 테두리 두께 설정



MARGIN(여백)
CSSScript내 용
marginmargin여백의 속성을 설정
margin-topmarginTop위쪽 여백 설정
margin-bottommarginBottom아래 여백 설정
margin-leftmarginLeft왼쪽 여백 설정
margin-rightmarginRight오른쪽 여백 설정



PADDING(테두리와 내용과의간격 = 안쪽여백을 뜻함)
CSSScript내 용
paddingpadding테두리와 글자 사이 간격 설정
padding-toppaddingTop위쪽 테두리와 글자 사이 간격 설정
padding-bottompaddingBottom아래 테두리와 글자 사이 간격 설정
padding-leftpaddingLeft왼쪽 테두리와 글자 사이 간격 설정




오른쪽 테두리와 글자 사이 간격 설정






LIST(목록)
CSSScript내 용
displaydisplay객체에 인라인 또는 블럭단위의 박스를 생성
list-stylelistStyle목록의 형식,위치,그림의 속성을 설정
list-style-imagelistStyleImage목록의 표시를 그림으로 설정
list-style-positionlistStylePosition목록 항목의 위치를 설정
list-style-typelistStyleType목록의 항목 표시자의 속성을 설정



POSITION(위치)
CSSScript내 용
heightheight영역의 높이를 설정
widthwidth영역의 너비를 설정
toptop상단 테두리에서 떨어진 간격 설정
bottombottom하단 테두리에서 떨어진 간격 설정
leftleft상단 테두리을 기준으로 왼쪽 간격을 설정
rightright상단 테두리을 기준으로 오른쪽 간격을 설정
clipclip4각형 Block Box를 지정하는 수치만큼 가려서 안 보이도록 설정
overflowoverflowwidth 속성이나 height 속성에 의해서 내용에 따라 화면의 크기를 제어
positionposition화면에 표시할 위치를 설정
visibilityvisibility화면에 표시 여부를 설정
z-indexzIndexNetscape의<layer>와 같은 개념</layer>



CLASSIFICATION(식별)
CSSScript내 용
cursorcursor커서의 모양을 설정
floatfloat상위 요소안에서 좌.우로 이동할 것인가를 설정
clearclear상위 요소안에서 좌.우로 이동하지 않고 줄바꿈 설정
zoomzoom객체의 크기를 확대/축소
linklink링크 설정 : 링크관련 가상 클래스(link,visited,active,hover)



TABLE(표)
CSSScript내 용
border-collapseborderCollapse표(TABLE)에 셀간격 설정
table-layouttableLayout테이블(표)의 테이블 셀(cell), 줄(row), 컬럼(column)들의 배치에 사용되는 기능



Printing (프린트)
CSSScript내 용
page-break-afterpageBreakAfter프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정
page-break-beforepageBreakBefore프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정



SCROLLBAR COLOR(스크롤바 색상)
CSS내 용
scrollbar-3dlight-color스크롤바의 스클롤 박스와 화살표 박스의 상단과 왼쪽 가장 자리에 색상 설정
scrollbar-arrow-color스크롤바의 화살표 박스의 화살표에 색상을 설정
scrollbar-base-color스크롤바의 arrow, shadow, darkshadow를 제외한 기본적인 곳에 설정
scrollbar-darkshadow-color스크롤바의 스클롤 박스와 화살표 박스의 하단과 오른쪽 가장 자리에 색상 설정
scrollbar-face-color스크롤바의 스클롤 박스와 화살표 박스 그리고 트랙의 표면 설정
scrollbar-highlight-color스크롤바의 스클롤 박스와 화살표 박스의 상단과 왼쪽 가장 자리의 하이라이트 부분과 트랙 설정
scrollbar-shadow-color스크롤바의 스클롤 박스와 화살표 박스의 하단과 오른쪽의 그림자 부분 설정
scrollbar-track-color스크롤바의 트랙에 설정



FILTER(필터)
CSSScript내 용
AlphaAlpha그림이나 글자에 투명도를 조정할 수 있는 명령어
BlurBlur흐리게 하는 효과
ChromaChroma지정된 특정색을 투명하게 하는 효과
DropshadowDropshadow특정위치에 그림자를 만들어 줍니다
FlipHFlipH이미지나 좌우가 바뀝니다.
FlipVFlipV이미지나 상하가 바뀝니다.
GlowGlow글자나 이미지에 지정된 색을 번지게 하는 효과를 나타냅니다
GrayGray흑백 이미지를 만듭니다.
InvertInvert색조, 순도, 명도(필름 효과)를 반전
LightLight조명 효과를 주어 이미지의 특정 부분을 밝게 해줍니다.
MaskMask불투명한 것은 투명한 마스크를 씌우고 투명한 것은 지정된 색으로 마스크를 씌워 줍니다.
ShadowShadow지정하는 색상과 방향으로 그림자를 만들어 줍니다.
WaveWave물결 형태의 웨이브를 만들어 주는 필터입니다.
XrayXrayX-ray 사진 같은 효과를 나타내 주는 필터입니다


Display(표현방식)

block : 블록박스로 만든다.
inline : 인라인 박스로 만든다.
inline-block : 블록박스로 만들어지지만, 인라인 박스처럼 배치된다. (CSS2.1 권고후보에 추가)
none : 박스를 만들지 않으며 시각적으로 완전히 보이지 않는다.
inherit : 상위 요소의 display속성을 상속받는다.

table : 블록레벨의 표로 만든다. (table)
inline-table : 인라인레벨의 표로 만든다. (table)
table-row : 행으로 만든다 (tr 기본 속성)
table-row-group : 본체 행 그룹으로 만든다. (tbody 기본 속성)
table-header-group : 헤더 행 그룹으로 만든다. (thead 기본 속성)
table-footer-group : 푸터 행 그룹으로 만든다. (tfoot 기본 속성)
table-column : 열로 만든다. (col 기본 속성 - 보이지 않음)
table-column-group : 열 그룹으로 만든다. (colgroup 기본 속성 - 보이지 않음)
table-cell : 하나의 셀로 만든다. (td 기본 속성)
table-caption : 캡션으로 만든다. (caption 기본 속성)

list-item : li요소와 같은 블록박스와 목록항목의 인라인박스로 만든다.
run-in : 런인박스로 만든다.
compact : 콤팩트 박스로 만든다. (CSS2.1권고후보에서 삭제)
marker : 그 요소의 전후에 생성된 내용을 마커로 정의한다. (CSS2.1권고후보에서 삭제)

블로그 보관함