Flex
Flexible Box, Flex Box라고도 부름
레이아웃 배치 전용 기능으로 고안
=> float나 inline-block 등을 이용한 방식보다 편리한 기능이 많음...!
Flex의 기본구조
<div class="container">
<div class="item">item A</div>
<div class="item">item B</div>
<div class="item">item C</div>
</div>
부모 요소 : div.container => Flex Container
자식 요소 : div.item => Flex Item
Flex의 속성은 크게 컨테이너에 적용되는 속성과 아이템에 적용되는 속성으로 나뉨
컨테이너에 적용하는 속성들
Flex를 사용하려면 가장 먼저 Flex Container로 사용할 태그에 display: flex;를 적용해 주어야 함
.container {
display: flex;
}
해당 속성을 적용하면 해당 태그가 Flex Container가 된다...!
Flex Container은 정렬에 관련된 속성들이 적용
Flex Container에 적용되는 속성을 다 다루기에는 너무 많으니까 적당히 모르는 것들 위주로 정리
flex-direction
축의 방향을 설정해 줄 수 있다
flex-direction: row / column / row-reverse / column-reverse; 를 통해서 설정 가능
난 왜 지금까지 align items만 사용했나
난 왜 지금까지 배열을 거꾸로 돌릴 생각만 했나...!!
처음 flex를 설정하면 기본값으로 row가 설정
tailwind를 사용할 때는 flex-row, flex-row-reverse 같이 사용해 주면 됨
flex-wrap
컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성
flex-wrap: nowrap / wrap / wrap-reverse; 를 통해서 설정 가능
- nowrap : 줄바꿈 없이 여유공간이 없으면 container 밖에 item 표시
- wrap: 남는 아이템을 아래쪽으로 줄바꿈
- wrap-reverse: 남는 아이템을 위쪽으로 줄바꿈
tailwind에서 사용할 때는 위와 같이 flex-nowrap 같이 사용...!
flex-flow를 이용해서 위의 두 속성을 한꺼번에 사용 할 수도 있음
flex-flow: row wrap; == flex-direction: row; + flex-wrap: wrap;
방향 정렬
- justify-content : 메인 축 방향으로 아이템들을 정렬
(기본 값은 flex-start) - align-items : 수직 축 방향으로 아이템들을 정렬 => tailwind에 items!!
(기본 값은 stretch)
align-content
줄바꿈이 되었을 때 배치를 어떻게 할 지 결정
flex-wrap속성이 nowrap이 아니여야 함...!
속성의 값들은 justify의 값들하고 동일 => 단 기본값은 stretch로 해당 값은 justify에는 존재하지 않아
tailwind에서는 content-center 같이 사용
아이템에 적용되는 속성들
flex-basis
flex 아이템의 기본 크기를 설정
난.. 왜... 모든 아이템들의 크기를 width로 일일이 설정했는데..?
평소에 width, height 등에 사용하는 각종 단위들이 들어갈 수 있음..!
tailwind에서는 basis-[숫자] 로 사용 가능
flex-basis vs width
만약 아이템의 크기가 flex-basis로 지정한 크기를 넘어 갈 경우 그냥 아이템의 크기 그대로...!
하지만 width로 지정한 경우 아이템의 크기에 상관 없이 width로 지정 => 그럼 아이템이 삐져나가거나~ 줄바꿈이 되거나~
flex-grow
상위 태그의 크기를 하위 태그로 채워줌
flex-grow 0이 기본값으로 되어있음 => 안 늘어나는거
1 이상의 값으로 되어있다면 비율에 맞춰서 여백을 늘려준다
.itemA { flex-grow: 1; }
.itemB { flex-grow: 2; }
.itemC { flex-grow: 1; }
이러면 itemA, B, C가 1 : 2 : 1 비율의 크기로 여백이 늘어난다는 것
tailwind에서는 grow, grow-0으로 사용
flex-shrink
아이템이 flex-basis의 값보다 작아질 수 있는지 결정
숫자 값이 들어가는데 1 이상의 값이 세팅되면 flex-basis보다 작아질 수 있음
=> flex-basis 선언이 필수적이겠지?
0이 세팅되면 flex-basis의 값은 변하지 않아...!
tailwind에서는 shirink, shirink-0으로 사용
+) flex-grow, flex-shrink와 flex-basis는 flex: 1 1 auto; 이런식으로 해서 축약형으로 사용 가능...!
align-self
수직축 정렬의 아이템 버전
align-items보다 우선권을 갖는다!
tailwind에서는 self-auto, self-start 등으로 사용
Grid
두 방향 레이아웃 시스템
=> Flex랑 다르게 2차원이다...!
Grid의 기본 구조
<div class="container">
<div class="item">item A</div>
<div class="item">item B</div>
<div class="item">item C</div>
</div>
여기서 부모 요소인 div.container를 Grid Container라고 부르고,
자식 요소인 div.item들을 Grid Item이라고 명칭
컨테이너에 적용되는 속성들
Flex와 마찬가지로 컨테이너에 display: grid;를 설정해주어야 함
이때 아이템들이 block요소라면 딱히 변화가 발생하지 않음
그리드 형태 정의
grid-template-rows와 grid-template-columns를 이용해서 컨테이너에 grid 트랙의 크기를 지정해주는 속성
여러가지 단위를 사용할 수 있고 섞어서 사용하는 것도 가능
grid-template-columns: 200px 220px 500px;
=> column을 3개 만들건데요 200px, 200px, 500px로 만들겁니다
=> 비율로 트랙의 크기를 나눌 수도 있다 예를 들어서 1fr 1fr 은 1 대 1 비율로 두개의 column을 생성하겠다는 뜻
이걸 repeat(반복횟수, 반복값)을 이용해서도 만들 수 있음
tailwind에서는 grid-columns-[200px_200px] 이런 방식으로도 사용 할 수 있고
grid-columns-2 이렇게 써주면 1fr 1fr 이렇게 생성됨!
auto-fill과 auto-fit
repeat(auto-fill, 200px)
=> 한 아이템 당 200px 씩 row에 들어갈 수 있는 최대 개수만큼 들어감
=> 만약 아이템의 개수가 해당 줄을 다 채우지 못하더라도 그냥 공간을 남겨둠
repeat(auto-fit, 200px)
=> 한 아이템 당 200px 씩 row에 들어갈 수 있는 최대 개수만큼 들어가는 것을 동일
=> 만약 아이템의 개수가 해당 줄을 다 채우지 못하면 남는 공간을 아이템의 길이나 높이를 늘려서 채움
module.exports = {
theme: {
extend: {
gridTemplateColumns: {
'auto-fill-100': 'repeat(auto-fill, minmax(100px, 1fr))',
'auto-fit-100': 'repeat(auto-fit, minmax(100px, 1fr))',
},
},
},
}
tailwind에서는 직접 지정해줘야 사용할 수 있다...
아이템에 적용되는 속성

.item:nth-child(1) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.item:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.item:nth-child(1) {
grid-column: 1 / span 2;
}
위의 이미지에 빨간 색 부분을 해당 코드들 (두 css의 결과는 동일)로 표현할 수 있음
첫번째 아이템이 빨간 부분만큼을 차지한다는 의미
tailwind에서는 column-start-숫자로 사용
세번 째 코드처럼 시작과 끝지점을 설정하는 것이 아니라 span을 통해 영역을 늘릴 수 도 있음
tailwind에서는 col-span-숫자로 사용하는데 span 숫자/ span 숫자 값이 적용
이 외에 다른 정렬들이 많은데 그건 여기서
결국 언제 Flex랑 Grid를 써야하는건데?
Flex
유연하고 간단한 레이아웃 구성 가능
반응형 웹 디자인에 적합
단, 일차원적인 레이아웃만 가능
Grid
복잡하고 정교한 레이아웃 구성 가능
하지만 어렵고, 좀 오래된 브라우저에서는 지원하지 않을수도...
=> 그러니까 일차원적인 레이아웃을 만들때는 Flex를 사용해도 상관 없다!
다만 복잡한 레이아웃을 만들어야 할 때는 Grid를 사용하자...!
'FE Study' 카테고리의 다른 글
| [FE] 이벤트 전파와 이벤트 위임 (0) | 2024.08.02 |
|---|---|
| [FE] Border vs Outline (0) | 2024.08.02 |
| XSS (0) | 2024.07.15 |
| CSRF (0) | 2024.07.15 |
| [FE] Reflow / Repaint (0) | 2024.07.09 |