마이크로 레이아웃

일반적으로 레이아웃이란 페이지 수준 디자인을 떠올리는 경우가 많습니다. 하지만 페이지 내의 작은 구성요소는 자체 포함된 자체 레이아웃을 가질 수 있습니다.

이러한 구성요소 수준 레이아웃은 페이지에서의 위치에 관계없이 자동으로 조정되는 것이 이상적입니다. 구성요소가 기본 콘텐츠 열에 배치되는지, 사이드바에 배치되는지, 아니면 둘 다에 배치되는지 모르는 경우가 있을 수 있습니다. 구성요소가 어느 위치에 표시될지 확실히 모르는 상태에서는 구성요소가 컨테이너에 맞게 자체적으로 조정될 수 있는지 확인해야 합니다.

가로 1개와 좁은 열 1개를 포함하는 레이아웃 2개 미디어 개체는 넓은 열 또는 좁은 열 중 어디에 있는지에 따라 다르게 배치됩니다.

그리드

CSS 그리드에는 페이지 수준 레이아웃만 사용할 수 있는 것이 아닙니다. 내부에 있는 구성요소에도 잘 작동합니다.

이 예에서 ::before 및 ::after pseudo-elements는 제목 양쪽에 장식 선을 만듭니다. 제목 자체는 그리드 컨테이너입니다. 개별 요소는 선이 항상 사용 가능한 공간을 채우도록 배치됩니다.

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1em;
}
h1::before,
h1::after {
  content: "";
  border-top: 0.1em double black;
  align-self: center;
}
그리드 오버레이를 보여주는 Firefox의 개발자 도구 그리드 오버레이를 보여주는 Chrome의 개발자 도구
Firefox 및 Chrome과 같은 데스크톱 브라우저에는 디자인에 오버레이된 그리드 선과 영역을 표시할 수 있는 개발자 도구가 있습니다.

Chrome DevTools에서 그리드 레이아웃을 검사하는 방법을 알아보세요.

플렉스박스

이름에서 알 수 있듯이 flexbox를 사용하여 구성요소를 유연하게 만들 수 있습니다. 구성요소의 어떤 요소에 최소 또는 최대 크기가 지정되어야 하는지 선언하고 다른 요소가 적절하게 조정되도록 할 수 있습니다.

이 예에서 이미지는 사용 가능한 공간의 1/4을, 텍스트는 나머지 3/4을 차지합니다. 하지만 이미지는 200픽셀을 넘지 않습니다.

.media {
  display: flex;
  align-items: center;
  gap: 1em;
}
.media-illustration {
  flex: 1;
  max-inline-size: 200px;
}
.media-content {
  flex: 3;
}
Flexbox 오버레이를 보여주는 Firefox의 개발자 도구 Flexbox 오버레이를 보여주는 Chrome의 개발자 도구
Firefox 및 Chrome의 개발자 도구를 사용하면 Flexbox 구성요소의 모양을 시각화할 수 있습니다.

Chrome DevTools에서 flexbox 레이아웃을 검사하는 방법을 알아보세요.

컨테이너 쿼리

Flexbox를 사용하면 콘텐츠부터 디자인할 수 있습니다. 요소의 매개변수 (범위 지정 범위, 너비)를 지정하고 브라우저가 최종 구현을 파악하도록 할 수 있습니다.

하지만 구성요소 자체는 컨텍스트를 인식하지 못합니다. 기본 콘텐츠 또는 사이드바에 사용되고 있는지 알 수 없습니다. 이렇게 하면 구성요소 레이아웃이 페이지 레이아웃보다 까다로울 수 있습니다. 상황에 맞게 관련성이 높은 스타일을 적용하려면 구성요소가 내부에 있는 표시 영역의 크기뿐만 아니라 관련 정보를 알아야 합니다.

페이지 레이아웃을 사용하면 컨테이너가 브라우저 표시 영역이므로 개발자가 컨테이너의 너비를 알 수 있습니다. 미디어 쿼리는 페이지 수준 컨테이너의 크기를 보고합니다.

컨테이너의 측정기준을 보고하려면 컨테이너 쿼리를 사용하세요.

시작하려면 컨테이너로 작동할 요소를 정의합니다.

main,
aside {
  container-type: inline-size;
}

즉, 인라인 측정기준을 쿼리할 수 있어야 합니다. 영어 문서에서는 가로축입니다. 컨테이너의 너비에 따라 스타일을 변경합니다.

구성요소가 이러한 컨테이너 중 하나에 있으면 미디어 쿼리와 매우 유사한 방식으로 스타일을 적용할 수 있습니다.

.media-illustration {
  max-width: 200px;
  margin: auto;
}

@container (min-width: 25em) {
  .media {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  .media-illustration {
    flex: 1;
  }

  .media-content {
    flex: 3;
  }
}

미디어 객체가 25em보다 좁은 컨테이너 내에 있으면 Flexbox 스타일이 적용되지 않습니다. 표시되는 이미지와 텍스트가 세로로 정렬됩니다.

하지만 포함하는 요소의 너비가 25em보다 크면 이미지와 텍스트가 나란히 표시됩니다.

컨테이너 쿼리를 사용하면 독립적인 방식으로 구성요소의 스타일을 지정할 수 있습니다. 표시 영역의 너비는 더 이상 중요하지 않습니다. 포함하는 요소의 너비를 기준으로 규칙을 작성할 수 있습니다.

크기가 다른 두 컨테이너

검색어 결합

페이지 레이아웃에는 미디어 쿼리를 사용하고 페이지 내 구성요소에는 컨테이너 쿼리를 사용할 수 있습니다.

여기서 페이지의 전체 구조는 main 요소와 aside 요소로 구성됩니다. 두 요소 내에 미디어 객체가 있습니다.

<body>
  <main>
     <div class="media">…</div>
     <div class="media">…</div>
  </main>
  <aside>
     <div class="media">…</div>
  </aside>
</body>

미디어 쿼리는 표시 영역이 45em보다 넓을 때 main 및 aside 요소에 그리드 레이아웃을 적용합니다.

@media (min-width: 45em) {
  body {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
}

미디어 객체의 컨테이너 쿼리 규칙은 동일하게 유지됩니다. 포함 요소가 25em보다 넓은 경우에만 가로 Flexbox 레이아웃을 적용합니다.

가로 1개와 좁은 열 1개를 포함하는 레이아웃 2개 미디어 개체는 넓은 열 또는 좁은 열 중 어디에 있는지에 따라 다르게 배치됩니다.

컨테이너 쿼리는 마이크로 레이아웃의 획기적인 변화를 가져옵니다. 구성요소는 브라우저 표시 영역과 별개로 독립적일 수 있습니다.

이해도 테스트

마이크로 레이아웃에 관한 지식을 테스트합니다.

그리드와 Flexbox 모두 마이크로 레이아웃에 유용한가요?

참
🎉
거짓
🎉 그리드와 Flexbox는 모두 '가장 작은' 레이아웃에서도 매우 유용합니다.

이전 과정에서는 페이지 수준 매크로 레이아웃에 관해 알아보았습니다. 지금까지 구성요소 수준의 마이크로 레이아웃에 관해 알아보았습니다. 다음으로 콘텐츠의 구성 요소를 자세히 살펴보겠습니다. 반응형 이미지를 만드는 방법을 학습합니다. 이번에는 반응형 서체를 살펴보겠습니다.