CSS Layout의 이해 - position, display, float

🗓2020년 02월 28일 ∙ 🖊TutorialPost ∙ ⏳3분

css에서 웹문서의 레이아웃을 지정하고 수정하기 위한 중요한 속성인 position, display, float 속성에 대해 확인해 봅니다.

position

엘리먼트에 CSS 속성으로 position을 지정하여 속성의 상대적, 절대적 위치를 지정할 수 있게됩니다.

div { 
  position: static;
  top: 10px;
  left: 50px;
}

position 요소는 위와 같은 형식으로 지정하며, 지정한 속성값에 따라 위치를 조정합니다.

position	description
static	기본값. 부모 요소를 기준으로 한 위치로써, 자식 엘리먼트의 크기에 따라서 부모 엘리먼트의 크기가 자동으로 변경되게 됩니다. left, top, right, bottom과 같은 offset은 무시됩니다.
relative	자기 자신의 위치를 기준으로한 상대적인 위치로서, top, left, right, bottom 등의 속성값을 지정해 기준 위치로부터 얼마나 떨어진 지점에 해당 요소를 배치할 것인지 지정할 수 있게됩니다. 자식 엘리먼트의 크기에 따라서 부모 엘리먼트의 크기가 자동으로 변경되지만, 엘리먼트의 위치에 따라서는 변경되지 않습니다.
absolute	부모 요소의 위치를 기준으호 한 상대 위치를 지정합니다. 부모 요소는 반드시 `relative` 포지션 이어야 하며, 요소의 크기가 부모 요소의 크기에 반영되지 않으므로 주의해야 합니다.
fixed	브라우저 창을 기준으로 위치를 지정합니다. 전체 문서를 기준으로 위치가 정해지므로 부모 엘리먼트의 위치와는 무관합며 따라서 요소의 크기가 부모 요소의 크기에 반영되지 않습니다. 또한 스크롤의 영향을 받지 않고 위치가 고정되므로 주로 특정 UI 요소를 브라우저 화면에 고정할 때 사용하게 됩니다.

display

HTML의 각각의 요소들은 요소의 특성에 따라 block 혹은 inline 속성을 가지고 있습니다. 예를 들어 p 태그의 경우 문단을 정의하는 태그이므로 block 요소가 기본값입니다. span 태그의 경우는 텍스트 내부에서 특정 부분의 꾸밈에 주로 사용되며 기본적으로 inline 요소입니다.

하지만 경우에 따라 이러한 요소의 속성을 변경해야할 경우가 있으며, 이럴때 display 속성을 이용해 요소를 블럭 요소, 인라인 요소 등으로 변경할 수 있습니다.

기본적인 사용법

div {
  display: block;
}

속성값

block : 해당 요소를 block 요소로 만든다.
inline : 해당 요소를 inline 요소로 만든다.
inline-block : 해당 요소를 inline-block 요소로 만든다.
none : 해당 요소를 보이지 않게 한다.
flex : 해당 요소를 flexbox 요소로 만든다.
grid: 해당 요소를 grid 요소로 만든다.

flex

Flexbox는 UI 레이아웃 디자인에 최적화된 CSS 모듈입니다. display 속성의 값을 flex 로 지정하게 되면 flexbox 속성을 사용하게 되며, 기존에 사용되던 float 등의 방식보다 손쉽게 문서의 레이아웃을 작성할 수 있습니다.

container 용 속성

display - flex 사용하기
flex-direction - item 블럭이 쌓이는 방향을 지정. row column
flex-wrap - 아이템들의 크기가 container 크기를 넘어설 경우 크기를 줄일지 말지를 결정
align-items - 각각의 item들이 column 방향으로 차지하는 공간을 지정.
justify-content - 각각의 item들이 row 방향으로 차지하는 공간을 지정.
align-content - 각각의 아이템들 정렬하기

/* FLEX 사용하기 */
.container {
  display: flex;
  flex-direction: column;
  /* row | row-reverse | column | column-reverse */
  
  flex-wrap: wrap; 
  /* nowrap | wrap | wrap-reverse */
  
  align-items: center; 
  /* stretch | flex-start | flex-end | center | baseline */
  
  justify-content: center; 
  /* flex-start | flex-end | center | space-between | space-around */
  
  align-content: flex-end;
  /* stretch | flex-start | flex-end | center | space-between | space-around */
}

item 용 속성

flex-grow - 아이템이 차지하는 공간의 비율을 지정. 0부터 숫자가 클수록 공간을 많이 차지.
flex-shrink - 아이템이 차지하는 공간의 비율을 지정. 0부터 숫자가 클수록 공간을 적게 차지.
flex-basis - 아이템이 차지하는 크기 고정. flex 방향에 따라 너비/높이가 지정됨.
flex - grow shrink basis
order - 아이템 중 우선할 항목을 숫자로 지정. 기본값은 0부터 순차적으로 메겨져있다.
align-self - 개별 아이템의 align을 지정.

.item {
  flex-basis: 300px;
  /* 0 | px | % */
  flex-grow: 1
  /* 0 | 1~ */
  flex-shrink: 1
  /* 0 | 1~ */
  flex: 1 2 100px;
  order: -1;
  /* 0 | -1~ */
  align-self: auto;
  /* auto | flex-start | flex-end | center | baseline| stretch */
}

flex를 이용해 요소의 자식 요소를 가운데로 정렬하는 예시

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

float

float은 flexbox 이전에 많이 사용되던 레이아웃 방식으로, 인터넷 익스플로어가 여전히 유효한 한국에서는 여전히 많이 사용되는 레이아웃 방식입니다.

사용법은 요소에 float 속성을 정의해 사용하게 됩니다.

div {
  float: right;
}

float 레이아웃 예시

float을 이용해 레이아웃을 구성하는 기본적인 예시입니다. 이때, float되지 않는 요소는 clear: both 속성을 이용해 float을 해제해 주어야 합니다.

.wraper {
  width: 400px;
}

.navigation {
  float: left;
  width: 100px;
  background-color: aliceblue;
}

.content {
  float: right;
  width: 300px;
  background-color: white;
}

.footer {
  clear: both;
  background-color: gray;
  color: white;
}