본문 바로가기
Lecture/CSS

기본적인 CSS

by cusmaker 2012. 8. 12.
반응형

ㅁ font(글꼴)ㅁ text(글자)ㅁ background(배경)
ㅁ border(테두리)ㅁ margin(여백)ㅁ padding(안쪽여백)
ㅁ list(목록)ㅁ position(위치)ㅁ classification(식별)
ㅁ table(표)ㅁ Printing(프린트)ㅁ scrollbar(스크롤바 색상)
ㅁ filter(필터 : Alpha, Blur, Chroma, FlipH, FlipV, Gray, Invert, Light, Mask, Xray)
  
 CSS(Cascading Style Sheet) 의 속성 및 속성값
ㅁ NN: Netscape, ㅁ IE: Internet Explorer, ㅁ W3C: Web Standard
  
 FONT(글꼴)TOP
CSSScript내 용NNIEW3C
fontfont글꼴에 관련된 속성을 설정4.04.0CSS1
font-familyfontFamily글꼴이름을 설정4.03.0CSS1
font-sizefontSize글자 크기를 설정4.03.0CSS1
font-stylefontStyle글자의 형태를 설정4.04.0CSS1
font-variantfontVariant글자의 대/소문자 설정6.03.0CSS1
font-weightfontWeight글자의 두께 설정4.04.0CSS1
  
 TEXT(글자)TOP
CSSScript내 용NNIEW3C
colorcolor글자 색 설정4.03.0CSS1
directiondirection글자를 표시하는 방향 설정CSS2
letter-spacingletterSpacing글자 사이의 간격 설정6.03.0CSS1
text-aligntextAlign글자의 정렬 설정4.04.0CSS1
text-decorationtextDecoration글자의 꾸밈 및 형식 설정4.04.0CSS1
text-indenttextIndent문단의 첫 줄 들여쓰기 설정4.04.0CSS1
text-transformtextTransform대.소문자 변환 여부 설정4.04.0CSS1
line-heightlineHeight줄 간격 설정4.04.0CSS1
text-underline-positiontextUnderlinePosition밑줄이 그어지는 위치 지정5.5
word-spacingwordSpacing단어 사이의 간격 설정6.0CSS1
ime-modeimeMode입력모드 IME(한/영) 설정5.0CSS1
  
 BACKGROUND(배경)TOP
CSSScript내 용NNIEW3C
backgroundbackground웹문서의 배경을 정의하며 각각의 속성값을 "," 없이 두 개 이상 설정 가능6.03.0CSS1
background-attachmentbackgroundAttachment배경그림을 고정 또는 스크롤 설정6.03.0CSS1
background-colorbackgroundColor배경색 설정4.04.0CSS1
background-imagebackgroundImage배경그림 설정4.04.0CSS1
background-positionbackgroundPosition배경그림 위치 설정6.03.0CSS1
background-repeatbackgroundRepeat배경그림 반복 여부 설정4.04.0CSS1
  
 BORDER(테두리)TOP
CSSScript내 용NNIEW3C
borderborder테두리의 너비, 형식, 색을 설정 두 개이상 설정 가능4.04.0CSS1
border-topborderTop위쪽 테두리의 너비, 형식, 색등을 설정6.03.0CSS1
border-bottomborderBottom아래 테두리의 너비, 형식, 색등을 설정6.03.0CSS1
border-leftborderLeft왼쪽 테두리의 너비, 형식, 색등을 설정6.03.0CSS1
border-rightborderRight오른쪽 테두리의 너비, 형식, 색등을 설정6.03.0CSS1
border-colorborderColor테두리의 색을 설정6.03.0CSS1
border-top-colorborderTopColor위쪽 테두리의 색을 설정6.04.0CSS2
border-bottom-colorborderBottomColor아래 테두리의 색을 설정6.04.0CSS2
border-left-colorborderLeftColor왼쪽 테두리의 색을 설정6.04.0CSS2
border-right-colorborderRightColor오른쪽 테두리의 색을 설정6.04.0CSS2
border-styleborderStyle테두리 형식 설정6.03.0CSS1
border-top-styleborderTopStyle위쪽 테두리 형식 설정6.04.0CSS2
border-bottom-styleborderBottomStyle아래 테두리 형식 설정6.04.0CSS2
border-left-styleborderLeftStyle왼쪽 테두리 형식 설정6.04.0CSS2
border-right-styleborderRightStyle오른쪽 테두리 형식 설정6.04.0CSS2
border-widthborderWidth테두리 두께 설정4.04.0CSS1
border-top-widthborderTopWidth위쪽 테두리 두께 설정4.04.0CSS1
border-bottom-widthborderBottomWidth아래 테두리 두께 설정4.04.0CSS1
border-left-widthborderLeftWidth왼쪽 테두리 두께 설정4.04.0CSS1
border-right-widthborderRightWidth오른쪽 테두리 두께 설정4.04.0CSS1
  
 MARGIN(여백)TOP
CSSScript내 용NNIEW3C
marginmargin여백의 속성을 설정4.04.0CSS1
margin-topmarginTop위쪽 여백 설정4.03.0CSS1
margin-bottommarginBottom아래 여백 설정4.04.0CSS1
margin-leftmarginLeft왼쪽 여백 설정4.03.0CSS1
margin-rightmarginRight오른쪽 여백 설정4.03.0CSS1
  
 PADDING(테두리와 내용과의간격 = 안쪽여백을 뜻함)TOP
CSSScript내 용NNIEW3C
paddingpadding테두리와 글자 사이 간격 설정4.0
padding-toppaddingTop위쪽 테두리와 글자 사이 간격 설정4.04.0CSS1
padding-bottompaddingBottom아래 테두리와 글자 사이 간격 설정4.04.0CSS1
padding-leftpaddingLeft왼쪽 테두리와 글자 사이 간격 설정4.04.0CSS1
padding-rightpaddingRight오른쪽 테두리와 글자 사이 간격 설정4.04.0CSS1
  
 LIST(목록)TOP
CSSScript내 용NNIEW3C
displaydisplay객체에 인라인 또는 블럭단위의 박스를 생성4.04.0CSS1
list-stylelistStyle목록의 형식,위치,그림의 속성을 설정6.03.0CSS1
list-style-imagelistStyleImage목록의 표시를 그림으로 설정6.03.0CSS1
list-style-positionlistStylePosition목록 항목의 위치를 설정6.03.0CSS1
list-style-typelistStyleType목록의 항목 표시자의 속성을 설정4.04.0CSS1
  
 POSITION(위치)TOP
CSSScript내 용NNIEW3C
heightheight영역의 높이를 설정6.03.0CSS1
widthwidth영역의 너비를 설정4.04.0CSS1
toptop상단 테두리에서 떨어진 간격 설정4.04.0CSS2
bottombottom하단 테두리에서 떨어진 간격 설정5.0CSS2
leftleft상단 테두리을 기준으로 왼쪽 간격을 설정4.04.0CSS2
rightright상단 테두리을 기준으로 오른쪽 간격을 설정5.0CSS2
clipclip4각형 Block Box를 지정하는 수치만큼 가려서 안 보이도록 설정6.04.0CSS2
overflowoverflowwidth 속성이나 height 속성에 의해서 내용에 따라 화면의 크기를 제어6.04.0CSS2
positionposition화면에 표시할 위치를 설정6.04.0CSS2
visibilityvisibility화면에 표시 여부를 설정6.03.0CSS1
z-indexzIndexNetscape의 <LAYER>와 같은 개념6.04.0CSS2
  
 CLASSIFICATION(식별)TOP
CSSScript내 용NNIEW3C
cursorcursor커서의 모양을 설정6.04.0CSS2
floatfloat상위 요소안에서 좌.우로 이동할 것인가를 설정4.04.0CSS1
clearclear상위 요소안에서 좌.우로 이동하지 않고 줄바꿈 설정4.04.0CSS1
zoomzoom객체의 크기를 확대/축소5.5CSS1
linklink링크 설정 : 링크관련 가상 클래스(link,visited,active,hover)3.0CSS1
  
 TABLE(표)TOP
CSSScript내 용NNIEW3C
border-collapseborderCollapse표(TABLE)에 셀간격 설정5.0CSS2
table-layouttableLayout테이블(표)의 테이블 셀(cell), 줄(row), 컬럼(column)들의 배치에 사용되는 기능5.0CSS2
  
 Printing (프린트)TOP
CSSScript내 용NNIEW3C
page-break-afterpageBreakAfter프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정7.04.0CSS2
page-break-beforepageBreakBefore프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정7.04.0CSS2
  
 SCROLLBAR COLOR(스크롤바 색상)TOP
CSS내 용NNIEW3C
scrollbar-3dlight-color스크롤바의 스클롤 박스와 화살표 박스의 상단과 왼쪽 가장 자리에 색상 설정5.5CSS1
scrollbar-arrow-color스크롤바의 화살표 박스의 화살표에 색상을 설정5.5CSS1
scrollbar-base-color스크롤바의 arrow, shadow, darkshadow를 제외한 기본적인 곳에 설정5.5CSS1
scrollbar-darkshadow-color스크롤바의 스클롤 박스와 화살표 박스의 하단과 오른쪽 가장 자리에 색상 설정5.5CSS1
scrollbar-face-color스크롤바의 스클롤 박스와 화살표 박스 그리고 트랙의 표면 설정5.5CSS1
scrollbar-highlight-color스크롤바의 스클롤 박스와 화살표 박스의 상단과 왼쪽 가장 자리의 하이라이트 부분과 트랙 설정5.5CSS1
scrollbar-shadow-color스크롤바의 스클롤 박스와 화살표 박스의 하단과 오른쪽의 그림자 부분 설정5.5CSS1
scrollbar-track-color스크롤바의 트랙에 설정5.5CSS1
  
 FILTER(필터)TOP
CSSScript내 용NNIEW3C
AlphaAlpha그림이나 글자에 투명도를 조정할 수 있는 명령어4.0
BlurBlur흐리게 하는 효과4.0
ChromaChroma지정된 특정색을 투명하게 하는 효과4.0
DropshadowDropshadow특정위치에 그림자를 만들어 줍니다4.0
FlipHFlipH이미지나 좌우가 바뀝니다.4.0
FlipVFlipV이미지나 상하가 바뀝니다.4.0
GlowGlow글자나 이미지에 지정된 색을 번지게 하는 효과를 나타냅니다4.0
GrayGray흑백 이미지를 만듭니다.4.0
InvertInvert색조, 순도, 명도(필름 효과)를 반전4.0
LightLight조명 효과를 주어 이미지의 특정 부분을 밝게 해줍니다.4.0
MaskMask불투명한 것은 투명한 마스크를 씌우고 투명한 것은 지정된 색으로 마스크를 씌워 줍니다.4.0
ShadowShadow지정하는 색상과 방향으로 그림자를 만들어 줍니다.4.0
WaveWave물결 형태의 웨이브를 만들어 주는 필터입니다.

'Lecture > CSS' 카테고리의 다른 글

[스크랩] IE css 핵  (0) 2013.04.21
[스크랩] hasLayout 속성과 홀리 핵(Holly hack)  (0) 2013.04.21