매크로 레이아웃

매크로 레이아웃은 페이지 전체의 보다 큰 인터페이스 구성을 설명합니다.

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

레이아웃을 적용하기 전에 콘텐츠의 흐름이 적절한지 확인해야 합니다 이 단일 열 기본 정렬은 작은 화면에 적용됩니다.

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

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

그리드

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

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

플렉스박스

이 특정 레이아웃의 경우 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나 그리드에는 모두 매크로 레이아웃과 관련된 특정 항목이 없습니다.
화면의 일부를 덮는 낮은 수준의 레이아웃입니다.
다시 시도해 보세요.
많은 화면을 덮는 높은 수준의 레이아웃입니다.
🎉 매크로 레이아웃은 페이지의 기본 레이아웃으로 넓은 시각적 영역에 걸쳐 있으며 페이지 크기 미디어 쿼리를 사용하여 조정되는 경우가 많습니다.

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

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

페이지 수준 매크로 레이아웃에 관한 아이디어를 얻었으니 이제 페이지 내 구성요소에 대해 자세히 알아보겠습니다. 이는 마이크로 레이아웃의 영역입니다.