[부스트코스] CSS layout

엘리먼트를 화면에 배치하는 것을 Layout 작업이라고 하고, Rendering 과정이라고도 합니다.

기본적으로 엘리먼트는 위에서 아래로 배치됩니다.

더 다양한 방식으로 배치할 수 있도록 다양한 속성이 제공되고 있는데요.

오늘은 이 속성에 대해 공부해보도록 하겠습니다!

 

display

- block / inline-block

: 위에서 아래로 쌓이는 레이아웃 속성입니다.

 

- inline

: 왼측에서 우측으로 빈자리를 차지하며 흐르듯이 엘리먼트가 공간을 차지하는 속성입니다.

높이와 넓이를 지정해도 반영이 되지 않습니다.

 

position

엘리먼트가 상대적/절대적으로 배치되도록 하는 속성입니다.

-staitic (기본)

: 순서대로 배치

 

- absolute

: 기준점을 상위엘리먼트로 단계적으로 찾아가는데 static이 아닌 position이 기준점입니다.

top/left/right/bottom으로 설정할 수 있습니다.

 

- relative

: 원래 자신이 위치해야 할 곳을 기준으로 이동하는 속성입니다.

absolute와 마찬가지로 top/left/right/bottom으로 설정할 수 있습니다.

 

-fixed

: 전체화면을 기준으로 동작합니다.

 

margin

: border를 기준으로 바깥에 해당하는 영역의 간격을 설정하는 속성입니다.

top/right/bottom/left 순서로 설정할 수 있습니다.

 

float

: 원래 flow에서 벗어나 둥둥 떠다니는 듯한 배치입니다.

보통 웹사이트의 전체 레이아웃 배치에서 유용하게 활용됩니다.

 

box-model

: 블록 엘리먼트의 경우에 box의 크기와 간격에 관한 속성으로 배치를 추가 결정합니다.

margin, padding, border, outline으로 설정할 수 있습니다.

+ box-shadow 속성을 이용하여 border밖에 테두리를 그릴 수 있습니다.

 

padding

: border 내의 영역의 간격을 설정하는 속성입니다.

이 속성으로 엘리먼트의 크기가 달라질 수 있습니다.

엘리먼트의 크기는 고정하고 padding 값만 늘리기 위해 box-sizing을 이용합니다.

 

 

[출처: https://www.edwith.org/boostcourse-web/lecture/16677/]