새로운 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 레이아웃 요약

이전 레이아웃

플롯의 문제

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

See the Pen 플롯 - 망가진 레이아웃 by taeuk_kang (@taeuk_kang) on CodePen.

플롯 문제 해결

---

현재

컴포넌트 우선 디자인

---

새로운 레이아웃

column-count, column-width

See the Pen column-count by taeuk_kang (@taeuk_kang) on CodePen.

shape-outside

신기한 방식

See the Pen shape-outside by taeuk_kang (@taeuk_kang) on CodePen.

flex-wrap

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

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

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

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

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

See the Pen flex-wrap by taeuk_kang (@taeuk_kang) on CodePen.

그리드 레이아웃

* 내가 몰랐던 사실

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

See the Pen grid-align-self by taeuk_kang (@taeuk_kang) on CodePen.

align-content: space-between;

justify-content: space-between;

See the Pen grid-align-content by taeuk_kang (@taeuk_kang) on CodePen.

justify-items ,justify-self

See the Pen grid-justify by taeuk_kang (@taeuk_kang) on CodePen.

---

★반응형 디자인

flex -grow, -shrink, -basis

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

See the Pen flex-basis by taeuk_kang (@taeuk_kang) on CodePen.

---

★소스 순서와 표현 순서

grid-auto-flow

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

See the Pen grid-auto-flow by taeuk_kang (@taeuk_kang) on CodePen.

order

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

See the Pen layout-order by taeuk_kang (@taeuk_kang) on CodePen.

display: contents

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

See the Pen display: contents by taeuk_kang (@taeuk_kang) on CodePen.

---

준비하는 미래

---

support 문법 발견

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

앞으로의 여정

참고파일

예제 코드 Download