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(글꼴)TOPCSSScript내 용NNIEW3Cfontfont글꼴에 관련된 속성을 설정4.04.0CSS1font-familyfontFamily글꼴이름을 설정4.03.0CSS1font-sizefontSize글자 크기를 설정4.03.0CSS1font-stylefontStyle글자의 형태를 설정4.04.0CSS1font-variantfontVariant글자의 대/소문자 설정6.03.0CSS1font-weightfontWeight글자의 두께 설정4.04.0CSS1 ○○ TEXT(글자)TOPCSSScript내 용NNIEW3Ccolorcolor글자 색 설정4.03.0CSS1directiondirection글자를 표시하는 방향 설정CSS2letter-spacingletterSpacing글자 사이의 간격 설정6.03.0CSS1text-aligntextAlign글자의 정렬 설정4.04.0CSS1text-decorationtextDecoration글자의 꾸밈 및 형식 설정4.04.0CSS1text-indenttextIndent문단의 첫 줄 들여쓰기 설정4.04.0CSS1text-transformtextTransform대.소문자 변환 여부 설정4.04.0CSS1line-heightlineHeight줄 간격 설정4.04.0CSS1text-underline-positiontextUnderlinePosition밑줄이 그어지는 위치 지정5.5word-spacingwordSpacing단어 사이의 간격 설정6.0CSS1ime-modeimeMode입력모드 IME(한/영) 설정5.0CSS1 ○○ BACKGROUND(배경)TOPCSSScript내 용NNIEW3Cbackgroundbackground웹문서의 배경을 정의하며 각각의 속성값을 "," 없이 두 개 이상 설정 가능6.03.0CSS1background-attachmentbackgroundAttachment배경그림을 고정 또는 스크롤 설정6.03.0CSS1background-colorbackgroundColor배경색 설정4.04.0CSS1background-imagebackgroundImage배경그림 설정4.04.0CSS1background-positionbackgroundPosition배경그림 위치 설정6.03.0CSS1background-repeatbackgroundRepeat배경그림 반복 여부 설정4.04.0CSS1 ○○ BORDER(테두리)TOPCSSScript내 용NNIEW3Cborderborder테두리의 너비, 형식, 색을 설정 두 개이상 설정 가능4.04.0CSS1border-topborderTop위쪽 테두리의 너비, 형식, 색등을 설정6.03.0CSS1border-bottomborderBottom아래 테두리의 너비, 형식, 색등을 설정6.03.0CSS1border-leftborderLeft왼쪽 테두리의 너비, 형식, 색등을 설정6.03.0CSS1border-rightborderRight오른쪽 테두리의 너비, 형식, 색등을 설정6.03.0CSS1border-colorborderColor테두리의 색을 설정6.03.0CSS1border-top-colorborderTopColor위쪽 테두리의 색을 설정6.04.0CSS2border-bottom-colorborderBottomColor아래 테두리의 색을 설정6.04.0CSS2border-left-colorborderLeftColor왼쪽 테두리의 색을 설정6.04.0CSS2border-right-colorborderRightColor오른쪽 테두리의 색을 설정6.04.0CSS2border-styleborderStyle테두리 형식 설정6.03.0CSS1border-top-styleborderTopStyle위쪽 테두리 형식 설정6.04.0CSS2border-bottom-styleborderBottomStyle아래 테두리 형식 설정6.04.0CSS2border-left-styleborderLeftStyle왼쪽 테두리 형식 설정6.04.0CSS2border-right-styleborderRightStyle오른쪽 테두리 형식 설정6.04.0CSS2border-widthborderWidth테두리 두께 설정4.04.0CSS1border-top-widthborderTopWidth위쪽 테두리 두께 설정4.04.0CSS1border-bottom-widthborderBottomWidth아래 테두리 두께 설정4.04.0CSS1border-left-widthborderLeftWidth왼쪽 테두리 두께 설정4.04.0CSS1border-right-widthborderRightWidth오른쪽 테두리 두께 설정4.04.0CSS1 ○○ MARGIN(여백)TOPCSSScript내 용NNIEW3Cmarginmargin여백의 속성을 설정4.04.0CSS1margin-topmarginTop위쪽 여백 설정4.03.0CSS1margin-bottommarginBottom아래 여백 설정4.04.0CSS1margin-leftmarginLeft왼쪽 여백 설정4.03.0CSS1margin-rightmarginRight오른쪽 여백 설정4.03.0CSS1 ○○ PADDING(테두리와 내용과의간격 = 안쪽여백을 뜻함)TOPCSSScript내 용NNIEW3Cpaddingpadding테두리와 글자 사이 간격 설정4.0padding-toppaddingTop위쪽 테두리와 글자 사이 간격 설정4.04.0CSS1padding-bottompaddingBottom아래 테두리와 글자 사이 간격 설정4.04.0CSS1padding-leftpaddingLeft왼쪽 테두리와 글자 사이 간격 설정4.04.0CSS1padding-rightpaddingRight오른쪽 테두리와 글자 사이 간격 설정4.04.0CSS1 ○○ LIST(목록)TOPCSSScript내 용NNIEW3Cdisplaydisplay객체에 인라인 또는 블럭단위의 박스를 생성4.04.0CSS1list-stylelistStyle목록의 형식,위치,그림의 속성을 설정6.03.0CSS1list-style-imagelistStyleImage목록의 표시를 그림으로 설정6.03.0CSS1list-style-positionlistStylePosition목록 항목의 위치를 설정6.03.0CSS1list-style-typelistStyleType목록의 항목 표시자의 속성을 설정4.04.0CSS1 ○○ POSITION(위치)TOPCSSScript내 용NNIEW3Cheightheight영역의 높이를 설정6.03.0CSS1widthwidth영역의 너비를 설정4.04.0CSS1toptop상단 테두리에서 떨어진 간격 설정4.04.0CSS2bottombottom하단 테두리에서 떨어진 간격 설정5.0CSS2leftleft상단 테두리을 기준으로 왼쪽 간격을 설정4.04.0CSS2rightright상단 테두리을 기준으로 오른쪽 간격을 설정5.0CSS2clipclip4각형 Block Box를 지정하는 수치만큼 가려서 안 보이도록 설정6.04.0CSS2overflowoverflowwidth 속성이나 height 속성에 의해서 내용에 따라 화면의 크기를 제어6.04.0CSS2positionposition화면에 표시할 위치를 설정6.04.0CSS2visibilityvisibility화면에 표시 여부를 설정6.03.0CSS1z-indexzIndexNetscape의 <LAYER>와 같은 개념6.04.0CSS2 ○○ CLASSIFICATION(식별)TOPCSSScript내 용NNIEW3Ccursorcursor커서의 모양을 설정6.04.0CSS2floatfloat상위 요소안에서 좌.우로 이동할 것인가를 설정4.04.0CSS1clearclear상위 요소안에서 좌.우로 이동하지 않고 줄바꿈 설정4.04.0CSS1zoomzoom객체의 크기를 확대/축소5.5CSS1linklink링크 설정 : 링크관련 가상 클래스(link,visited,active,hover)3.0CSS1 ○○ TABLE(표)TOPCSSScript내 용NNIEW3Cborder-collapseborderCollapse표(TABLE)에 셀간격 설정5.0CSS2table-layouttableLayout테이블(표)의 테이블 셀(cell), 줄(row), 컬럼(column)들의 배치에 사용되는 기능5.0CSS2 ○○ Printing (프린트)TOPCSSScript내 용NNIEW3Cpage-break-afterpageBreakAfter프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정7.04.0CSS2page-break-beforepageBreakBefore프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정7.04.0CSS2 ○○ SCROLLBAR COLOR(스크롤바 색상)TOPCSS내 용NNIEW3Cscrollbar-3dlight-color스크롤바의 스클롤 박스와 화살표 박스의 상단과 왼쪽 가장 자리에 색상 설정5.5CSS1scrollbar-arrow-color스크롤바의 화살표 박스의 화살표에 색상을 설정5.5CSS1scrollbar-base-color스크롤바의 arrow, shadow, darkshadow를 제외한 기본적인 곳에 설정5.5CSS1scrollbar-darkshadow-color스크롤바의 스클롤 박스와 화살표 박스의 하단과 오른쪽 가장 자리에 색상 설정5.5CSS1scrollbar-face-color스크롤바의 스클롤 박스와 화살표 박스 그리고 트랙의 표면 설정5.5CSS1scrollbar-highlight-color스크롤바의 스클롤 박스와 화살표 박스의 상단과 왼쪽 가장 자리의 하이라이트 부분과 트랙 설정5.5CSS1scrollbar-shadow-color스크롤바의 스클롤 박스와 화살표 박스의 하단과 오른쪽의 그림자 부분 설정5.5CSS1scrollbar-track-color스크롤바의 트랙에 설정5.5CSS1 ○○ FILTER(필터)TOPCSSScript내 용NNIEW3CAlphaAlpha그림이나 글자에 투명도를 조정할 수 있는 명령어4.0BlurBlur흐리게 하는 효과4.0ChromaChroma지정된 특정색을 투명하게 하는 효과4.0DropshadowDropshadow특정위치에 그림자를 만들어 줍니다4.0FlipHFlipH이미지나 좌우가 바뀝니다.4.0FlipVFlipV이미지나 상하가 바뀝니다.4.0GlowGlow글자나 이미지에 지정된 색을 번지게 하는 효과를 나타냅니다4.0GrayGray흑백 이미지를 만듭니다.4.0InvertInvert색조, 순도, 명도(필름 효과)를 반전4.0LightLight조명 효과를 주어 이미지의 특정 부분을 밝게 해줍니다.4.0MaskMask불투명한 것은 투명한 마스크를 씌우고 투명한 것은 지정된 색으로 마스크를 씌워 줍니다.4.0ShadowShadow지정하는 색상과 방향으로 그림자를 만들어 줍니다.4.0WaveWave물결 형태의 웨이브를 만들어 주는 필터입니다. 공유하기 게시글 관리 Custom + Maker 저작자표시 'Lecture > CSS' 카테고리의 다른 글 [스크랩] IE css 핵 (0) 2013.04.21 [스크랩] hasLayout 속성과 홀리 핵(Holly hack) (0) 2013.04.21 관련글 [스크랩] IE css 핵 [스크랩] hasLayout 속성과 홀리 핵(Holly hack)