0528-TIL

1. CSS 레이아웃 관련 속성

• box-model
• inline , inline-block , block
• float
• position

1.1 box-model

박스 모델은 요소(element)를 표현하기 위한 규칙으로 요소를 박스로 표현하고 이 박스는 4개의 박스(content, padding, border, margin)로 구성되어 있다.

1.2 block , inline , inline-block

컨텐츠의 크기와 줄바꿈 측면의 비교

• block의 width 는 부모 width까지 늘어날 수 있다. 지정안하면 부모의 width를 받는다. 줄바꿈을 유발한다.
• inline은 width,height 설정이 가능하지 않고 자신이 포함하는 컨텐츠 만큼만 가진다.
• inline-block 기본적으로 inline 처럼 줄바꿈안되나 width와 height값 지정이 가능하다.

1.3 float

float 는 부유라는 뜻으로 화면에 떠있는것이다. float를 통해 기본적인 문서배치의 흐름을 변경할 수 있지만, float 때문에 레이아웃이 뭉개질 수 있다.
자식요소에 float속성이 부여되면 부모요소의 height가 0이되는 경우가 존재한다.

1.4 position

position은 static , relative , absolute , fixed , sticky(최신추가) 5가지 속성이 존재한다.

absolute를 적용하기위해서는 부모를 relative를 주어야한다. absolute는 부모기준으로 적용되며 fixed는 전체기준으로 적용된다.