마이크로 레이아웃

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

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

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;
}
<ph type="x-smartling-placeholder">
</ph> 그리드 오버레이를 보여주는 Firefox의 개발자 도구 <ph type="x-smartling-placeholder">그리드 오버레이를 보여주는 Chrome의 개발자 도구</ph> <ph type="x-smartling-placeholder">
</ph> 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;
}
<ph type="x-smartling-placeholder">
</ph> Flexbox 오버레이를 보여주는 Firefox의 개발자 도구 <ph type="x-smartling-placeholder">Flexbox 오버레이를 보여주는 Chrome의 개발자 도구</ph> <ph type="x-smartling-placeholder">
</ph> Firefox와 Chrome의 개발자 도구를 사용하면 도형을 시각화할 수 있습니다. 살펴보겠습니다.

Flexbox 레이아웃을 검사하는 방법을 알아보세요. Chrome DevTools에서 찾을 수 있습니다.

컨테이너 쿼리

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>

미디어 쿼리는mainaside 표시 영역이 45em보다 넓습니다.

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

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

2열 레이아웃으로, 하나는 넓은 열이고 하나는 좁은 열입니다. 미디어 객체는 넓은 열에 있는지, 좁은 열에 있는지에 따라 다르게 배치됩니다.

컨테이너 쿼리는 마이크로 레이아웃의 판도를 바꿀 것입니다. 구성요소는 브라우저 표시 영역과 관계없이 독립적일 수 있습니다.

이해도 확인

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

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

참
🎉 정답입니다.
거짓
틀렸습니다. 그리드와 Flexbox는 모두 매우 유용합니다. '가장 작은' 있습니다.

앞서 페이지 수준 매크로 레이아웃에 관해 알아봤습니다. 이제 여러분은 구성요소 수준의 마이크로 레이아웃을 사용합니다.

다음으로 콘텐츠의 구성요소를 자세히 살펴보고 만드는 방법을 알아보겠습니다. 먼저 반응형 서체를 사용합니다.