알아서 잘 딱 깔끔하고 센스있게 정리하는 flex & grid - flex가 grid 어렵드나

- 들어가며

머리말
저자목록
홈페이지, Notion, PDF 파일 및 QR 코드

- Flex 핵심개념

1. Flex
1.1. 들어가기에 앞서
1.2. Flex란?
1.3. 당신이 Flex를 알면 만들 수 있는 것들 : Flex 속성을 통해 만들 수 있는 레이아웃 소개
1.4. Flex의 특징
1.5. axis와 cross-axis
1.5.1. axis란?
1.5.2. 주축과 교차축
1.5.3. dir 특성
1.5.4. writing mode에 따라 바뀌는 축
1.6. 기본 속성 정보
1.6.1. Flex 알아보기
1.6.2. Flex 사용법
1.6.3. Flex 기본 속성
2. Flex-direction
2.1. flex-direction : row
2.2. flex-direction : row-reverse
2.3. flex-direction : column
2.4. flex-direction : column-reverse
2.5. 접근성 고려사항
3. Justify-content
3.1. flex-start
3.2. flex-end
3.3. center
3.4. space-between, space-around, space-evenly
3.4.1. space-between
3.4.2. space-around
3.4.3. space-evenly
3.5. 자주 사용하지 않는 속성들
3.5.1. justify-content : normal
3.5.2. justify-content : initial
3.5.3. justify-content : inherit
3.5.4. justify-content : revert
3.5.5. justify-content : unset
3.5.6. firefox에서만 지원하는 속성
4. Align-items, Align-content
4.1. align-items
4.2. align-content
5. Flex-wrap
5.1. flex-wrap : nowrap
5.2. flex-wrap : wrap
5.3. flex-wrap : wrap-reverse
6. Flex-basis
6.1. flex-basis란?
6.2. flex-basis에 들어가는 값
6.3. flex-basis의 유연성
6.4. flex-basis와 width/height의 관계
6.5. flex-basis : auto; 와 flex-basis : 0;
6.6. flex-basis : content;
6.7. flex-basis보다는 flex 축약 속성을! (W3C)
6.8. flex-basis 호환성
7. Flex-grow
7.1. flex-grow란?
7.2. flex-grow 기능 : 확장 또는 고정
7.3. flex-grow 사용 시 주의할 점
7.4. flex 축약 속성
7.5. flex-shrink보다는 flex 축약 속성을! (W3C)
7.6. flex-grow 호환성
8. Flex-shrink
8.1. Flex-shrink 란?
8.2. Flex-shrink 기능: 축소 또는 고정
8.3. Flex-shrink 사용 시 주의할 점
8.4. Flex 축약 속성
8.5. Flex-shrink보다는 Flex 축약 속성을! (W3C)
8.6. Flex-shrink 호환성 (caniuse)
9. 그 밖의 Flex-item에 사용하는 속성들
9.1. align-self
9.2. order
9.3. z-index
10. IE 지원을 위한 Flex
10.1. -ms- prefix 사용 예시
10.2. IE에서의 Flex 이슈
11. 성배 레이아웃 그리기
11.1. Flex 속성을 이용하여 기본 성배 레이아웃 구현하기
11.2. Flex 속성을 이용하여 변형된 성배 레이아웃 구현하기

- Grid 핵심개념

1. Grid
1.1 grid로 할 수 있는 것들
1.2. 그리드 용어정리
1.3. 개발자 도구로 그리드 체크하는법
1.4. grid 사용법
2. Grid row , Grid column
2.1. grid-template-rows, grid-template-columns
2.2. repeat / 1fr이란
2.3. min-max 함수
2.4. grid-auto-rows , grid-auto-columns
3. Gap
3.1. gap이란?
3.2. margin과 gap의 차이점
3.3. gap의 종류
4. 각 셀의 영역 지정
4.1. grid-column-start & grid-column-end
4.2. grid-row-start & grid-row-end
4.3. 셀의 영역 지정
4.4. grid-column & grid-row
4.5. span 을 이용한 레이아웃 지정
4.6. grid-area
4.7. grid-template-areas
4.8. grid line 외의 추가적인 방법
5. IE지원을 위한 Grid