CSS - 3. 레이아웃 기본

레이아웃 기본

inline VS Block level

inline level element: 화면의 일부를 차지하는 태그

block level element: 화면 전체를 사용하는 태그

display: inline | block 속성을 사용하면 inline을 block으로 block을 inline으로 사용 가능.

박스 모델

border-width: 경계 두께

border-style: 경계 스타일(ex. solid, dotted)

border-color: 경계 색상

border: border-width border-style border-color

padding: 경계와 content 사이의 간격

margin: 경계 바깥과 다른 요소 사이의 간격

width, height: block level element에 대해 넓이, 높이 지정

box-sizing

• content-box(default- 컨텐트 크기만큼 width와 height 지정)

• border-box(border 기준으로 width와 height 지정)

margin-collapsing(마진겹침)

1. 인접 태그 마진에서 두 마진 값 중 큰 값으로 상쇄되어 렌더링.

2. 부모 엘리먼트, 자식 엘리먼트 모두 마진 값이 있을 경우에 부모 태그가 시각적으로 아무런 효과가 없는 투명한 상태가 되면 자식 태그와 부모 태그의 마진 값이 큰 값으로 상쇄되어 렌더링.

3. 어떤 태그에 시각적인 요소가 없다면 그 태그의 마진 값은 더 큰 값으로 상쇄되어 렌더링.

포지션(position)

엘리먼트가 화면 상의 어디에 위치할 것인가를 결정

• offset(top, left, right, bottom): top, left우선

• position

  • static(default - offset을 무시하고 정적으로 위치)

  • relative(부모 엘리먼트를 기준으로 상대적으로 offset에 따라 위치)

  • absolute(static이 아닌 다른 값의 position이 나타날 때까지 무시하다가 position 값이 지정된 부모 위치를 기준으로 절대적으로 offset에 따라 위치, 부모와의 관계성이 끊기기 때문에 크기가 자신의 콘텐트 크기만 해지고, 부모엘리먼트의 크기는 자식 엘리먼트의 크기를 포함하지 않는다.)

  • fixed(화면 상에 고정, 크기가 자신의 콘텐트 크기만 해지고, 부모엘리먼트의 크기는 자식 엘리먼트의 크기를 포함하지 않는다.)