CSS Layout: Element가 배치되는 방법

[Element가 배치되는 방식]

- 렌더링 과정 / 레이아웃 작업

- 일반적으로 위에서 아래로 순서대로 블럭을 이루며 배치됨

- 하지만 웹사이트의 배치는 다양하게 표현 가능해야 하므로, CSS에서 추가적인 속성을 제공

- display 속성 (block / inline / inline-block) 

- position 속성 (static / absolute / relative / fixed)

- float 속성 (left / right)

[display 관련]

- display: block

- display 속성이 block 이거나 inline-block 이면 그 element는 어떠한 영역(블록)을 가지고 쌓임

- 화면에 위에서 아래로 쌓이듯 채워짐

- 대부분 display: block 속성을 기본으로 가지고 있음, display: inline 속성을 명시하여 기본 속성을 변경할 수 있음

- display: inline

- display 속성이 inline 이면 우측으로, 아래쪽으로 빈자리를 차지하며 흐름

- inline 속성의 element는 높이와 너비를 지정해도 반영되지 않음

- span / a / strong 같은 태그들은 display: inline 속성을 기본으로 가지고 있음, display: block 속성을 명시하여 기본 속성을 변경할 수 있음

- display: inline 속성을 기본으로 가진 태그는 많지 않음

[position 관련]

- 기본 틀에서 벗어난 배치를 위해 position 속성을 사용

- 상대적 / 절대적으로 어떤 위치에 element를 배치하는 것이 수월함

- position: static

- 기본 속성. 순서대로 배치됨

- position: absolute

- 상위 element의 static이 아닌 position을 기준점으로 설정

- top / left / right / bottom 으로 설정

- top / left 값을 명시하는 것이 좋음

- position: relative

- 원래 자신이 위치해야 할 곳을 기준으로 이동

- top / left / right / bottom 으로 설정

- position: fixed

- viewport(전체 화면) 좌측, 맨 위를 기준으로 동작, 전체 화면에서의 절대 좌표

[margin]

- 위 / 아래 / 좌 / 우 element와 본인 간의 간격

- margin-top / margin-bottom / margin-left / margin-right

- margin: 25px 0px 10px 3px; : top 25px, right 0px, bottom 10px, left 3px 적용 (시계 방향)

- margin: 30px; : 상하좌우 30px 적용

[float 관련]

- 원래 flow에서 벗어나거나 둥둥 떠다닐 수 있음, 예외적

- block element가 float된 element를 인식하지 못하고 중첩되어 배치됨

[box-model]

- margin / border / padding / content

- margin으로 element 간 간격을 만들어낼 수 있음

- border는 경계선

- padding으로 content와 element의 원래 크기 사이의 간격을 만들어낼 수 있음

- box-shadow 속성으로 그림자(border 밖 테두리)를 만들어줄 수 있음

- box-sizing 속성

- box-sizing: content-box 가 기본

- box-sizing: border-box 로 해줄 수 있음. 원래 크기를 최대한 유지하려고 함

[Element의 크기]

- block element의 크기는 기본적으로 부모의 크기를 가짐

[정리]

- 전체 레이아웃은 float를 잘 사용해서 2/3단 컬럼 배치를 구현

- css-grid / flex 속성 등을 사용할 수 있음

- 특별한 위치에 배치할 때는 position: absolute를 사용, 기준점은 relative로 설정

- 내비게이션 같은 element는 display: inline-block 속성을 사용하여 가로로 배치할 수 있음

- element 안의 텍스트 간격과 다른 element 간 간격은 padding과 margin 속성을 활용하여 위치시킴