마이크로 레이아웃

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

이상적으로 이러한 구성요소 수준 레이아웃은 페이지의 위치와 관계없이 자동으로 조정됩니다. 구성요소가 기본 콘텐츠 열에 배치될지, 사이드바에 배치될지, 둘 다에 배치될지 알 수 없는 상황이 있을 수 있습니다. 구성요소가 어디에 배치될지 확실히 알 수 없으므로 구성요소가 컨테이너에 맞게 조정될 수 있는지 확인해야 합니다.

두 열 레이아웃(하나는 넓고 하나는 좁음) 미디어 객체는 넓은 열에 있는지 좁은 열에 있는지에 따라 다르게 배치됩니다.

그리드

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

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

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

이름에서 알 수 있듯이 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;
}
플렉스박스 오버레이가 표시된 Firefox의 개발자 도구 플렉스박스 오버레이를 보여주는 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 레이아웃을 적용합니다.

두 열 레이아웃(하나는 넓고 하나는 좁음) 미디어 객체는 넓은 열에 있는지 좁은 열에 있는지에 따라 다르게 배치됩니다.

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

이해도 테스트

마이크로 레이아웃에 대한 지식을 테스트해 보세요.

그리드와 플렉스박스는 모두 마이크로 레이아웃에 유용합니다.

참
🎉 정답입니다.
거짓
오답입니다. 그리드와 플렉스박스는 '가장 작은' 레이아웃에도 매우 유용합니다.

이전에는 페이지 수준 매크로 레이아웃에 대해 알아봤습니다. 이제 구성요소 수준 마이크로 레이아웃에 대해 알게 되었습니다.

다음으로 콘텐츠의 기본 요소를 자세히 살펴보고 이미지를 반응형으로 만드는 방법을 알아봅니다. 먼저 반응형 서체에 대해 알아봅니다.

이전
매크로 레이아웃
다음
서체