새로운 CSS 레이아웃 도서 요약

카탈로그

1. 1. 새로운 CSS 레이아웃 요약
   1. 1.1. 이전 레이아웃
      1. 1.1.1. 플롯의 문제
      2. 1.1.2. 플롯 문제 해결
   2. 1.2. 현재
      1. 1.2.1. 컴포넌트 우선 디자인
   3. 1.3. 새로운 레이아웃
      1. 1.3.1. column-count, column-width
      2. 1.3.2. shape-outside
      3. 1.3.3. flex-wrap
      4. 1.3.4. 그리드 레이아웃
         1. 1.3.4.1. * 내가 몰랐던 사실
   4. 1.4. 배치와 정렬
      1. 1.4.1. align-content: space-between;
      2. 1.4.2. justify-content: space-between;
      3. 1.4.3. justify-items ,justify-self
   5. 1.5. ★반응형 디자인
      1. 1.5.1. flex -grow, -shrink, -basis
   6. 1.6. ★소스 순서와 표현 순서
      1. 1.6.1. grid-auto-flow
      2. 1.6.2. order
      3. 1.6.3. display: contents
   7. 1.7. 준비하는 미래
   8. 1.8. 앞으로의 여정
   9. 1.9. 참고파일

새로운 CSS 레이아웃 요약

이전 레이아웃

플롯의 문제

플롯은 모든 요소의 높이가 똑같다면 괜찮은 방식임
그렇지 않다면, 아래와 같이 레이아웃이 망가질 수 있음

플롯 문제 해결

---

현재

컴포넌트 우선 디자인

---

새로운 레이아웃

column-count, column-width

shape-outside

신기한 방식

flex-wrap

마지막 엘리먼트를 지워보고, 어떻게 영향을 끼치는지 확인하자

그리고 flex: 0 0 auto;로 변경해보자.

flex: 0 0 auto; = flex-grow, flex-shrink, flex-basis 순서로 배치됨

이게 grid와 flex에 가장 큰 차이라고 생각된다.

grid에서는 아무리 찾아봐도, 각 행의 길이를 다르게 하는 방법을 모르겠다… (아직 공부가 부족한가…)

그리드 레이아웃

* 내가 몰랐던 사실

grid-gap, grid-column-gap, grid-row-gap을 grid를 빼고 사용이 가능하게 바뀌었다.
이제는 gap, column-gap, row-gap으로 사용 가능하다.
하지만, 아직 브라우저 지원률은 grid를 붙인 것이 높은 듯 하다.
IE는 확인해봐야 알 듯… (내가 알기로 폴리필을 해도 grid-gap 지원 안했던 것 같은데…)

그리드 레이아웃 빈칸은 .으로 표시

grid-template-areas:
	"a a b"
	". d d"
 	"c e e";

배치와 정렬

grid-align-slef

align-content: space-between;

justify-content: space-between;

justify-items ,justify-self

---

★반응형 디자인

flex -grow, -shrink, -basis

커지는 비율, 작아지는 비율, 플렉스 아이템의 기본값(넓이·높이)

---

★소스 순서와 표현 순서

grid-auto-flow

grid-auto-flow: dense를 해제시켜보고 차이를 이해

order

그리드에서는 사용 용도가 불분명한 편, 애초에 grid-area로 숫자·이름 둘다 지정할 수 있기 때문에

display: contents

인정하지 않은 자식 요소도 플렉스 또는 그리드 레이아웃의 구성요소가 될 수 있게 만듦

---

준비하는 미래

---

support 문법 발견

supports (display: grid) {
    /* grid 지원 브라우저에만 적용됨 */
    .container {
        display: grid;
    }
}

앞으로의 여정

참고파일

예제 코드 Download