CSS STUDY

PADDING

padding-top

padding-right

padding-bottom

padding-left

padding-left:1px;

padding:TOP RIGHT BOTTOM LEFT;

padding:TOP RIGHT BOTTOM LEFT;

padding:1px;

padding:1px 2px;

padding:1px 2px 3px;

padding:1px 2px 3px 4px;

MARGIN

margin-top

margin-right

margin-bottom

margin-left

margin-left:1px;

margin:TOP RIGHT BOTTOM LEFT;

MARGIN COLLAPSING

서로 다른 요소에 수직 방향의 마진이 접해 있는 경우

두 값의 합이 아닌 둘 중에 큰 값이 적용

BORDER

border-bottomborder-bottom-colorborder-bottom-styleborder-bottom-width

border-topborder-top-colorborder-top-styleborder-top-width

border-leftborder-left-colorborder-left-styleborder-left-width

border-rightborder-right-colorborder-right-styleborder-right-width

borderborder-colorborder-styleborder-width

border-collapseborder-spacing

WIDTH STYLE COLORborder border border

1px soliddotted

dasheddoublegrooveridgeoutsetinset

#fff

border-left:WIDTH STYLE COLOR;

border-style: STYLE STYLE STYLE STYLE;

border:WIDTH STYLE COLOR;

WIDTH, HEIGHT

min-width

max-width

min-height

max-height

BACKGROUND

background-color

background-image

background-repeat

background-attachment

background-position

background:COLOR IMAGE REPEAT ATTACHMENT POSITION;

background:#fff url(bg.gif) repeat-x fixed 5px 5px;

IMAGE REPLACEMENT

의미가 포함된 이미지를 배경으로 사용하고

그와 같은 의미의 텍스트를 숨겨

시각이 있는 사용자에게는 이미지를 보여주고

스크린리더는 텍스트를 읽게 만드는 기법

IMAGE SPRITE

IR기법에 사용 될 이미지를 그룹화 하여

네트워크 리퀘스트 및 용량을 줄이는 기법

사용 빈도

+

이미지의 전체적 색상

+

background-repeat 종류

HASLAYOUT

각각의 요소가 어떻게 렌더링되고

다른 요소들과 어떻게 상호작용 하는지를

결정하는 윈도우즈 버전 IE만의 독자적인 개념

LAYOUT?

흔히 발생하는 IE의 float 버그

기본 속성(width, height 등)이 표준과 다르게 적용되는 박스

요소와 컨테이너(container) 사이에 마진(margin)이 합쳐지는 현상

리스트(ul, ol 등)를 만들 때 나타나는 다양한 현상들

배경 이미지 위치를 다르게 해석하는 문제

스크립트를 사용할 때 발생하는 브라우저 호환성 문제

기타 등등 주절주절주절

position: absolute

float: left|right

display: inline-block

width: ‘auto’외의 모든 값

height: ‘auto’외의 모든 값

zoom: ‘normal’외의 모든 값 (IE 전용)

writing-mode: tb-rl (IE 전용)

overflow: hidden|scroll|auto (IE7만 적용됨)

overflow-x|-y: hidden|scroll|auto (IE7만 적용됨)

position: fixed, min-width, max-width, min-height, max-height (IE 7만)

IE6 이상의 표준 렌더링 모드에서는 인라인 요소의 width, height 속성이 무시

zoom:1;