CSS layout
CSS 에서 layout 이란 사이트 전체 디자인이나 배열을 일관성 있게 재배치 가능하게 하는 기능을 말한다.
일반적으로 웹 사이트는 수직으로 구성된 레이아웃이기 때문에 위아래로 스크롤하게 되어있다.
웹 페이지를 구성할 때 웹 요소들이 block 개념으로 dispay 되며 이 요소들은 위에서 아래로 쌓이기 때문에 수직 구성의 레이아웃은 쉽게 만들 수 있다.
수평 구성 레이아웃의 경우에는 table 이나 float inline-block 속성으로 만들 수는 있지만, 명확하게 정해져 있지 않아 다양한 문제들에 직면할 수 있다.
이러한 수직, 수평 구성 레이아웃을 만드는 방법은 세가지정도가 있다.
CSS 박스모델의 레벨 속성을 이용한 layout
📌 block-level 과 inline-level 엘리먼트들을 자유롭게 배치하여 레이아웃을 만든다.
displaypositionfloat속성을 사용
플렉스 박스 레이아웃 (flex box layout)
📌 수직 또는 수평을 주축으로 하여 flex item 들을 flex container 에 자유롭게 배치하여 레이아웃을 만든다.
12개의 속성들이 플렉스 컨테이너에 적용하는 속성과 플렉스 아이템에 적용하는 속성으로 분류된다.
CSS 그리드 레이아웃 (css grid layout)
📌 수직 수평 상관없이 퍼즐 맞추듯 grid item 을 grid container 에 자유롭게 배치하여 레이아웃을 만든다.
15개의 속성들이 그리드 컨테이너에 적용하는 속성과 그리드 아이템에 적용하는 속성으로 분류된다.
첫번째 방법인 레벨 속성을 이용한 레이아웃은 css 박스모델 관련된 글로 정리했으니 두번째 방법인 플렉스 박스 레이아웃에 대해 정리해보자 !
플렉스 박스 레이아웃 (flex box layout)
수직 또는 수평을 주축으로 하여 flex item 들을 flex container 에 자유롭게 배치하여 레이아웃을 만든다. 명확하게 정해져 있지 않던 수평 구성 레이아웃을 만들 수 있게 하고, 수직 구성 레이아웃 또한 어려움 없이 만들 수 있게 한다.
<style>
.container {
display: flex;}
</style>
<html>
...
<div class="container">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
...
</html>위 코드는 플렉스 박스 레이아웃을 사용할 때의 일반적인 구조를 의미한다.
여러개의 요소를 자식으로 두고 있는 부모 요소에 display: flex; 스타일을 적용시키게 되면 부모 요소는 flex container 가 되고, 자식 요소들은 flex item 이 된다.
각각 적용시키는 속성이 분류되기 때문에 컨테이너인 부모 요소와, 아이템인 자식 요소를 구분하여 해당 요소에 맞는 속성을 적용시키는 것이 중요하다.
flex box 의 구조
flex box 는 플렉스 아이템 flex item 들을 감싸는 플렉스 컨테이너 flex container 와, 수평방향인 주축 (main axis) 과 주축 시작점 (main start) , 주축 끝점 (main end) 그리고 수직방향인 교차축 (cross axis) 과 교차축 시작점 (cross start) , 교차축 끝점 (cross end) 로 구성된다.
flex container 의 속성
컨테이너에 적용할 수 있는 속성은 총 7개이다.
| 속성 | 설명 |
|---|---|
| display | 컨테이너를 block 또는 inline 레벨로 정의 |
| flex-flow | flex-direction 과 flex-wrap 의 단축형 속성 |
| flex-direction | 아이템의 주축을 지정 |
| flex-wrap | 줄바꿈 지정 |
| justify-content | 주축 기준으로 아이템 정렬 방식 지정 |
| align-items (1줄) | 교차축 기준으로 아이템 정렬 방식 지정 |
| align-content (2줄) | 교차축 기준으로 아이템 정렬 방식 지정 |
🍒 display
<style>
.container {
display: flex;}
div {
border: 1px solid black;
padding: 10px;
margin: 10px;}
</style>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
<div class="container">
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>flex container 의 정렬 방식을 지정하는 속성이다.
속성값으로는 flex 와 inline-flex 가 있다.
flex
- 컨테이너의 속성을
block-level로 정의한다. - 컨테이너 안의 아이템들이 수평으로 정렬되며 자신이 가진 너비값만큼만 너비를 차지한다.
inline-flex
- 컨테이너의 속성을
inline-block-level로 정의한다. - 컨테이너 안의 아이템들이 수평으로 정렬되며 자신이 가진 너비값 만큼만 너비를 차지한다.
inline-block처럼 동작한다.
display속성은 직접적으로 플렉스 아이템들의 배치를 지정하는 속성이 아니다. 둘 중 어느 속성값을 사용해도 컨테이너 안의 아이템들은 수평으로 정렬된다.
결과적으로 이 속성은 컨테이너간의 배치 방식을 지정하는 속성이기 때문에 개별 아이템의 레벨 속성과는 별개이다.
또한inline-flex속성값은 컨테이너 자체를 인라인블록 레벨로 정의하기 때문에 두개 이상의 컨테이너가 연속으로 위치해있을 경우에만 그 값이 영향을 미친다.
아래 코드는flex 속성을 정의하지 않았을 때이다. 각 div 가 어떻게 보이는지 비교해보자.
🍒 flex-flow
<style>
.container {
flex-flow: flex-direction flex-wrap;}
</style>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
<div class="container">
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>flex-item 의 수평/수직 정렬 방식을 지정하는 속성인 flex-direction 값과
flex-item 의 줄바꿈 속성인 flex-wrap 값을 한번에 지정할 수 있는 단축형 속성이다.
🍒 flex-direction
<style>
.container {
flex-direction: 속성값;}
</style>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>플렉스 아이템의 수평/수직 정렬 방식을 지정하는 속성이다.
속성값으로는 수평 정렬방식을 지정하는 row row-reverse
수직 정렬방식을 지정하는 column column-reverse 가 있다.
📒 수평(가로) 정렬 지정
row : 기본값, 아이템을 왼쪽에서 오른쪽으로 수평 정렬한다.
row-reverse : 아이템을 오른쪽에서 왼쪽으로 (row 의 역순으로) 수평 정렬한다.
row일 때
row-reverse일 때
📒 수직(세로) 정렬 지정
column : 기본값, 아이템을 위쪽에서 아래쪽으로 수직 정렬한다.
column-reverse : 아이템을 아래쪽에서 위쪽으로 (column 의 역순으로) 수직 정렬한다.
column일 때
column-reverse일 때
🍒 flex-wrap
<style>
.container {
flex-wrap: 속성값;}
</style>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>플렉스 아이템을 브라우저 사이즈에 따라 줄바꿈을 할 것인지 지정하는 속성이다.
속성값으로는 nowrap wrap wrap-reverse 가 있다.
nowrap : 기본값, 줄 바꿈을 하지 않는다.
wrap : 브라우저 사이즈가 줄어들면 자동으로 줄바꿈하여 여러줄을 표시한다.
wrap-reverse : 브라우저 사이즈가 줄어들면 역순으로 줄바꿈하여 표시한다.
nowrap이 아닌, 줄바꿈을 설정하는 두 속성값은 브라우저 창을 (IOS 기준) command+(+) 로 확대해보면 알 수 있다.wrap속성값을 부여한다면 브라우저 창이 늘거나 줄어들면서 정순으로 줄바꿈 된다. (한줄이 꽉차면 아래로 다음줄 생성)wrap-reverse속성값을 부여한다면 역순으로 줄바꿈 된다. (한줄이 꽉차면 위로 다음줄 생성)
flex-wrap: wrap일 때
flex-wrap: wrap-reverse일 때
🍒 justify-content
<style>
.container {
justify-content: 속성값;}
</style>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>컨테이너의 주축 main-axis 을 기준으로 플렉스 아이템의 정렬 방식을 지정하는 속성이다.
속성값으로는 flex-start flex-end center space-between space-around 가 있다.
flex-start : 기본값, 아이템의 시작점으로부터 수평 정렬한다.
flex-end : 아이템의 끝점으로부터 수평 정렬한다.
center : 아이템을 가운데에 위치 시키고 수평 정렬한다.
space-between : 아이템을 각 시작점과 끝점에 위치시키고 여백을 동일하게 수평 정렬한다.
space-around : 아이템의 여백을 균등하게 나누어 수평 정렬한다.
flex-start: 기본값, 아이템의 시작점으로부터 수평 정렬한다.
flex-end:아이템의 끝점으로부터 수평 정렬한다.
center: 아이템을 가운데에 위치 시키고 수평 정렬한다.
space-between: 아이템을 각 시작점과 끝점에 위치시키고 여백을 동일하게 수평 정렬한다.
space-around: 아이템의 여백을 균등하게 나누어 수평 정렬한다.
🍒 align-items
<style>
.container {
align-items: 속성값;}
</style>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>컨테이너의 교차축 cross-axis 을 기준으로 플렉스 아이템의 정렬 방식을 지정하는 속성이다.
아이템이 한 줄일 경우 주로 사용하는 속성이다.
속성값으로는 stretch flex-start flex-end center baseline 가 있다.
stretch : 기본값, 아이템의 높이를 늘려 수직으로 가득 채운다.
flex-srart : 아이템의 시작점으로부터 수직 정렬한다.
flex-end : 아이템의 끝점으로부터 수직 정렬한다.
center : 아이템을 가운데로 수직 정렬한다.
baseline : 아이템을 문자 기준선을 기준으로 수직 정렬한다.
flex-wrap속성 사용으로 인해 아이템이 여러줄 (2줄 이상) 일 경우에는align-content속성이 우선으로 적용된다. 아이템이 2줄 이상일 때align-items속성을 사용하고자 한다면align-content속성의 속성값을 기본값인stretch로 지정해야 함을 기억하자.
justify-content: center속성과align-item: center속성을 함께 써주면 큰 레이아웃에서의 배치나 작은 버튼 아이콘의 배치를 쉽게 한 가운데에 정렬할 수 있다.
stretch: 기본값, 아이템의 높이를 늘려 수직으로 가득 채운다.
flex-srart: 아이템의 시작점으로부터 수직 정렬한다.
flex-direction속성의 속성값에 따라 시작점의 위치가 달라진다.
flex-direction속성의 속성값이row일 경우에는 위,column일 경우에는 왼쪽이 시작점이 된다.
flex-direction속성의 속성값이column일 때 (align-items: flex-start)
flex-end: 아이템의 끝점으로부터 수직 정렬한다.
flex-direction속성값에 따라 끝점의 위치가 달라진다.
flex-direction의 속성값이row일 경우에는 아래,column일 경우에는 오른쪽이 끝점이 된다.
flex-direction속성의 속성값이column일 때 (align-items: flex-end)
center: 아이템을 가운데로 수직 정렬한다.
baseline: 아이템을 문자 기준선을 기준으로 수직 정렬한다.
각 문자의
font-size에 속성값을 다르게 부여했을 때 눈에 띄는 속성값이다.
🍒 align-content
<style>
.container {
align-items: 속성값;}
</style>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>컨테이너의 교차축 cross-axis 을 기준으로 플렉스 아이템의 정렬 방식을 지정하는 속성이다.
아이템이 두 줄일 경우 주로 사용하는 속성이다.
속성값으로는 stretch flex-start flex-end center space-between space-around 가 있다.
stretch : 기본값, 아이템의 높이를 늘려 수직으로 가득 채운다.
flex-start : 아이템의 시작점으로부터 수직 정렬한다.
flex-end : 아이템의 끝점으로부터 수직 정렬한다.
center : 아이템을 가운데로 수직 정렬한다.
space-between : 아이템을 각 시작점과 끝점에 위치시키고 여백을 동일하게 수평 정렬한다.
space-around : 아이템의 여백을 균등하게 나누어 수평 정렬한다.
stretch: 기본값, 아이템의 높이를 늘려 수직으로 가득 채운다.
flex-start: 아이템의 시작점으로부터 수직 정렬한다.
flex-end: 아이템의 끝점으로부터 수직 정렬한다.
center: 아이템을 가운데로 수직 정렬한다.
space-between: 아이템을 각 시작점과 끝점에 위치시키고 여백을 동일하게 수평 정렬한다.
space-around: 아이템의 여백을 균등하게 나누어 수평 정렬한다.
