▲

GN⁺: CSS 그리드 영역

 (ishadeed.com)
2P by neo 1달전 | favorite | 댓글 1개

소개

  • CSS Grid는 2017년부터 모든 주요 브라우저에서 지원되고 있음
  • 그러나 2024년에도 여전히 많은 사람들이 grid template areas 기능을 사용하지 않음
  • 이 기사에서는 grid template areas의 간단함과 강력함을 설명하고자 함

CSS 명명된 그리드 영역

  • CSS Grid에서 각 그리드 영역을 이름으로 지정하고 CSS 전반에서 참조할 수 있음
  • 예를 들어, 두 개의 열이 있는 그리드 레이아웃을 정의하고 각 항목에 grid-area를 매핑할 수 있음

그리드 템플릿 영역 규칙

  • 정의된 영역은 직사각형 모양이어야 함
  • 모든 영역이 정의되어야 함

그리드 템플릿 구문

  • grid-template-areas 속성을 사용하여 그리드 영역을 정의해야 함
  • 여러 개의 영역 문자열을 사용할 수 있음
  • 단일 문자열은 1차원 레이아웃을 의미하고, 여러 문자열은 다차원 레이아웃을 의미함

CSS 명명된 그리드 라인

  • 그리드 라인을 고유한 이름으로 지정할 수 있음
  • 예를 들어, 3개의 열이 있는 그리드에서 각 라인을 이름으로 지정할 수 있음
  • 명명된 그리드 라인은 기본 라인 번호를 대체하지 않음

그리드 템플릿 영역의 사용 사례

  • 그리드 방향 반전: grid-template-areas를 사용하여 레이아웃 방향을 쉽게 변경할 수 있음
  • 헤더 레이아웃: grid-template-areas를 사용하여 헤더 레이아웃을 정의하고 반응형으로 만들 수 있음
  • 편집 레이아웃: 다양한 콘텐츠 유형을 포함하는 레이아웃을 쉽게 정의하고 변경할 수 있음

조건부 레이아웃과 CSS :has()

  • CSS :has() 선택자를 사용하여 요소의 존재 여부에 따라 레이아웃을 변경할 수 있음

다국어 지원 (LTR/RTL)

  • CSS Grid는 페이지 방향(LTR 또는 RTL)에 따라 레이아웃을 조정함
  • 이는 명명된 그리드 영역도 페이지 방향을 따름

그리드 영역과 DevTools

  • 모든 주요 브라우저는 그리드 영역에 대한 좋은 도구를 제공함 (Chrome, Safari, Firefox)
  • 각 브라우저는 그리드 영역을 시각화하는 방법이 다름

GN⁺의 정리

  • CSS Grid의 grid template areas 기능은 레이아웃을 시각적으로 이해하고 관리하는 데 유용함
  • 특히 팀원들이 레이아웃을 변경해야 할 때 유용함
  • 이 기사는 grid template areas의 간단함과 강력함을 설명하며, 이를 통해 더 많은 사람들이 이 기능을 사용하도록 유도하고자 함
  • 유사한 기능을 제공하는 다른 프로젝트로는 Flexbox가 있음
▲
neo 1달전  [-]
Hacker News 의견

  • 애니메이션 데모에 흥미를 느꼈으나, CSS로 구현된 것이 아님

    • Flexbox를 배우고 만족했으며, Grid를 배울 필요성을 느끼지 못했음
    • Grid를 선호할 이유가 있지만, 실제로 필요성을 느끼지 못했음
    • 데이터 테이블에는 실제 테이블을 사용함

  • 이 기사는 Grid의 장점과 CSS 문법의 번거로움을 강조함

    • 두 가지 차원과 세 가지 매개변수(시작, 끝, 크기)가 있음
    • 각 매개변수를 선언하는 방법이 최소 세 가지 있음
    • 축약 속성 때문에 읽기 어려움
    • 다른 개발자의 Grid를 읽기 어려움

  • '1/3'이 분수가 아니라 1에서 3까지의 범위임

    • 왜 이런 문법을 선택했는지 이해할 수 없음
    • 프로그래밍에서 범위를 나타내는 더 좋은 문법이 있음 (예: 1..3)

  • Grid Garden과 Flexbox Froggy 관련

  • Grid나 Flexbox를 이해하지 못했음

    • 마지막으로 잘 사용한 레이아웃 전략은 floats였음
    • 이 기사가 다음 레이아웃 디자인에 CSS Grid를 사용할 자신감을 줌
    • 잘 만들어진 기사에 감사함

  • 이 문서의 사전 소개 버전이 있는지 궁금함

    • 소개 부분에서 길을 잃었음
    • 'line number'가 무엇인지 이해하지 못했음
    • '1/3'과 '1/4' 같은 분수에서 막혔음

  • Jen Simmons의 Mondrian with auto flow를 강력 추천함

    • Jen Simmons Mondrian
    • 창 크기를 변경해보면 매우 멋짐
    • auto flow에서 간격을 감지하고 채우는 방법을 이해하고 싶음

  • 문법을 1/2와 3/4로 정의하는 이유가 궁금함

    • 1-2 또는 1->2 같은 문법이 더 이해하기 쉬울 것 같음

  • 인터랙티브 블로그 포스트를 좋아함

    • Grid 영역을 도구에서 실험해보는 것을 추천함
    • Grid Layoutit을 몇 년 동안 사용해왔으며, 간격 조정이 훨씬 쉬워짐

  • 처음으로 CSS Grid를 이해한 것 같음

    • 번호 매기기가 큰 도움이 되었음
    • 훌륭한 기사로 자주 참고할 것임
답변달기