플렉스 레이아웃 이해하기
HTML 요소를 화면에 간편하게 배치할 수 있게 하는 표준입니다.
1. 플렉스박스 레이아웃이란?
display스타일 속성에 flex라고 설정하고 그 안에 콘텐츠 아이템을 배치한 것을 의미합니다. 이때 플렉스 컨테이너는
inline과 block의 성질을 완전히 무시합니다.
| 클래스 이름 | 의미 |
| flex | display: flex |
2. flex-direction 스타일 속성
CSS는 flex-direction이란 display설정값이 flex일때만 사용 할 수 가 있습니다. row와 row-reverse, colum과 colum-reverse등 4가지가 있으며 기본값은 row입니다.
row, row-reverse 속성값은 수평으로 배치가 되고 reverse인경우는 오른쪽에서 왼쪽으로 배치를 합니다.
반면 colum, colum-reverse는 수직으로 배치가 됩니다. reverse인경우는 아래에서 위로 배치가 됩니다.
| 클래스 이름 | 의미 |
| flex-row | flex-direction: row; |
| flex-row-reverse | flex-direction: row-reverse; |
| flex-col | flex-direction: column; |
| flex-col-reverse | flex-direction: column-reverse; |
3. overflow 스타일 속성
컨테이너 크기가 고정되었을 때 콘텐츠의 크기가 컨테이너 보다 크면 오버플로가 발생합니다. 이때 크기를 넘어가지 않도록 hidden값을 설정하거나 넘어서도 표시되게 visible값을 설정하고나 스크롤해서 볼수있게 scroll값을 설정하거나 합니다.
| 클래스 이름 | 의미 |
| overflow-auto | overflow:auto |
| overflow-hidden | overflow:hidden |
| overflow-visible | overflow:visible |
| overflow-scroll | overflow:scroll |
4. flex-wrap 스타일 속성
사람의 글은 수평으로 진행하며 글을 쓸 여분이 없으면 줄바꿈으로 하여 계속 글을씁니다. CSS에서는 이런방식을 랩이라고 하며 wrap으로 설정하면 콘텐츠를 더이상 수평으로 배치할 수 없을 때 자동으로 다음 줄에 배치합니다.
flex-wrap은 HTML 순서대로 진행하는 wrap과 HTML 순서의 반대 wrap-reverse 그리고 랩을 하지않는 nowrap등 3가지 설정을 할수있으면 기본값은 nowrap입니다.
| 클래스 이름 | 의미 |
| flex-wrap | flex-wrap: wrap |
| flex-wrap-reverse | flex-wrap: wrap-reverse |
| flex-nowrap | flex-wrap: nowrap |
flex-wrap 왼족부터 수평으로 배치하다가 아래로 줄바꿈하지만
flex-wrap-reverse 왼쪽부터 수평으로 배치하다가 위로 줄바꿈을 하는 형태로 배치됩니다.
flex-nowrap은 수평 바향 여백이 없으므로 일부다 화면 밖으로 나가 보이지 않습니다.
4. min-width와 max-widht 스타일 속성
웹브라우저의 크기를 변경하려면 넓이를 100%처럼 퍼센트 단위를 사용하는 컨테이너들은 이에 맞춰 자신의 넓이를 늘리거나 줄여서 웹 브라우저 폭의 100%를 유지합니다.
CSS는 이런 상황을 조정할 수 있도록 min-width와 max-width, min-height와 max-height 스타일 속성을 제공합니다.
즉, 부모 컨테이너의 크기에 대응하는 콘텐츠의 최소, 최대 크기를 설정하는 용도 입니다.\
테일윈드CSS는 min-w-숫자, max-w-숫자, min-h-숫자, max-h-숫자로 클래스가 제공됩니다.
min,max치를 설정한 숫자만큼 늘어나거나 줄어들지가 않습니다.
5. justify-content와 align-items 스타일 속성
display: flex로 설정하면 컨테이너 영역 내부의 콘텐츠를 구성하는 요소들을 위치 조저을 할 수 있습니다.
justify-content 속성값은 flex-start, flex-end, center, space-between, space-around, space-evenly 가운데에 하나이며 기본값은 flex-start입니다.
| 클래스 이름 | 의미 |
| justify-start | justify-content: flex-start |
| justify-end | justify-content: flex-end |
| justify-center | justify-content: center |
| justify-between | justify-content: space-between |
| justify-around | justify-content: space-around |
| justify-evenly | justify-content: space-evenly |
또한 align-items 스타일 속성 값은 수직으로 조정합니다.
| 클래스 이름 | 의미 |
| items-start | align-items: flex-start; |
| items-end | align-items: flex-end; |
| items-center | align-items: center; |
| items-baseline | align-items: baseline; |
| items-stretch | align-items: stretch; |
그런데 justify-* 와 items-* 클래스는 플렉스 컨테이너의 방향에 따라 적용되는 방향이 반대입니다.
즉 수평방향 플렉스에서 justify-*는 수평으로 정렬하고 수직인 방향에서는 수직으로 정렬합니다.
6. User 컴포넌트 만들기
이제는 조금 실질적인 예로 살펴보겠습니다.
7. Card 컴포넌트 만들기
위에 유저 컴포넌트를 확장하여 Card컴포넌트를 만들어보겠습니다.
