CSS Reference 레퍼런스

CSS (Cascading Style Sheet) CSS (Cascading Style Sheet)란 무엇인가? CSS (Cascading Style Sheet)의 기본 구조(대/소문자 구분,주석처리) CSS (Cascading Style Sheet)를 HTML 문서에 삽입하는 방법 CSS (Cascading Style Sheet) 사용하는 단위 HTML4.0,CSS 정식 색상 코드 시스템 색상(User Preference Color) CSS (Cascading Style Sheet)의 장점 Vs 단점 CSS (Cascading Style Sheet) 메뉴얼 파일(.chm) 링크 타입(link type) ? ㅁ 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 CSS Script 내 용 NN IE W3C font font 글꼴에 관련된 속성을 설정 4.0 4.0 CSS1 font-family fontFamily 글꼴이름을 설정 4.0 3.0 CSS1 font-size fontSize 글자 크기를 설정 4.0 3.0 CSS1 font-style fontStyle 글자의 형태를 설정 4.0 4.0 CSS1 font-variant fontVariant 글자의 대/소문자 설정 6.0 3.0 CSS1 font-weight fontWeight 글자의 두께 설정 4.0 4.0 CSS1

TEXT(글자) TOP CSS Script 내 용 NN IE W3C color color 글자 색을 설정 4.0 3.0 CSS1 direction direction 글자를 표시하는 방향설정 CSS2 letter-spacing letterSpacing 글자 사이의 간격을 설정 6.0 3.0 CSS1 text-align textAlign 글자의 정렬을 설정 4.0 4.0 CSS1 text-decoration textDecoration 글자의 꾸밈 및 형식 설정 4.0 4.0 CSS1 text-indent textIndent 문단의 첫 줄을 들여쓰기 설정 4.0 4.0 CSS1 text-transform textTransform 글자의 대.소문자 변환 여부를 설정 4.0 4.0 CSS1 line-height lineHeight 줄 간격을 설정 4.0 4.0 CSS1 text-underline-position textUnderlinePosition 밑줄이 그어지는 위치 지정 5.5 word-spacing wordSpacing 단어 사이의 간격을 설정 6.0 CSS1 ime-mode imeMode 입력 할수 있는 곳에 대해서 IME 설정 5.0 CSS1

BACKGROUND(배경) TOP CSS Script 내 용 NN IE W3C background background 웹문서의 배경을 정의하며 각각의 속성값을 "," 없이 두 개 이상 설정 가능 6.0 3.0 CSS1 background-attachment backgroundAttachment 배경그림을 고정 또는 스크롤 설정 6.0 3.0 CSS1 background-color backgroundColor 배경색 설정 4.0 4.0 CSS1 background-image backgroundImage 배경그림 설정 4.0 4.0 CSS1 background-position backgroundPosition 배경그림 위치 설정 6.0 3.0 CSS1 background-repeat backgroundRepeat 배경그림 반복 여부 설정 4.0 4.0 CSS1

BORDER(테두리) TOP CSS Script 내 용 NN IE W3C border border 테두리의 너비, 형식, 색을 설정 두 개이상 설정 가능 4.0 4.0 CSS1 border-top borderTop 위쪽 테두리의 너비, 형식, 색등을 설정 6.0 3.0 CSS1 border-bottom borderBottom 아래 테두리의 너비, 형식, 색등을 설정 6.0 3.0 CSS1 border-left borderLeft 왼쪽 테두리의 너비, 형식, 색등을 설정 6.0 3.0 CSS1 border-right borderRight 오른쪽 테두리의 너비, 형식, 색등을 설정 6.0 3.0 CSS1 border-color borderColor 테두리(테두리)의 색을 설정 6.0 3.0 CSS1 border-top-color borderTopColor 위쪽 테두리의 색을 설정 6.0 4.0 CSS2 border-bottom-color borderBottomColor 아래 테두리의 색을 설정 6.0 4.0 CSS2 border-left-color borderLeftColor 왼쪽 테두리의 색을 설정 6.0 4.0 CSS2 border-right-color borderRightColor 오른쪽 테두리의 색을 설정 6.0 4.0 CSS2 border-style borderStyle 테두리 형식 설정 6.0 3.0 CSS1 border-top-style borderTopStyle 위쪽 테두리 형식 설정 6.0 4.0 CSS2 border-bottom-style borderBottomStyle 아래 테두리 형식 설정 6.0 4.0 CSS2 border-left-style borderLeftStyle 왼쪽 테두리 형식 설정 6.0 4.0 CSS2 border-right-style borderRightStyle 오른쪽 테두리 형식 설정 6.0 4.0 CSS2 border-width borderWidth 테두리 두께 설정 4.0 4.0 CSS1 border-top-width borderTopWidth 위쪽 테두리 두께 설정 4.0 4.0 CSS1 border-bottom-width borderBottomWidth 아래 테두리 두께 설정 4.0 4.0 CSS1 border-left-width borderLeftWidth 왼쪽 테두리 두께 설정 4.0 4.0 CSS1 border-right-width borderRightWidth 오른쪽 테두리 두께 설정 4.0 4.0 CSS1

MARGIN(여백) TOP CSS Script 내 용 NN IE W3C margin margin 여백의 속성을 설정 4.0 4.0 CSS1 margin-top marginTop 위쪽 여백 설정 4.0 3.0 CSS1 margin-bottom marginBottom 아래 여백 설정 4.0 4.0 CSS1 margin-left marginLeft 왼쪽 여백 설정 4.0 3.0 CSS1 margin-right marginRight 오른쪽 여백 설정 4.0 3.0 CSS1

PADDING(테두리와 내용과의간격 = 안쪽여백을 뜻함) TOP CSS Script 내 용 NN IE W3C padding padding 테두리와 글자 사이 간격 설정 4.0 padding-top paddingTop 위쪽 테두리와 글자 사이 간격 설정 4.0 4.0 CSS1 padding-bottom paddingBottom 아래 테두리와 글자 사이 간격 설정 4.0 4.0 CSS1 padding-left paddingLeft 왼쪽 테두리와 글자 사이 간격 설정 4.0 4.0 CSS1 padding-right paddingRight 오른쪽 테두리와 글자 사이 간격 설정 4.0 4.0 CSS1

LIST(목록) TOP CSS Script 내 용 NN IE W3C display display 객체에 인라인 또는 블럭단위의 박스를 생성 4.0 4.0 CSS1 list-style listStyle 목록의 형식,위치,그림의 속성을 설정 6.0 3.0 CSS1 list-style-image listStyleImage 목록의 표시를 그림으로 설정 6.0 3.0 CSS1 list-style-position listStylePosition 목록 항목의 위치를 설정 6.0 3.0 CSS1 list-style-type listStyleType 목록의 항목 표시자의 속성을 설정 4.0 4.0 CSS1

POSITION(위치) TOP CSS Script 내 용 NN IE W3C height height 영역의 높이를 설정 6.0 3.0 CSS1 width width 영역의 너비를 설정 4.0 4.0 CSS1 top top 상단 테두리에서 떨어진 간격 설정 4.0 4.0 CSS2 bottom bottom 하단 테두리에서 떨어진 간격 설정 5.0 CSS2 left left 상단 테두리을 기준으로 왼쪽 간격을 설정 4.0 4.0 CSS2 right right 상단 테두리을 기준으로 오른쪽 간격을 설정 5.0 CSS2 clip clip 4각형 Block Box를 지정하는 수치만큼 가려서 안 보이도록 설정 6.0 4.0 CSS2 overflow overflow width 속성이나 height 속성에 의해서 내용에 따라 화면의 크기를 제어 6.0 4.0 CSS2 position position 화면에 표시할 위치를 설정 6.0 4.0 CSS2 visibility visibility 화면에 표시 여부를 설정 6.0 3.0 CSS1 z-index zIndex Netscape의 <LAYER>와 같은 개념 6.0 4.0 CSS2

CLASSIFICATION(식별) TOP CSS Script 내 용 NN IE W3C cursor cursor 커서의 모양을 설정 6.0 4.0 CSS2 float float 상위 요소안에서 좌.우로 이동할 것인가를 설정 4.0 4.0 CSS1 clear clear 상위 요소안에서 좌.우로 이동하지 않고 줄바꿈 설정 4.0 4.0 CSS1 zoom zoom 객체의 크기를 확대/축소 5.5 CSS1 link link 링크 설정 : 링크관련 가상 클래스(link,visited,active,hover) 3.0 CSS1

TABLE(표) TOP CSS Script 내 용 NN IE W3C border-collapse borderCollapse 표(TABLE)에 셀간격 설정 5.0 CSS2 table-layout tableLayout 테이블(표)의 테이블 셀(cell), 줄(row), 컬럼(column)들의 배치에 사용되는 기능 5.0 CSS2

Printing (프린트) TOP CSS Script 내 용 NN IE W3C page-break-after pageBreakAfter 프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정 7.0 4.0 CSS2 page-break-before pageBreakBefore 프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정 7.0 4.0 CSS2

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

FILTER(필터) TOP CSS Script 내 용 NN IE W3C Alpha Alpha 그림이나 글자에 투명도를 조정할 수 있는 명령어 4.0 Blur Blur 흐리게 하는 효과 4.0 Chroma Chroma 지정된 특정색을 투명하게 하는 효과 4.0 Dropshadow Dropshadow 특정위치에 그림자를 만들어 줍니다 4.0 FlipH FlipH 이미지나 좌우가 바뀝니다. 4.0 FlipV FlipV 이미지나 상하가 바뀝니다. 4.0 Glow Glow 글자나 이미지에 지정된 색을 번지게 하는 효과를 나타냅니다 4.0 Gray Gray 흑백 이미지를 만듭니다. 4.0 Invert Invert 색조, 순도, 명도(필름 효과)를 반전 4.0 Light Light 조명 효과를 주어 이미지의 특정 부분을 밝게 해줍니다. 4.0 Mask Mask 불투명한 것은 투명한 마스크를 씌우고 투명한 것은 지정된 색으로 마스크를 씌워 줍니다. 4.0 Shadow Shadow 지정하는 색상과 방향으로 그림자를 만들어 줍니다. 4.0 Wave Wave 물결 형태의 웨이브를 만들어 주는 필터입니다. 4.0 Xray Xray X-ray 사진 같은 효과를 나타내 주는 필터입니다. [출처] CSS Reference 레퍼런스 |작성자 셀레베스