매크로 레이아웃

매크로 레이아웃은 페이지 전체에 대한 더 큰 인터페이스를 구성하는 역할을 합니다.

좁은 뷰의 열 1개와 동일한 레이아웃 옆에 있는 2열 레이아웃의 와이어프레임

레이아웃을 적용하기 전에 콘텐츠의 흐름이 의미가 있는지 확인해야 합니다 작은 화면에서는 이 단일 열 기본 순서가 적용됩니다.

<body>
  <header>…</header>
  <main>
    <article>…</article>
    <aside>…</aside>
  </main>
  <footer>…</footer>
</body>

이러한 개별 페이지 수준 구성 요소를 정렬하면 매크로 레이아웃(페이지의 대략적인 보기)을 디자인할 때 유용합니다. 미디어 쿼리를 사용하면 이 뷰가 여러 화면 크기에 맞게 조정되는 방식을 설명하는 규칙을 CSS에 제공할 수 있습니다.

그리드

CSS 그리드는 페이지에 레이아웃을 적용하는 데 유용한 도구입니다. 위의 예에서는 사용 가능한 화면 너비가 충분하다면 2열 레이아웃을 원한다고 가정해 보겠습니다. 브라우저의 너비가 충분할 때 이 두 열 레이아웃을 적용하려면 미디어 쿼리를 사용하여 지정된 중단점 위의 그리드 스타일을 정의합니다.

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

Flexbox

이 특정 레이아웃에서는 flexbox를 사용할 수도 있습니다. 스타일은 다음과 같습니다.

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }

  main article {
    flex: 2;
  }

  main aside {
    flex: 1;
  }
}

하지만 Flexbox 버전에는 더 많은 CSS가 필요합니다. 각 열에는 공간을 얼마나 차지해야 하는지를 나타내는 별도의 규칙이 있습니다. 그리드 예에서 동일한 정보가 포함된 요소에 대한 하나의 규칙에 캡슐화됩니다.

미디어 쿼리가 필요한가요?

항상 미디어 쿼리를 사용할 필요는 없습니다. 일부 요소에 변경사항을 적용할 때는 미디어 쿼리가 잘 작동하지만 하지만 레이아웃을 많이 업데이트해야 하는 경우 중단점이 많아 미디어 쿼리가 낭비될 수 있습니다.

페이지에 카드 구성요소가 가득 찼다고 가정해 보겠습니다. 카드의 너비가 15em보다 넓지 않으며 한 줄에 알맞은 수만큼 카드를 배치하는 것이 좋습니다. 30em, 45em, 60em, 이러한 작업은 상당히 지루하고 유지가 어렵습니다.

대신 카드 자체가 자동으로 적절한 공간을 차지하도록 규칙을 적용할 수 있습니다.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-gap: 1em;
}

Flexbox를 사용하여 유사한 레이아웃을 달성할 수 있습니다. 이 경우 마지막 행을 채울 만큼 카드가 충분하지 않으면 나머지 카드는 열로 정렬되지 않고 사용 가능한 공간을 채우도록 늘어납니다. 행과 열을 정렬하려면 그리드를 사용하세요.

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.cards .card {
  flex-basis: 15em;
  flex-grow: 1;
}

Flexbox 또는 그리드에 몇 가지 스마트 규칙을 적용하면 최소한의 CSS와 미디어 쿼리 없이 동적 매크로 레이아웃을 디자인할 수 있습니다. 사용자가 할 일은 줄어드는 대신 브라우저가 계산하게 됩니다. 미디어 쿼리가 없어도 유연한 최신 CSS 레이아웃의 예를 보려면 다음을 참조하세요. 1linelayouts.com)를 참고하세요.

이해도 확인

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

다음 문장 중 매크로 레이아웃을 가장 잘 설명하는 문장은 무엇인가요?

다른 레이아웃이 포함된 레이아웃
다시 시도해 보세요. 대부분의 레이아웃에는 다른 레이아웃이 포함되어 있습니다.
디자인에서 Flexbox 또는 그리드를 사용하는 경우
다시 시도해 보세요. Flexbox나 그리드에는 매크로 레이아웃과 관련된 정보가 없습니다.
화면의 일부를 커버하는 하위 수준 레이아웃입니다.
다시 시도해 보세요.
많은 양의 화면을 처리하는 상위 수준 레이아웃입니다.
🎉 매크로 레이아웃은 많은 시각적 영역을 아우르는 페이지의 기본 레이아웃으로, 페이지 크기 미디어 쿼리를 통해 조정되는 경우가 많습니다.

매크로 레이아웃이 항상 미디어 쿼리를 사용하여 다양한 화면 크기에 맞게 조정되나요?

참
다시 시도해 보세요. 매크로 레이아웃은 미디어 쿼리 사용에 의해 정의되지 않습니다.
거짓
🎉 매크로 레이아웃이 미디어 쿼리 없이도 콘텐츠에 맞추고 사용 가능한 공간을 채우는 등의 상황에 맞게 조정될 수 있습니다.

이제 페이지 수준 매크로 레이아웃에 대한 아이디어를 얻었으므로 페이지 내의 구성 요소로 주의를 돌릴 수 있습니다. 이것은 마이크로 레이아웃을 참조하세요.