웹사이트 레이아웃를 코딩 하다 보면 자주 사용하는 레이아웃은 이제는 너무 쉽지만
그래도 아직 고민에 고민을 하고 특이한 방법 또는 제이쿼리를 활용한 레이아웃을 코딩 하는 경우도 많다.
하지만 이제는 이런 고민 없이 Flexble Box 하나만 마스터 한다면 쉬운 일이다.
그렇다고 Flexble Box가 만능은 아니다.
아주 옛날에는 table를 활용한 웹사이트가 주축이였다.
화면 구성이 다양해 지면서 table 엘리먼트의 문제점이 이슈가 되면서 다양한 방안들이 나왔다.
그리고 사실 table은 레이아웃을 구성하는 엘레먼트도 아니다.
그런 문제점을 해결 해주듯 CSS가 활성화 되면서 div의 엘리먼트에 display 또는 float를 활용하여 많이 레이아웃을 좀더 쉽게 만들 수 있게 되었다.
하지만 이 또한 특정 레이아웃을 코딩 할때 불필요한 코딩을 해야 하는 경우가 많았다.
이 모든 걸 해결해줄 CSS3의 Flex가 나오고 너무 쉽게 레이아웃을 구성 할 수 있다.
<목차>
1. Flexbox1 - Flexible Box 개념
2. Flexbox2 - 부모(Container)요소의 모든것
3. Flexbox3 - 자식(Items)요소의 모든것
Flexible Box 개념
flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공 하는 CSS3의 새로운 레이아웃 방식이다.
flexbox의 장점을 복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다.
정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다.
Flexible Box 구성
Flex는 부모(Container)와 자식(items)요소 두가지를 기억하면 됩니다.
Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수입니다.
주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있다는 것입니다.
flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content
flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order
으로 구성 되어 있다.
flexbox를 만드는 방법은 간단하다. 정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언하면 된다.
| .flex_container { display: flex; } | cs |
아래의 예제는 한개의 div 부모(container)에 3개의 div 자식(items)으로 구성된 html 마크업 이다.
부모(container)에 flex를 정의하면 자식(items)의 주축(main-axis)를 기준으로 정렬을 합니다.
Flexbox의 장점을 정리해 보면 아래와 같다.
- 1줄의 코드 추가로 수평 정렬이 가능하다.
- 요소의 상하좌우 정렬, 순서 변경이 간단하다.
- 요소가 간격 조절이 간단하다.
- 서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다.
위 반응형 레이아웃 예시는 Flexible box의 최소한의 속성으로 만들었다.
반응형 레이아웃의 기본 코드이며, 미디어쿼리를 활용하여 넓이(max-width)값이 425px되면 "Content Area"와 "Aside Area"이 상하 정렬을 하며, "Aside Area"은 상단으로 배치 되도록 코딩 되어 있다.
지금 모바일에서 접속한 상태라면 지금 상태가 설명처럼 되어 있을 것이다.
데스크탑으로 접속하였다면 상단에 [Html]/[CSS]탭를 클릭하면 반응하는 모습을 확인 할 수 있다.
지금까지는 flex의 기본 개념에 대해 이야기 하였다.
부모(container)와 자식(items)를 나누어 설명을 계속 하겠다.
1. Flexbox1 - Flexible Box 개념
2. Flexbox2 - 부모(Container)요소의 모든것 [강좌바로보기] 3. Flexbox3 - 자식(Items)요소의 모든것 [강좌바로보기]
<참고>
구 브라우저에서도 사용하고 싶은 경우 Flexibility를 사용하면 된다 - [사이트방문]
:: 강좌 안내 ::
Flexbox를 활용한 레이아웃 만들기
강좌1. 기본형 레이아웃 Desktop 버전
강좌2. 기본형 레이아웃 Mobile 버전
강좌3. 기본형 레이아웃 반응형 버전
본 강좌는 프로젝트 Zi-Layouts를 겸하는 강좌 입니다.
빠른 시일 공개 하도록 하겠습니다.
:: 안내글 ::
본 게시물은 지속적으로 업데이트 될 수 있습니다.
정리를 하고 하여도 빼먹는 부분이 있거나, 설명이 부족하여 그림을 추가 삽입 할 수 있습니다.
내용이 이해가 안되는 부분은 댓글을 남겨 주시면 확인 후 추가 하도록 하겠습니다.
감사합니다.