css

display : block 과 inline, ( inline-block 은 div에 float:left를 더한 효과 )

block : p, div

inline : a, span

inline방식은 width, height 적용되지 않는다. (display:block으로 변경해야 한다.)

width란 border를 제외한 content의 실제 크기이다.

> box-sizing:content-box // 전체 크기(width등)를 border 제외해서 계산

> box-sizing:border-box         // 전체 크기(width등)를 border 포함해서 계산  -> 계산하기 편함.

> *{box-sizing:border-box}

>> *{ } 전체선택자는 성능 이슈가 있다. 

font, color 속성은 하위에 상속된다.

마진겹침 현상

1. 마진이 겹칠때는 큰 값으로 한다.

2. 부모-자식 마진이 있을때, 그리고 부모가 투명한 경우(border가 0인 경우), 자식의 마진값은 부모를 건너 뛰어서 상위에 적용한다.

position

static

relative

absolute

fixed

기본 postion은 기본 static인데 left, top 같은 offset은 무시된다. (position을 바꿔야 left, top이 적용된다.)

position

relative : parent를 기준으로 left, top을 적용

absolute, fixed : 

left, top이 없으면 parent를 기준으로 위치함(left, top값이 원래 자리 값으로 자동으로 계산됨. 헐..)

> 부모의 사이즈에서 현재 사이즈를 제거하니, 부모의 사이즈가 줄어듬. 보통 height가 줄어든다. (부모는 자식을 없는셈 친다.)

> absolute한 자신의 사이즈도 컨텐트 사이즈로 줄어듬(block임에도 불구하고) -> width, height를 줘야 한다.

>> absolute, fixed 차이

> absolute : 가장 가까운 position=static이 아닌 부모를 찾아서 left, top을 적용(없으면 html 태그 기준)

> fixed : 무조건 html 태그 기준