매크로 레이아웃은 페이지 전체에 대한 더 큰 인터페이스를 구성하는 역할을 합니다.
레이아웃을 적용하기 전에 콘텐츠의 흐름이 의미가 있는지 확인해야 합니다 작은 화면에서는 이 단일 열 기본 순서가 적용됩니다.
<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)를 참고하세요.
이해도 확인
매크로 레이아웃에 관한 지식을 테스트합니다.
다음 문장 중 매크로 레이아웃을 가장 잘 설명하는 문장은 무엇인가요?
매크로 레이아웃이 항상 미디어 쿼리를 사용하여 다양한 화면 크기에 맞게 조정되나요?
이제 페이지 수준 매크로 레이아웃에 대한 아이디어를 얻었으므로 페이지 내의 구성 요소로 주의를 돌릴 수 있습니다. 이것은 마이크로 레이아웃을 참조하세요.