CSS 2nd

기본문법

.classname .classname				{}
#idname								{}

표시

  • display : inline , block, inline-block, none
    inline-table, list-item, run-in,
    table, table-caption, table-column-group, table-header-group, table-footer-group, table-row-group, table-cell, table-column, table-row, inherit
  • visibility : visible, hidden, collapse, inherit

넘침

  • overflow : visible, hidden, scroll, auto, inherit

흐름

  • float : left, right, none, inherit
  • clear : left, right, both, none , inherit

위치

  • position : static, relative, absolute, fixed, inherit
  • top : pixels, pt, em, %
  • right : pixels, pt, em, %
  • left : pixels, pt, em, %
  • bottom : pixels, pt, em, %
  • z-index : 숫자

리스트 디자인

테이블 디자인

  • table-layout : auto, fixed;

코드단축

font 단축 속성

구문 : { font: font-style | font-variant | font-weight | font-size | line-height | font-family }
예제 : { font: 0.75em/1.4em 돋음, san-serif; }

margin 단축 속성

구문 : { margin: margin-top | margin-right | margin-bottom | margin-left }
예제 : { margin: 1em 2em 3em 4em; }

padding 단축 속성

구문 : { padding: padding-top | padding-right | padding-bottom | padding-left }
예제 : { padding: 1em 2em 3em 4em; }

border 단축 속성

구문 : { border: border-width | border-style | color }
예제 : { border: 1px dotted #123456; }

border-top, border-right, border-botoom, border-left 단축 속성

구문 : { border-top: border-width | border-style | color }
예제 : { border-top: 1px dotted #123456; }

list-style 단축 속성

구문 : { list-style: list-style-type | list-style-position | list-style-image }
예제 : { list-style: URL(“hooney.gif”) inside disc; }

background 단축 속성

구문 : { background: background-color | background-image | background-repeat | background-attachment | background-position }
예제 : {background: #123456 URL(“hooney.net”) no-repeat center left; }