CSS 레이아웃의

과거, 현재 그리고 미래

개요

  • IE의 지원중단에 따른 프로젝트를 대비
  • 다양한 레이아웃을 알아보기
  • 브라우저 기능 지원에 접근하는 방법

과거

float 장점과 단점

장점

구 IE 브라우저를 포함한
호환성

단점

float을 사용하면 요소가
부유되기 때문에 해제를
해줘야 하는 번거로움이
생긴다

float을 해제하는 방식

  • clear: both
  • overflow: hidden
  • display: flow-root

float의 치명적인 단점

높이가 다른 경우 🥲

그럼 float은 사용하지 말아야 할 속성?

absolute 장점과 단점

장점

자유로운 레이아웃이 가능

단점

요소를 일반적인 문서의
흐름에서 제거하기 때문에
컨텐츠에 따른 유동성이
떨어진다

inline-block
장점과 단점

장점

float의 단점을 해결해주는 display: inline-block

단점

inline이 가지고 있는
특성때문에 요소 사이에
공백이 생긴다.

하지만 남은 공간을 채워주지 않습니다

(다만 해결 가능)

현재

한계를 벗어나기

Flexbox vs Grid

  • flexbox와 grid의 선택 기준은?
  • 1차원 배열인지 2차원 배열에 복잡한 레이아웃인지 판단
  • flexbox는 컴포넌트, grid는 레이아웃

Flexbox와 Grid 비교

Flexbox

  • 1차원 배열
  • 자식요소의 높이를 동일하게 가능
  • IE11에서도 사용 가능하나 버그가 있음

Flexbox History

  1. 2009년 - display: box
  2. 2011년 - display: flexbox (IE10)
  3. 최종 - display: flex 

Title Text

margin auto

  • 플렉스 자식에 margin 속성을 설정하면 자식이
    그 방향에서 멀어지게 됩니다.
  • margin-left를 auto로 설정하면 자식이 오른쪽으로
    밉니다.
  • margin-top을 auto로 설정하면 자식이 맨 아래로
    밀어줍니다.

flexbox의 margin auto는 기본 축의 반대 방향으로
사용 가능한 최대 공간을 차지합니다.

float과 flexbox의 차이점

width와 flex-basis의 작동방식 이해

주의사항

start, end 속성값 : iOS 15.4+
gap(flex) 속성 : iOS 14.1+

Grid

  • 2차원 배열, 특히 복잡한 레이아웃에서 사용
  • 디자인에서의 그리드 개념을 이해할 필요가 있다.
  • IE11에서 쓸 수 있다? 없다?
    • 사용은 가능하나 기능의 한계
    • 고정(O), 반복(X)

Grid History

  • 2011년 초안 : display: -ms-grid (IE10+)
  • 2017년 최종 : display: grid
  • gap 속성
    • grid-gap 비표준 속성 (하위 호환성때문에 필요)
    • gap은 사파리 12이상 지원

주의사항

.grid-layout {
  /* 행이 반복되는 경우는 불필요 */
  grid-template-rows: auto;

  /* 단 최소 높이가 필요한 경우 */
  grid-auto-rows: minmax(50px, auto);
}

grid-template-areas

Multiple-column

  • 신문이나 잡지에서 보는 2~3단 형태의
    텍스트 다단 레이아웃

레이아웃의 분류는 아니지만

도움이 될만한 속성값들

  • position: sticky
  • fit-content

position: sticky

position: sticky 속성을 적용한 박스는 평소에 문서 안에서 position: static 상태와 같이 일반적인 흐름에 따르지만 스크롤 위치가 임계점에 이르면 position: fixed와 같이 박스를 화면에 고정할 수 있는 속성입니다.

fit-content

  • 특정 조건에 따라 요소 너비를 콘텐츠와
    동일하게 만듭니다.

사용전

Title Text

미래

shape-outside

  • 디자인 잡지 형태의 비정형적인 레이아웃이 가능

Title Text

논리적 속성과 값

  • 논리적 속성의 기본 개념은 inline 축과 block 축이다.
  • 물리적 속성은 시각적인 부분
  • 논리적 속성은 direction에 따라 달라진다.
    • 아랍어의 경우처럼 오른쪽에서 왼쪽으로 글자를 읽는 경우 - 좌우 반전이 있어야 하지만 기존 float 속성으로는 자동으로 반전되지 않음
  • left는 물리적 속성, start는 논리적인 속성

브라우저 부분지원 속성

Container Queries

  • CSS 컨테이너 쿼리는 미디어 쿼리와 유사하지만
    뷰포트 크기보다는 컨테이너 요소 크기와 관련이
    있습니다.

브라우저 지원 범위

Masonry Layout

  • 가장 잘 알려진 예는 Pinterest에 있으며 사람들이 레이아웃을 "Pinterest 레이아웃"이라고 부르는 것을 종종 듣게 될 것입니다.

마무리

참고 사이트

  • https://web.dev/patterns/layout/
  • https://csslayout.io/
  • https://gridbyexample.com/patterns/
  • https://flexboxpatterns.com/
Made with Slides.com