CSS Flex vs Grid

기존 레이아웃 속성과 다른점

  • inline-block, float, absolute : 요소 자체에 속성을 부여
  • Flexbox, Grid : 부모요소에서 레이아웃을 제어(자식도 가능)

Flexbox

특징

  • 1차원 레이아웃(2차원도 가능)
  • 컴포넌트용
  • 용도에 맞게 사용

소개

  • display를 flex로 바꾸면 "flex 서식 컨텍스트"가 생성
  • 즉, 기본적으로 모든 자식 항목은 플렉스박스 레이아웃
    알고리즘에 따라 배치

Flex 부모 속성들

.container { display: flex; }
  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content

Flex direction

  • 주축: 자식 항목은 컨테이너의 시작점에 묶여 있습니다.

  • 교차축: 자식이 컨테이너 전체를 채우도록 늘어납니다.

    • 기본이 stretch인 이유?

Main Axis vs. Cross Axis

용어

  • justify — 주축을 따라 무언가를 정렬
  • align — 교차축을 따라 무언가를 정렬
  • content — 분산시킬 수 있는 "항목"의 그룹.
  • items — 개별적으로 정렬할 수 있는 단일 항목.

옵션 비교

Flex 자식 속성들

flex grow

  • 남아있는 공간을 사용하여 항목을 성장
  • 기본값 0
  • 남는 공간이 있을 경우에 해당

flex grow의 예시 그림

flex grow에 대한 작동 방식 예제

flex shrink

  • 아이템이 축소되는 능력을 정의
  • 기본값 1
  • 비례적으로 축소되는 것을 원하지 않는 경우
  • 부모 요소의 너비보다
    자식요소들을 합친 너비가 클 경우에 해당

flex shrink의 예시 그림

flex shrink에 대한 작동 방식 예제

flex-basis

  • 아이템의 기본 크기를 설정(기본값은 auto)
  • Flex row에서 flex-basis는 width와 동일한 작업을 수행
  • Flex column에서 축이 바뀌기 때문에 flex-basis는 height와 같은 역할
  • justify-content는 주축을 따라 하위 항목을 배포하며
    주축이 가로로 실행되든 세로로 실행되든 정확히 동일한 방식으로 작동

최소 크기 문제

  • 컨테이너가 특정 지점 아래로 줄어들면 콘텐츠가 넘칩니다!

  • 하지만 왜 그럴까요? 검색 입력은 필요한 만큼 축소될 수 있어야 합니다! 왜 축소를 거부하나요?

  • 그 이유는 바로 최소 크기입니다.

  • Flexbox 알고리즘은 최소 크기 이하로 자식을 축소하는 것을 거부합니다. flex-shrink를 아무리 높게 설정해도 콘텐츠가 더 이상 줄어들지 않고 넘칩니다!

min-width  속성을 사용하여 최소 크기를 재정의

주의사항

justify-content: space-between

  • 퍼블리싱과 실제 서비스의 차이
  • 콘텐츠의 개수가 정해진 경우에만 사용
  • 동적으로 아이템이 변경되는 경우에는 미사

실제로 2개만 있다면?

order 속성

  • order 속성을 이용해서 시각적인 위치를 바꿀 수 있지만 접근성을 위해서 주의

flexbox 예제

텍스트 줄수에 상관없이 가운데로 오는 방법

Swiper에서 최대 높이를 기준으로 채우는 방법

버튼 영역을 하단에 위치시키는 방법

z-index

  • position 속성이 요소에 적용된 경우에만 'z-index'를 추가
  • 예외적으로 flex 항목(flex 컨테이너 내부의 요소들)에
    'z-index'를 적용할 수 있다

Grid

특징

  • 2차원 레이아웃(1차원도 가능)
  • 복잡한 레이아웃

Grid 부모 속성들

.container { 
  display: grid; 
}
  • grid-template
  • justify-items
  • align-items
  • grid-auto-flow
  • justify-content
  • align-content
  • grid-auto-rows

grid-auto-flow

  • 자동 배치 알고리즘이 작동하는 방식을 제어하여
    자동 배치된 항목이 그리드에 흐르는 방식을 정확하게
    지정합니다.

grid-auto-rows

  • 암시적으로 생성된 그리드 행 트랙 또는 트랙 패턴의
    크기를 지정합니다.

Grid 자식 속성들

  • justify-self
  • align-self
  • grid-column
  • grid-row

Grid 레이아웃 방법

  • 그리드 영역 이름을 지정하는 레이아웃
  • 라인 기반 배치를 사용한 그리드 레이아웃
  • 명명된 그리드 선을 사용하는 그리드 레이아웃

그리드 영역 이름을 지정하는 레이아웃

.container {
  display: grid;
  grid-template-areas: 
    "header header"
    "content sidebar"
    "footer footer";
}
.header {
  grid-area: header;
}
.footer {
  grid-area: footer;
}
.content {
  grid-area: content;
}
.sidebar {
  grid-area: sidebar;
}

라인 기반 배치를 사용한 그리드 레이아웃

.container {
  display: grid;
}
.header {
  grid-area: 1 / 1 / 2 / 3;
  /* 
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 3;
  */
}
.footer {
  grid-area: 3 / 1 / 4 / 3;
}
.content {
  grid-area: 2 / 1 / 3 / 2;
}
.sidebar {
  grid-area: 2 / 2 / 3 / 3;
}

명명된 그리드 선을 사용하는 그리드 레이아웃

.container {
  display: grid;
  grid-template-columns: 
    [full-start] 1fr
    [popout-start] 220px
    [content-start] 1400px [content-end]
    220px [popout-end]
    1fr [full-end];
}
> * {
  grid-column: content;
}
.popout {
  grid-column: popout;
}
.full {
  grid-column: full;
}

CSS 그리드 동일 열!

1fr 1fr 1fr은 작동하지만 몇 가지 문제가 있습니다!

그리드에서의 absolute 작동 방식

절대 위치를 가진 그리드 자식이 있는 경우
그리드를 사용하여 위치를 지정할 수 있습니다.

참고 사이트 https://dev.to/nicm42/using-position-absolute-in-a-grid-1apg

Grid를 완성시키는 속성의 탄생

Subgrid

Subgrid는?

  • CSS Grid는 매우 강력한 레이아웃 엔진이지만 상위 그리드에 만들어진 행 및 열 트랙은 그리드 컨테이너의 직접 하위 요소를 배치하는 데만 사용할 수 있습니다.
  • 작성자가 정의한 이름이 지정된 그리드 영역 및 선은 직계 하위 요소 이외의 다른 요소에서 손실되었습니다.
  • subgrid를 사용하면 트랙 크기, 템플릿 및 이름을 중첩된 그리드와 공유할 수 있습니다. 

Subgrid 이전

Subgrid 이후

그러나...

브라우저 지원

실무 사례 소개

A 프로젝트

알아두면 쓸데없는 팁

aspect-ratio

적용 규칙 기본

  • width, height 둘 다 고정값이면 비율은 무시됩니다.
  • 둘 중 하나는 auto여야 하는 거죠.
  • 둘 다 auto면 내용물에 따라서 적용 여부가 달라집니다. 예컨대 img 요소면 이미지의 종횡비와 img에 걸린
    스타일에 따라서 적용 여부가 결정됩니다.

출처 : https://twitter.com/mytory/status/1696020598487695508

focus

:focus-within

  • 요소 또는 해당 하위 항목에 초점이 맞춰진 경우
    해당 요소와 일치합니다

:focus-visible

  • 요소에 키보드를 사용하여 탭으로 초점이 맞춰진 경우
    해당 요소와 일치합니다
  • :focus는 마우스 클릭시에도 해당됩니다.

filter

  • 메뉴 호버시 아이콘만 다른색으로 변경하고 싶을 경우
  • CSS filter를 이용해서 변경이 가능합니다.
  • 물론 아이콘을 2개로 만들어서 하는 방법도 있지만
    하나만 관리한다면 편리합니다.

filter: invert(103%) saturate(100%) contrast(100%);

text-decoration-skip-ink

  • none auto의 차이

CSS Flex Grid

By kyoo119@gmail.com

Made with Slides.com

CSS Flex Grid

  • 200

More from kyoo119@gmail.com