[CSS] CSS layout 레이아웃 종류와 기본설명

CSS layout

CSS layout 기술은 웹페이지에 포함된 block level element들을 모아 원하는 위치에 배치할 수 있게 해준다.

 

• Normal flow
• Display 속성(flexbox, Grid Layout)
• Floats
• Positioning
• Multi-column layout
• Table layout

---

normal flow

normal flow는 페이지 레이아웃에 특정한 css 설정을 적용하지 않을 경우 브라우저가 기본값으로 html페이지를 배치하는 방법이다.

 

여기서 기본값이란
block level element는 부모요소의 너비 100%, content의 최대 높이가 되고, 항상 새로운 줄에서 시작한다.
inline level element는 content의 최대 너비와 높이가 되고, 새로운 줄에서 시작하지 않으며, 필요한 너비만을 차지한다.
inline element의 크기는 설정할 수 없다.

 

See the Pen Untitled by Eunji Jeon (@emcjrl) on CodePen.

 

 inline element의 크기를 설정하기 위해서는 display: block; 또는 display: inline-block; 를 지정하여 block level element의 성격으로 바꿔줘야 한다.

display 속성(flexbox, Grid Layout)

flexbox와 Grid는 공간을 최대한 효과적으로 사용할 수 있도록 콘텐츠 사이의 공간을 배분하고 정렬하는 강력한 기능을 제공한다. 반응형 디자인에서 많이 사용되며, 브라우저 크기에 따라 자동으로 재배치 된다.

 

flexbox는수평, 수직 중 하나의 방향으로만 레이아웃을 다룰 수 있는 1차원적인 레이아웃이다.
부모 요소에 display: flex; 를 선언하여 시작한다.

Grid Layout은 수평, 수직 방향으로 동시에 레이아웃을 다룰 수 있는 2차원적인 레이아웃이다.
부모 요소에 display: grid; 를 선언하여 시작한다.

Floats

float은 block level element를 가로로 정렬하기 위한 방식이다.
한 block level element를 배치하고 형식을 설정하여 주변 block level element의 동작을 제어하는 데 사용된다.
콘텐츠를 한쪽으로 배치하여 normal flow에서 벗어나게 하고, 주변 콘텐츠가 그 주위를 감싸 띄워지게 된다.

 

Positioning

normal flow속에 있는 요소를 기존의 위치에서 분리시켜 다른 위치로 이동시킬 수 있다.
예를 들어 다른 요소 위에 놓거나, 브라우저 뷰포트 내부의 동일한 위치에 항상 있게끔 할 수 있다.

 

Multi-column layout

신문에서 볼 수 있는 레이아웃처럼 block level element를 단으로 배치하는 방식이다.

 

Table layout

표로 되어있는 데이터를 표시하기에는 무난하나, 
유연성이 떨어지는 등 많은 문제점이 있어 지금은 많이 사용되고 있지 않다.