1. Float 이전과 이후
CSS에서 레이아웃은해당 컨텐츠들의 배열을 얼마나 호율적으로 배치하는 것에 있어서 가장 중요한 요소라고 할 수 있겠습니다. 이러한 레이아웃을 효율적으로 배치하기 위해서 사용되는 속성은 크게 세 가지,
Float,Flex,Grid속성이 있는데요.
Flex와Grid가 등장하기 전까지 주로Float으로 요소 배치를 진행해 왔는데요. 이Float속성도 원래는 요소 배치가 주 목적은 아니였고, 사용에 문제가 좀 있었다고 합니다. 그러다가 각각flex와grid의 등장으로 현재는 거의 사장되었고,반응형 웹사이트 구축이 주축을 이루는 요즘은 PC와 모바일에 따라 적절한 크기로 반응이 가능하도록 해주는
flex와grid위주로 효율적인 레이아웃 배치를 하고 있다고 합니다.
2. Flex(Container)
flex는 해당 태그를 flex-container로 만들어 준 후 그 태그 안의 자식 요소들을 item으로 만들어 해당 item들을 유연하게 배치 할 수 있도록 해주는 역할을 합니다. 이Flex는 작은 단위의 레이아웃 구성 할 때 주로 사용되며, 단일 행과 열에 대한 아이템 배치에 주 목적을 두고 있다고 보시면 되는데요.이
flex를 사용하기 위해서는 우선 상위 태그(컨테이너)의display속성을flex로 설정 후 각각의 아이템들의 배치에 대한 추가적인 속성들을 지정해주면 되는데요. 해당 속성들은 다음과 같습니다.
flex-wrap: 해당 아이템들을 어떻게 묶을지를 결정 하는 속성입니다. 즉 컨테이너의 크기에서 해당 아이템들의 넓이가 컨테이너의 크기를 넘어섰을 때 아이템들의 배치를 어떻게 정해줄지 결정하는 속성인데요.값을 nowrap 으로 지정할 경우 이 경우 container의 크기에 상관 없이 줄바꿈을 하지 않고 한 줄로만 아이템들을 정렬하며,
이와 반대되는 wrap 값으로 지정시 container의 height 값에 상관 없이container의 가로 크기를 유지하면서 줄바꿈을 실행합니다.
flex-direction: container의 중심축을 결정하는 요소입니다. 속성은 row(가로 정렬), column(세로 정렬), row-reverse(아이템들의 순서를 바꾸어 가로 정렬), column-reverse(아이템들의 순서를 바꾸어 세로 정렬) 이 있습니다. 기본 default 값은 row입니다.
justify-content: 해당 flex-direction의 정렬 중심축을(main-axis) 기준으로 해당 item들을 정렬하는 방법들을 의미합니다. 기본 default 값은 flex-start 이며 content는 flex-wrap과 같이 사용 되는 경우가 많습니다.만약 flex-direction이 column일 경우 justify-content에 값을 지정시 해당 값들도 수직으로 적용이 됩니다. 속성에 적용 가능한 값들은 다음과 같습니다.
- flex-start(해당 정렬축의 시작 지점부터 정렬)
- flex-end(해당 정렬축의 끝 지점에 붙어), center(해당 정렬축의 가운데 정렬)
- space-between(item 간의 균일한 간격으로 가로 정렬)
- space-around(item들 개별로 양쪽에 균일한 여백을 맞춥니다.)
- space-evenly(item들 간 뿐만 아니라 양쪽 끝단의 여백 또한 균일하게 여백을 맞춥니다.)
align-items: 해당 flex-direction의 메인 중심축에 반대 되는 교차축(cross-axis)을 기준으로 해당 item들을 정렬하는 방법들을 의미하며, default값은 stretch(컨텐츠의 처음부터 끝까지 영역으로 설정하는 속성)이고, baseline(각 줄 문자의 기준선을 기준으로 정렬)을 제외하면 justify-content와 동일하게 사용 됩니다.⭐ flex-direction의 값에 따라 justify-content와 align-items의 방향이 달라집니다. 만약 해당 속성이 row일 경우 justify-content는 가로, align-items는 그와 반대되는 교차축인 세로에 아이템들을 정렬하지만 column일 경우 justify-content와 align-items가 반전되어 적용되기 때문에 이 부분을 주의하시기 바랍니다.
3. Flex(elements)
이렇게 flex 속성을 이용해 container의 item 정렬을 일관되게 설정 할 수 있지만 개별 아이템 들에도 적용이 가능한 속성들은 존재하는데요. 해당 속성들은 다음과 같습니다.
order: 아이템의 정렬 순서를 정의하며 default값은 0(순서 없음) 이고 숫자가 작을수록 우선권을 가지며 음수 적용도 가능합니다.단 order 속성을 하나의 아이템에만 1 이상의 수를 적용시 다른 아이템들은 default 값이 0이기 때문에 가장 마지막에 배치되므로 통일성을 위해 다른 아이템들에 대한 order 값을 지정해 주어야 한다는 번거로움이 존재합니다.
flex-grow: container 수평 공간을 각각의 아이템들이 어느 정도의 비율로 차지할 것인지를 설정합니다. default 값은 0(증가 없음)입니다.
flex-shrink: grow와 반대 되는 개념으로 default 값은 1이므로 0에 가까워 질수록 아이템의 가로 비율이 줄어듭니다.
flex-basis: 컨테이너를 차지하는 각 아이템들의 너비 비율을 의미합니다. 기본 값은 0이며, auto를 설정시 해당 요소의 컨텐츠의 너비에 맞춰서 요소의 너비도 조절이 됩니다. 이 속성을 container에 적용하면 각 item들의 비율이 일정 너비를 가지고, 개별 아이템에 적용도 가능합니다.⭐ 이 basis의 값에 따라 grow와 shrink의 지정 비율도 달라지기 때문에 초기 basis의 비율을 설정하는 것이 중요합니다.
align-self: 개별적인 flex 아이템에 대해 교차 축(cross axis)에서의 정렬을 조절하는 데 사용됩니다. 이 속성을 사용하면 해당 아이템만 다르게 정렬되고, 나머지 아이템들은 물려 받은 부모의 속성(align-items)를 유지합니다.
