repl.it 18-2 Layout의 모든것?

📚 display?

Display css 요소는 html의 block level의 요소들의 layout을 제어할 때 사용하는 property이다.

Display property	설명	추가
none	선택한 요소를 나타내지 않을 때 사용	사용법 › position: none;
inline	선택한 요소를 inline 레벨 요소로 나타낼 때 사용	*inline: 요소들의 너비 및 화면 size에 따라 배치할 때 사용, width/height 적용불가, padding/margin은 좌/우만 적용가능
inline-block	선택한 요소를 inline-block 레벨 요소로 나타낼 때 사용	*inline과 block의 속성을 모두 가진다. width/height로 요소의 크기를 지정할 수 있으며 padding/margin을 좌/우에도 적용가능하다.
block	선택한 요소를 block 레벨 요소로 나타낼 때 사용	*block: 1개 요소에 1줄이 할당되어 배치되며 가로폭은 화면사이즈만큼 차지한다.

📚 position?

block level의 요소들의 layout을 좀 더 세밀하게 제어할 때 사용하는 property이다.

Position property	설명	추가
static (default)	아무것도 지정되지 않은 값이다.	위치가 지정되지 않은것이라고 표현함
relative	현재 요소의 위치에서 상대적인 위치로 이동할 때 사용(별도 *property 추가 사용 필요)	* top/bottom/left/right
absolute	별도의 property를 추가로 지정하여 가장 가까운 부모(위치가 지정된) 위치에서 상대적인 위치로 이동할 때 사용	*위치가 지정됐다 = static이 아닐 때, 위치가 지정된 상위 요소가 없다면 본문 문서 위치를 기준으로 삼는다.
fixed	별도의 property를 추가로 지정하여 본문 위치에서 상대적으로 위치를 지정하고 해당 요소를 고정할 때 사용한다.	사용법 › display: fixed;

📚 float?

기본적으로는 text와 img의 layout을 가로로 배치할 때 사용하는 property이다. flexbox 기능을 제공하지 않는 IE에서는 float를 html layout을 제어하기 위한 용도로 사용하기도 한다.

Float property	설명	추가
left	float가 지정된 요소를 block의 좌측에 붙일 때 사용
right	float가 지정된 요소를 block의 우측에 붙일 때 사용
none(default)	float가 지정되지 않았을 때 기본 값

✨float와 같이 쓰이는 추가 요소

추가 property	설명	추가
margin-*	float가 적용된 요소 주변에 다른 block들을 배치할 때 같이 사용한다.	* › left/right/bottom/top