CSS 레이아웃 (position, flex, grid)

🚩 CSS 레이아웃(CSS Layout)이란?

CSS 레이아웃이란 다양한 CSS 요소들을 배치하고, 배열하는 것을 말한다. CSS 레이아웃에는 크게 포지션(Position), 플렉스박스(Flexbox), 그리드(Grid)라는 세 가지 개념이 있다.

---

0. Normal Flow & display 속성

Normal Flow

기본적으로 HTML, CSS 요소들은 글의 흐름대로 배치되며 이런 일반적인 글의 흐름을 노말 플로우(Normal Flow)라고 한다.
포지션은 노말 플로우에서 벗어나 위치를 직접 정하는 방식이고, 플렉스 박스는 박스를 만들고 방향을 정해 요소를 배치하는 방식이다. 그리드는 바둑판처럼 칸을 나눈 다음 요소를 배치하는 방식이다.

display 속성

디스플레이(display)는 글의 흐름에서 요소를 어떻게 배치할지 정하는 CSS 속성이며, 모든 요소는 디스플레이 속성을 기본으로 가지고 있다. 디스플레이 속성에는 블록, 인라인, 인라인블록이 있다.

	블록(display: block;)	인라인(display: inline;)	인라인블록(display: inline-block)
기본 크기	좌우로 꽉참	content에 딱 맞게	content에 딱 맞게
배치	위에서 아래로	글 쓰는 방향	글 쓰는 방향
width와 height	O	X	O
margin과 padding	O	인라인 진행방향(가로)만 가능	O

---

1. position 속성

글의 흐름에서 벗어나 요소를 자유롭게 배치할 때 쓰는 속성이다. position의 속성값에 따라 위치를 정하는 기준이 달라진다. position: static;이 기본값이고, 이 경우 요소는 원래 있어야 할 위치에 배치된다. 또한 이 position의 값을 static이 아닌 다른 속성으로 지정했을 경우(relative, absolute... 등), 포지셔닝 되었다고 말한다.

위치 정하기

위치를 정하는 기준에 대해 top, right, bottom, left 속성으로 위치를 정할 수 있다. 또한 네 가지 값이 모두 똑같은 경우 inset속성을 쓸 수 있다.

position: relative;

요소의 원래 위치를 기준으로 배치한다. 이때 요소의 원래 자리는 그대로 차지하고 있다.

.green {
   position: relative;
   top: 15px;
   left: 10px;
}

position: absolute;

포지셔닝이 된 가장 가까운 조상 요소를 기준으로 배치된다.
아래 예시에서는 가장 가까운 조상 요소인 .red가 relative포지션이므로, 자손인 .blue는 .red를 기준으로 배치된다. 이때 .blue는 원래 있어야 할 위치에서 완전히 빠지게 되어 요소의 원래 자리는 차지하지 않는다.

.red {
  position: relative; 
  top: 0;
  left: 10px;
}
.blue {
  position: absolute;
  right: 10px;
  bottom: 15px;
}

position: fixed;

브라우저 화면을 기준으로 고정된다. 또한 원래 있어야 할 위치에서 완전히 빠지게 되므로, 요소의 원래 자리는 차지하지 않는다. 주로 내비게이션바를 만들 때 자주 사용한다.

position: sticky;

static처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤되면 fixed처럼 고정되어 배치된다. 기본적으로 static처럼 배치되기 때문에 요소의 원래 자리를 차지한다.
다음 코드는 브라우저 화면 기준으로 top: 0만큼 떨어졌을 때 화면에 달라붙음을 의미한다.

position: sticky;
top: 0;

또한 sticky속성을 지정한 요소는 부모요소에 소속되는 특성을 가지므로, 부모요소가 화면 밖으로 사라지면 따라서 사라진다.

z-index

요소의 앞뒤 정렬을 정할 때 쓰는 속성이다. 정렬 순서이기 때문에 단위 없이 숫자값만 쓰며, 값이 높을수록 화면의 앞쪽에 보인다. 만약 값이 같으면 코드상 순서에 따라 아래 줄에 있는 요소가 앞쪽에 보인다. 기본값은 z-index: auto;이다.

---

2. 플렉스 박스 (display: flex;)

플렉스 박스는 1차원으로 요소를 배치한다. 즉 가로 또는 세로 방향으로 배치하는 방식을 말한다. 플렉스 박스를 사용하기 위해서는 우선 배치할 방향(flex-direction)을 정한 후 다음과 같은 속성들을 활용할 수 있다.

flex-direction : 플렉스 박스 배치 방향 (row 또는 column)
justify-content, align-items : 기본축, 가로축 정렬
flex-wrap : 요소가 넘칠 떄
gap : 간격
flex-grow, flex-shrink : 크기를 늘이거나 줄일 때
flex-basis

기본 배치 방향 & 정렬

플렉스 박스를 사용하기 위해 기본 배치 방향(flex-direction)을 정해야 한다.

.box {
   display: flex;
   flex-direction: row; /* row는 가로, column은 세로로 배치. 기본값은 row */
}

이렇게 flex-direction을 기준으로 아래 그림과 같이 기본 축(Main Axis)과 교차 축(Cross Axis)이 정해진다.

또한 기본 축 정렬로 justify-content속성과 교차 축 정렬로 align-items속성을 사용할 수 있다.

.box {
   display: flex;
   flex-direction: row;
   justify-content: flex-start; /* 기본값 flext-start */
   align-items: stretch; /* 기본값 stretch */
}

요소가 넘칠 때, flex-wrap

플렉스 박스 안에서 요소가 넘칠 때, flex-wrap: wrap으로 설정하면 교차 축 방향으로 넘어가서 배치된다.

.box {
   flex-wrap: wrap;
}

간격 gap

기본 축, 교차 축과는 관계 없이 세로 가로 순으로 값을 입력한다.

.box {
   gap: 20px 10px;
}
.box2 {
   gap: 20px; /* 숫자를 하나만 쓰면, 모든 방향의 간격을 지정할 수 있음 */
}

요소 채우기, flex-grow & flex-shrink

요소를 늘려서 채우기 flex-grow

기본값은 0이다. flex-grow값이 클수록 상대적으로 많이 늘어난다.

요소를 줄여서 채우기 flex-shrink

기본값은 1이다. 요소들의 크기가 커서 넘치는 경우, 요소의 크기를 줄여 플렉스 박스 안을 채운다. 기본값이 1이기 때문에 기본적으로 요소를 줄여서 배치하고, 0으로 지정하면 크기가 줄어들지 않는다. 또한 flex-shrink 값이 클수록 상대적으로 많이 줄어든다.

플렉스 박스 안에서의 포지셔닝

relative, sticky는 요소의 원래 자리를 차지하기 때문에 플렉스박스의 영향을 받지만, absolute와 fixed는 요소의 원래 자리에서 완전히 제외되기 때문에 플렉스박스랑 상관없이 배치된다.

---

3. 그리드 (display: grid;)

그리드는 2차원으로 요소를 배치
그리드 라인(개발자 도구에섭 보이는 것은 그리드 라인임. 셀아님!!!!), 그리드 셀

격자 나누기

grid-template-columns
grid-template-rows
grid-template

.box {
   grid-template: 
     100px 200px 100px /    /* rows */
     100px 200px 100px;    /* columns */
}

기본적으로 그리드 크기는 고정
fr : 그리드 공간 안에서 비율에 맞게 설정 가능(fraction)
minmax(x, y) : 최소(x), 최대(y) 크기 설정
repeat(x, y) : x를 y번

간격

gap: 세로 가로; 또는 gap: 모든 간격; - 플렉스박스의 갭과 같은 속성이다. 그리드 셀 간에 간격을 준다.

크기 미리 정하기

grid-auto-rows
grid-auto-columns

grid template에서 rows 또는 columns 속성을 명시하지 않았을 때
auto-rows 또는 auto-clumns 값을 적용한다.

그리드 라인 번호로 배치

grid-row
grid-column

이름으로 배치

그리드 컨테이너 요소에 grid-template-areas 속성 설정
그리드 셀 요소들에 grid-area 속성으로 이름 설정

---