새로운 CSS 레이아웃

 

이 책은 grid-layout, flex-layout을 주로 다루는 책이다.

이 책에서 다루는 내용들 중 새롭거나 기업해둘만 한 것 위주로 글을 써본다.

1. display: table을 사용하면 높이가 동일한 레이아웃을 만들 수 있다.

2. 컴포넌트를 조합하여 페이지를 제작하는 방식이 유행했었는데, 이런 방법을 아토믹 디자인(atomic design)이라고 한다.

3. 제작한 사이트에 대한 문제를 확인할 수 있는 사트가 있는데 팀 카들렉(tim kadlec)이 만든 '내 사이트가 지불하는 비용은?(What Does My Site Cost? - https://whatdoesmysitecost.com/)'

4. 레이아웃을 잘 만드는 것도 중요하지만, 웹 사이트의 성능과 속도를 고려하며 만드는 것도 중요하다.

5. shape-outside라는 css 속성이 있다. 이 속성은 float 속성이 있을 때에만 사용 가능하다. shape-outside: circle(50%)라면, 왼쪽에는 이미지가 있고, 이미지 옆에는 동그라미 모양으로 글이 쓰여진다.

6. multi-column-layout(column-width, column-count) 속성이 있다. 이 속성은 연속적인 콘텐츠를 여러 컬럼으로 나누어 배치할 때 사용하는데 뉴스 기사를 예로 들 수 있다.

아래부터는 flex-layout, grid-layout과 관련된 내용들이다.

flex-layout

• align-items: 컨테이너 내부의 모든 flex 아이템에 적용
• align-self: 개별 flex 아이템에 사용 가능, 값을 덮어쓸 수 있음
• space-between: 아이템 사이의 공간을 똑같은 크기로 표시
• space-around: 모든 아이템 양쪽에 똑같은 크기의 마진을 부여
• space-evenly: 모든 공백을 동일하게 배분(아이템-아이템과 컨테이너-아이템 사이의 크기가 동일)

    

반응형 웹 디자인의 핵심은 비율을 유지하는 기능이다. 스크린 사이즈를 늘리거나 줄였을 때, 이질감이 없도록 해야 한다. flex-layout에서 이에 대해 설정하는 것이 flex-grow, flex-shrink, flex-basis이다.

• flex-grow: flex 아이템이 flex-basis에 설정한 크기보다 커질 수 있는지를 설정한다.
• flex-shrink: flex 아이템이 flex-basis에 설정한 크기보다 작아질 수 있는지를 설정한다.
• flex-basis: flex 아이템의 너비(flex-direction: row)나 높이(flex-direction: column)를 설정할 때 사용 가능하다. 모든 flex 아이템에 flex-basis 속성을 200px로 설정한다면, 브라우저는 각 flex 아이템에 200px 크기의 공간을 할당한다.

    flex-grow: 0;

    flex-shrink: 0;

    flex-basis: 200px;

위의 속성이 있다고 할 때, 축약형은 아래와 같다.

    flex: 0 0 200px;

    .cards li {

        // flex 아이템은 똑같은 크기로 늘어나서 카드를 가득 채우는 레이아웃이 된다.

        flex: 1 0 200px;

        flex-grow: 0;

        flex-shrink: 0;

        flex-grow: 1;

    }

    .cards li:first-child {

        // 첫 번째 아이템만 선택한 후 flex-grow의 값을 2로 설정하면 다른 아이템보다 2배 늘어난다.

        flex: 2 0 200px;

    }

여유 공간을 모두 flex 아이템에 균등하게 배분하고 싶다면 flex-basis의 값을 0으로 주면 된다.

flex: 1 0 0;

grid-layout

• auto-fit: 아이템의 개수가 부족해도 빈 공간을 남겨두지 않음(각 아이템에 균등하게 분배)
• auto-fill: 아이템의 개수가 부족해서 끝에 빈 공간이 생겨도 그대로 남겨둠

따라서, 트랙의 개수를 그대로 유지하고 싶다면 auto-fill, 아이템의 개수가 트랙의 개수보다 작은 경우 콘텐츠가 컨테이너를 채우도록 하고 싶다면 auto-fit

feature queries

media query가 화면 크기나 종류의 지원을 확인하는 용도라면 feature query는 css의 기능 지원을 확인하는 용도이다. grid-layout이나 flex-layout을 사용할 때에는 feature query가 필요하다.

@supports (display: grid) {

    // css grid가 지원되는 브라우저에서만 적용되는 코드

    .container {

        display: grid;

        ...

    }

}

@supports (display: -ms-grid) {}

@supports (display: grid) or (display: -ms-grid) {}

@supports (display: grid) and (shape-outside: circle(50%) {}

조언

이 책의 마지막에서 조언을 하나 한다. 그 조언이 마음에 와닿아 적어본다.

새로운 것을 가지고 놀 시간을 가져라.

개인 프로젝트를 해도 좋고, 코드펜이나 JS빈 같은 환경을 활용해도 좋다.

자신의 한계를 시험해보라.

작업이 생각대로 되지 않을 때에는 질문을 해보라.

다른 사람들이 해준 답변을 보고 자신의 아이디어나 요구사항들을 공유하는 일도 두려워하지 말라.