![[CSS] flexbox를 이용한 레이아웃(이미지, div 등) 가운데 정렬하는 법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbFWG1J%2FbtqCl89NZ6M%2FlANY3eqd3yMtJKonRizei0%2Fimg.png)
[CSS] flexbox를 이용한 레이아웃(이미지, div 등) 가운데 정렬하는 법
(글쓴날 : 2020.03.02)
* 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다.
* CSS3를 기준으로 작성되었습니다.
CSS 레이아웃(이미지, div 등) 중앙 정렬 방법
1) flexbox란?
간단하게 설명하자면 flexbox란 CSS3에서 새롭게 추가된 웹 레이아웃 모델로, 개발자들이 기존 CSS의 position, float, display 등의 속성들로 해결하기 힘들었던 문제들을 쉽고 유연하게 구현할 수 있도록 제공하는 기능입니다.
주로 1차원 레이아웃의 공간 배분 및 정렬을 하기 위해 설계되었으며, 행과 열 중점의 2차원 레이아웃을 다루는 Grid 레이아웃과는 지향점이 조금 다르니 각자의 상황에 맞게 골라 쓰시면 될 것 같습니다!
2) flexbox로 가운데 정렬하기
그럼 바로 본론으로 들어가 flexbox를 이용해 가운데 정렬을 해보겠습니다.
먼저 CSS 파일에서 가운데 정렬을 적용할 요소에 display 속성을 flex로 전환해 줍니다.
(만약, 정렬할 레이아웃에 속한 요소들이 여러 개일 시 display 속성을 flex로 전환하면 flex의 기본(default) 방향이 row여서 행 기준으로 나열되게 됩니다. 놀라지 마시고 flex-direction 속성을 column으로 지정하면 다시 열을 기준으로 나열됩니다.)
그 후, flex 요소의 행을 지정하는 속성인 justify-content와 열을 지정하는 속성인 align-items에 각각 center로 지정하면 행과 열의 가운데로 요소들이 정렬되어 위치하게 됩니다.
(ex)
|
1
2
3
4
5
6
7
8
9
10
11
12
|
적용할 레이아웃 선택자(빨간색 박스) {
display: flex;
justify-content: center;
align-items: center;
height: 250px;
width: 250px;
font-size: 3vmax;
font-weight: bold;
color: white;
background-color: red;
}
|
* 결과 화면
이어서, 빨간색 박스 또한 가운데로 중앙 정렬을 해보겠습니다.
위의 알려드린 방법과 마찬가지로, 빨간색 박스의 부모 요소 display 속성을 flex로 지정한 뒤 justify-content와 align-items 속성을 center로 지정해 주시면 되겠습니다.
(ex)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
적용할 레이아웃 선택자(빨간색 박스 부모 요소) {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
적용할 레이아웃 선택자(빨간색 박스) {
display: flex;
justify-content: center;
align-items: center;
height: 250px;
width: 250px;
font-size: 3vmax;
font-weight: bold;
color: white;
background-color: red;
}
|
* 결과 화면
여기까지, CSS에서 flexbox를 이용해 레이아웃을 가운데로 중앙 정렬하는법을 알아보았습니다.
flexbox에는 가운데 정렬을 위한 방법 말고도 여러가지 속성과 수많은 유용한 기능들이 존재합니다.
flexbox에 대해 관심이 있거나 더 알고 싶으신 분들은...
* Mozilla MDN 웹 문서의 flexbox 문서 : Mozilla MDN 웹 문서의 flexbox 문서
Basic concepts of flexbox
The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. This article gives an outline of
developer.mozilla.org
위의 Mozilla MDN 웹 문서의 flexbox 문서를 참조하시면 되겠습니다.
감사합니다!
'Deprecated' 카테고리의 다른 글
| [LeetCode] 리트코드 1365번 How Many Numbers Are Smaller Than the Current Number(Python) (0) | 2020.03.04 |
|---|---|
| [LeetCode] 리트코드 1342번 Number of Steps to Reduce a Number to Zero(Python) (0) | 2020.03.03 |
| [CSS] 레이아웃 height 100%로 동작하게 하는 법 (2) | 2020.03.01 |
| [Baekjoon Online Judge] 백준 1065번 한수(Python) (2) | 2020.02.29 |
| [Baekjoon Online Judge] 백준 4673번 셀프 넘버(Python) (0) | 2020.02.29 |