안녕하세요! 프론트엔드 강사입니다. MDN 문서를 통해 CSS Grid를 깊이 있게 공부하고 계시다니 정말 멋지십니다! 공식 문서는 영어로 되어있고 용어도 낯설어서 처음엔 좀 막막하게 느껴지실 수 있어요. 하지만 이렇게 하나씩 원문을 뜯어보는 과정이 탄탄한 기본기를 만들어준답니다.
딱딱한 번역투 대신, 제가 옆에서 직접 과외를 해드린다고 생각하고 편안한 구어체로 번역해 드릴게요. 실무에서 어떻게 쓰이는지, 왜 이런 개념이 생겼는지에 대한 제 팁과 부연 설명도 팍팍 넣어두었으니 천천히 따라와 주세요! 자, 그럼 시작해 볼까요?
그리드, 논리적 값, 그리고 쓰기 모드 (Grids, logical values, and writing modes)
CSS 그리드 레이아웃(CSS grid layout)의 가장 중요한 기능 중 하나는 바로 스펙 자체에 내장된 다양한 쓰기 모드(writing modes) 지원입니다. 이 가이드에서는 CSS 그리드 레이아웃과 기타 최신 레이아웃 메서드(Flexbox 등)의 이러한 기능을 살펴보고, 이 과정에서 '쓰기 모드'가 무엇인지, 그리고 '논리적(logical) 속성'과 '물리적(physical) 속성'의 차이점이 무엇인지 함께 배워보겠습니다.
👨🏫 강사의 팁:
"쓰기 모드(Writing Mode)"라는 말이 좀 낯설죠? 쉽게 말해 글씨를 쓰는 방향입니다. 한국어나 영어는 왼쪽에서 오른쪽으로(가로쓰기) 쓰지만, 아랍어는 오른쪽에서 왼쪽으로 씁니다. 옛날 신문처럼 위에서 아래로(세로쓰기) 쓰는 언어도 있죠. 현대의 CSS 레이아웃(Grid, Flexbox)은 이런 다양한 언어의 방향을 똑똑하게 지원하기 위해 만들어졌어요!
논리적 속성/값과 물리적 속성/값 (Logical and physical properties and values)
CSS에는 left와 right, top과 bottom 같은 물리적인(physical) 위치 지정 속성과 키워드들이 가득합니다. 아래 코드 스니펫(조각)을 볼까요? 절대 위치(absolute positioning)를 사용해 아이템을 배치하고, 물리적 inset 속성들(inset properties)을 오프셋 값으로 사용해서 아이템을 밀어내고 있습니다. 이 아이템은 컨테이너의 위쪽(top)에서 20픽셀, 왼쪽(left)에서 30픽셀 떨어진 곳에 배치됩니다.
.container {
position: relative;
}
.item {
position: absolute;
top: 20px;
left: 30px;
}<div class="container">
<div class="item">Item</div>
</div>이 예제에서는 left와 right 속성을 사용했습니다. 이것들은 CSS에 있는 수많은 물리적 속성(physical properties) 중 두 가지일 뿐이에요. 우리는 margin-left나 padding-left처럼 물리적 속성을 사용해서 여백(margin), 패딩(padding), 테두리(borders)를 추가할 수도 있습니다. 텍스트를 오른쪽으로 정렬할 때 text-align: right를 사용하는 것처럼, 물리적인 키워드가 사용되는 것도 흔히 보셨을 거예요.
우리가 이런 키워드나 속성들을 물리적(physical)이라고 부르는 이유는, 여러분이 보고 있는 '스크린(화면) 자체'를 기준으로 하기 때문이에요. 텍스트가 어떤 방향으로 흘러가든 상관없이, 화면의 왼쪽은 항상 왼쪽이고 오른쪽은 항상 오른쪽이니까요.
물리적 속성의 문제점 (Issues with physical properties)
다양한 언어 환경에서 작동해야 하는 사이트를 개발할 때, 물리적 속성은 문제를 일으킬 수 있습니다. 텍스트가 오른쪽에서 왼쪽으로 흐르거나, 위에서 아래로 흐르는 언어가 포함된 경우 말이죠. 브라우저는 언어에 상관없이 콘텐츠를 올바르게 표시하도록 설계되어 있습니다. 하지만 일부 CSS 기능(물리적 속성들)은 브라우저의 기본 설정을 덮어버려서 콘텐츠가 최적의 상태로 표시되지 않게 만들 수 있어요.
아래 예제를 한번 볼까요? direction 속성이 rtl(right-to-left)로 설정되어 있습니다. 이건 영어 문서의 기본값인 ltr(left-to-right) 쓰기 모드를 반대로 뒤집은 거예요.
여기에 두 개의 단락(<p>)이 있습니다. 조상 요소(<body>)에 설정된 direction: rtl 값 때문에, 두 단락의 글씨는 모두 오른쪽에서 왼쪽으로 흘러가야 합니다. 하지만 첫 번째 단락은 text-align이 left(왼쪽)로 고정되어 있어서, 컨테이너의 왼쪽 끝에 강제로 정렬되어 버립니다. 반면 아무 정렬도 주지 않은 두 번째 단락은 브라우저 기본 동작에 따라 자연스럽게 오른쪽으로 정렬되고, 글씨도 오른쪽에서 왼쪽으로 정상적으로 흘러갑니다.
<p class="left">
I have my text set to <code>text-align: left</code> I will always align left
even if the direction of the text in this document is rtl.
</p>
<p>I have no alignment set and use the direction set in the document.</p>body {
direction: rtl;
}
.left {
text-align: left;
}p {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
margin: 1em;
color: #d9480f;
}이건 CSS에서 물리적인 값과 속성을 사용할 때 발생할 수 있는 문제점을 보여주는 아주 기본적인 데모예요. 만약 우리가 물리적인 속성(left, right 등)과 키워드를 사용해 CSS를 작성한다면, 그건 브라우저에게 "무조건 텍스트가 이 방향(보통 왼쪽에서 오른쪽)으로만 흐를 거야!"라고 우리가 멋대로 가정하고 명령하는 셈이 됩니다. 즉, 브라우저가 다른 언어의 쓰기 모드에 맞춰 유연하게 대처하는 것을 막아버리게 되는 거죠.
👨🏫 강사의 팁:
요즘은 글로벌 서비스(다국어 지원 사이트)를 만드는 경우가 많아요. 한국어/영어를 서비스하다가 중동 지역(아랍어) 서비스를 추가하게 되면, 화면의 모든 UI가 거울처럼 좌우 반전되어야 합니다. 이때margin-left같은 물리적 속성으로 코딩을 해두면 모든 CSS를 다 뜯어고쳐야 하는 대참사가 벌어져요! 이럴 때를 대비해서 나온 개념이 바로 다음에 배울 '논리적 속성'입니다.
논리적 속성과 값 (Logical properties and values)
논리적 속성(Logical properties)과 값은 텍스트의 방향을 함부로 가정하지 않습니다.
이것이 바로 CSS 그리드 레이아웃에서 컨테이너의 시작 부분에 무언가를 정렬할 때 start라는 키워드를 사용하는 이유입니다. 영어 콘텐츠(LTR)로 작업할 때 start는 당연히 '왼쪽'이 됩니다. 하지만 항상 왼쪽이어야 할 필요는 없죠. start라는 단어 자체에는 물리적인 위치(왼쪽, 오른쪽 등)의 의미가 전혀 들어있지 않습니다. 덕분에 아랍어처럼 오른쪽에서 왼쪽으로(RTL) 읽는 언어를 사용할 때는, 웹사이트가 자연스럽게 콘텐츠를 오른쪽에서부터 시작(start)할 수 있게 되는 것입니다.
블록(Block)과 인라인(Inline) (Block and Inline)
물리적 속성 대신 논리적 속성을 사용할 때, 우리는 더 이상 세상을 '왼쪽에서 오른쪽' 혹은 '위에서 아래'로 보지 않습니다. 우리는 완전히 다른 기준점을 가지게 됩니다.
바로 여기서 그리드 정렬 가이드(grid alignment guide)에서 소개했던 블록(block) 축과 인라인(inline) 축을 이해하는 것이 매우 유용해집니다. 레이아웃을 블록과 인라인의 관점에서 생각하기 시작하면, CSS 그리드 레이아웃이 작동하는 방식이 훨씬 더 직관적이고 이치에 맞게 느껴지실 거예요.
👨🏫 부연 설명:
- 인라인 축(Inline Axis): 글씨를 써 내려가는 방향입니다. 한국어나 영어에서는 가로 방향(왼쪽 ➡️ 오른쪽)이 인라인 축이 됩니다.
- 블록 축(Block Axis): 글씨를 한 줄 다 쓰고 나서 다음 줄(단락)로 넘어가는 방향입니다. 한국어나 영어에서는 세로 방향(위 ⬇️ 아래)이 블록 축이 됩니다.
이제부터는 '가로/세로'가 아니라 '인라인/블록'으로 생각하는 연습을 해보세요!
CSS 쓰기 모드 (CSS writing modes)
CSS 쓰기 모드(CSS writing modes) 모듈은 CSS에서 쓰기 모드가 어떻게 작동하는지 명시합니다. 이 기능들은 단지 영어와 다른 쓰기 모드를 가진 언어들을 지원하기 위한 것만은 아닙니다. 디자인적인 목적으로 창의적으로 사용할 수도 있어요!
이 섹션의 예제들은 writing-mode 속성을 사용해서 우리 그리드에 적용된 쓰기 모드를 변경해 볼 것입니다. 이 과정을 통해 논리적 값들이 실제로 어떻게 작동하는지 보여드릴게요.
writing-mode
쓰기 모드는 단순히 텍스트가 왼쪽에서 오른쪽으로, 혹은 오른쪽에서 왼쪽으로 흐르는 것 이상을 의미합니다. writing-mode 속성은 텍스트가 완전히 다른 방향으로 흐를 수 있도록 도와줍니다. writing-mode 속성이 가질 수 있는 값들은 다음과 같습니다:
horizontal-tbvertical-rlvertical-lrsideways-rlsideways-lr
horizontal-tb라는 값은 "수평으로(horizontal), 위에서 아래로(top to bottom)"를 뜻하며, 웹에 있는 텍스트의 기본값입니다. 여러분이 지금 이 가이드 문서를 읽고 있는 방향이죠. 다른 값들은 전 세계에서 사용되는 다양한 쓰기 모드에 맞춰, 문서 내에서 텍스트가 흐르는 방향을 완전히 바꿔줍니다.
예를 들어, 아래에 두 개의 단락이 있습니다. 첫 번째는 기본값인 horizontal-tb를 사용하고, 두 번째는 vertical-rl을 사용합니다. 두 번째 쓰기 모드(vertical-rl)에서도 글자는 여전히 읽을 수 있게 배치되지만, 텍스트의 전체적인 흐름 방향이 수직(세로)이 됩니다. 즉, 인라인(inline) 텍스트가 이제 페이지를 따라 위에서 아래로 흐르게 되는 것입니다.
.wrapper > p {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
margin: 1em;
color: #d9480f;
max-width: 300px;
}<div class="wrapper">
<p class="horizontal-tb">
I have writing mode set to the default <code>horizontal-tb</code>
</p>
<p class="vertical-rl">I have writing mode set to <code>vertical-rl</code></p>
</div>.horizontal-tb {
writing-mode: horizontal-tb;
}
.vertical-rl {
writing-mode: vertical-rl;
}그리드 레이아웃에서의 쓰기 모드 (Writing modes in grid layouts)
이 개념을 그리드 레이아웃 예제에 적용해 보면, 쓰기 모드를 변경하는 것이 블록 축과 인라인 축의 위치에 대한 우리의 생각을 어떻게 바꿔놓는지 알 수 있습니다.
기본 쓰기 모드 (Default writing mode)
이 예제에서 그리드는 3개의 열(column)과 2개의 행(row) 트랙을 가지고 있습니다. 이것은 블록 축(세로 방향)을 따라 아래로 내려가는 트랙이 3개 있다는 의미입니다. (기본 쓰기 모드에서는 열이 인라인 방향으로 3개 배치되고, 행은 블록 방향으로 내려갑니다.)
기본 쓰기 모드에서, 그리드는 아이템을 왼쪽 상단(top left)에서부터 자동 배치(auto-places)하기 시작하여 오른쪽으로 이동하면서 인라인 축을 따라 3개의 셀을 꽉 채웁니다. 그런 다음 다음 줄로 이동하여 새로운 행(row) 트랙을 만들고, 나머지 아이템들을 채워 넣습니다.
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>쓰기 모드 설정하기 (Setting writing mode)
이전 예제의 그리드 컨테이너에 writing-mode: vertical-lr을 추가해 보면, 블록 축과 인라인 축이 이제 완전히 다른 방향으로 달리는 것을 볼 수 있습니다.
이제 블록(block) 축, 즉 열(column) 축은 페이지를 가로질러 왼쪽에서 오른쪽으로(left to right) 흐릅니다. 반면에 인라인(inline) 축은 페이지를 따라 아래로 흐르면서 위에서 아래로(top to bottom) 행(row)을 만들어냅니다. 고개가 살짝 갸우뚱해지시나요? 그리드 전체가 오른쪽으로 90도 쿵 하고 쓰러졌다고 상상하시면 이해하기 쉽습니다!
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}.wrapper {
writing-mode: vertical-lr;
}<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>정렬을 위한 논리적 값 (Logical values for alignment)
블록 축과 인라인 축이 방향을 바꿀 수 있다는 것을 이해하고 나면, 정렬 속성들에 쓰이는 '논리적 값'들이 왜 그렇게 만들어졌는지 훨씬 더 일리가 있어 보이기 시작합니다.
이 예제에서는 writing-mode: vertical-lr로 설정된 그리드 안에서, 정렬 속성인 align-self와 justify-self를 사용하여 아이템들을 정렬합니다.
start와 end 속성은 기본 쓰기 모드(가로쓰기)에서 작동했던 방식과 정확히 똑같은 규칙으로 작동합니다! 만약 우리가 아이템을 정렬할 때 left/right, top/bottom 같은 물리적인 값을 썼다면, 그리드가 옆으로 눕혀졌을 때 의도했던 정렬이 다 망가졌겠지만, start와 end를 쓰면 논리적인 기준이 유지되기 때문에 그리드를 이렇게 옆으로 휙 눕혀놔도 문제없이 정렬이 유지됩니다.
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}.wrapper {
writing-mode: vertical-lr;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
}
.item1 {
grid-column: 1 / 4;
align-self: start;
}
.item2 {
grid-column: 1 / 3;
grid-row: 2 / 4;
align-self: start;
}
.item3 {
grid-column: 3;
grid-row: 2 / 4;
align-self: end;
justify-self: end;
}<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>위에서 아래로(top to bottom) 내려가는 수직 쓰기 모드뿐만 아니라, 오른쪽에서 왼쪽으로(right to left) 가는 쓰기 모드에서 이 속성들이 어떻게 작동하는지 보고 싶으시다면, vertical-lr을 vertical-rl로 바꿔서 테스트해 보세요. (vertical-rl은 위에서 아래로 쓰되, 줄바꿈이 오른쪽에서 왼쪽으로 이동하는 세로쓰기 모드입니다.)
자동 배치와 쓰기 모드 (Auto-placement and writing modes)
이전 예제들에서 보았듯이, 쓰기 모드는 아이템들이 그리드 위에 배치되는 시각적인 방향을 완전히 바꿔놓을 수 있습니다. 아이템들은 기본적으로 인라인 축을 따라 쭉 늘어서며 배치되고, 자리가 모자라면 블록 방향으로 새로운 행(row)을 추가하며 넘어갑니다.
우리는 이제 인라인 축이 항상 왼쪽에서 오른쪽으로만 달리는 것은 아니며, 블록 축 역시 항상 위에서 아래로만 떨어지는 것은 아니라는 걸 알게 되었습니다.
라인 기반 배치와 쓰기 모드 (Line-based placement and Writing Modes)
라인(선) 번호를 기준으로 아이템을 배치할 때 기억해야 할 핵심은 이것입니다. 여러분이 어떤 쓰기 모드를 사용하든 상관없이, 항상 '라인 1'이 시작(start) 라인이고 '라인 -1'이 끝(end) 라인이라는 것입니다.
LTR (왼쪽에서 오른쪽) 텍스트에서의 라인 기반 배치 (Line-based placement with left to right text)
이 예제에서 우리는 기본 설정인 ltr(왼쪽에서 오른쪽) 방향으로 레이아웃된 그리드를 가지고 있으며, 세 개의 아이템이 라인 기반 배치로 자리 잡고 있습니다.
- Item 1은 열(column) 라인 1번에서 시작하여 1개의 트랙을 차지합니다.
- Item 2는 열(column) 라인 -1번(끝 라인)에서 시작하여 -3번 라인까지 차지합니다.
- Item 3은 열(column) 라인 1번에서 시작하여 3번 라인까지 차지합니다.
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
.item1 {
grid-column: 1;
}
.item2 {
grid-column: -1 / -3;
}
.item3 {
grid-column: 1 / 3;
grid-row: 2;
}<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>RTL (오른쪽에서 왼쪽) 텍스트에서의 라인 기반 배치 (Line-based placement with right to left text)
만약 이전 예제의 그리드 컨테이너에 direction 속성을 추가하고 값을 rtl로 준다면 어떻게 될까요? 그리드의 방향이 뒤집히면서, '라인 1'은 그리드의 가장 오른쪽 끝(우측면)에 배치되고, '라인 -1'은 가장 왼쪽 끝(좌측면)에 배치됩니다.
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
.item1 {
grid-column: 1;
}
.item2 {
grid-column: -1 / -3;
}
.item3 {
grid-column: 1 / 3;
grid-row: 2;
}.wrapper {
direction: rtl;
}<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>전체 페이지든 일부 페이지 영역이든 텍스트 방향을 전환해야 하고 라인 번호를 사용하고 있다면, 레이아웃의 방향이 완전히 반대로 뒤집히는 대참사(?)를 막기 위해 라인에 직접 이름을 지정(name your lines)해서 사용하는 것이 좋습니다.
물론, 그리드 안에 단순히 텍스트만 들어있는 경우라면 방향이 완전히 뒤바뀌는 것이 여러분이 의도한 정확한 결과일 수도 있습니다. 하지만 이미지 갤러리나 특정 디자인 요소처럼 뒤집히면 안 되는 상황도 있으니 상황에 맞게 잘 판단하셔야 해요.
grid-area 속성 값의 독특한 순서 (The strange order of values in the grid-area property)
우리는 grid-area 속성을 사용해서 그리드 영역의 네 모서리(라인)를 한 줄로 짧게 지정할 수 있습니다.
사람들이 이 속성을 처음 접할 때 가장 놀라는 점은, 이 값들의 순서가 우리가 흔히 쓰는 margin 단축 속성의 순서(top, right, bottom, left 즉, 시계 방향)를 따르지 않는다는 점입니다!
grid-area 값의 순서는 다음과 같습니다:
grid-row-startgrid-column-startgrid-row-endgrid-column-end
이를 영어가 쓰이는 기본 왼쪽-오른쪽(LTR) 환경의 물리적 위치로 치환해 보면 다음과 같습니다:
topleftbottomright
순서를 보세요. 시계 반대 방향(counter-clockwise)이죠! 마진(margin)이나 패딩(padding)을 줄 때 하던 방식과는 완전히 정반대입니다.
👨🏫 강사의 팁:
처음엔 진짜 헷갈려요. "왜 하필 시계 반대 방향이야! 불편하게!" 라고 하실 수 있어요. 하지만grid-area가 세상을 "블록(Block)과 인라인(Inline)"으로 바라본다는 사실을 기억해 보세요.
값을 줄 때 먼저 두 개의 시작점(start)들 (블록 시작 ➡️ 인라인 시작)을 적고, 그 다음에 두 개의 끝점(end)들 (블록 끝 ➡️ 인라인 끝)을 적는 겁니다. 이 논리를 알고 나면 훨씬 더 이치에 맞고 합리적인 순서라는 걸 깨닫게 되실 거예요!
혼합된 쓰기 모드와 그리드 레이아웃 (Mixed writing modes and grid layout)
문서를 해당 언어에 맞는 올바른 쓰기 모드로 표시하는 기본적인 용도 외에도, 전체적으로는 ltr인 문서 안에서 쓰기 모드를 아주 창의적인 디자인 요소로 활용할 수도 있습니다.
이 예제를 볼까요? 화면 한쪽에 링크(link)들이 쭉 나열된 그리드 레이아웃이 있습니다. 우리는 쓰기 모드 속성(writing-mode: vertical-lr)을 사용해서, 사이드바 열(column) 트랙에 있는 이 링크들을 90도 눕혀서 세로로 배치해 버렸습니다. 아주 세련된 디자인 패턴이죠!
.wrapper {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr auto;
font:
1em "Helvetica",
"Arial",
sans-serif;
}
nav {
writing-mode: vertical-lr;
}
nav ul {
list-style: none;
margin: 0;
padding: 1em;
display: flex;
justify-content: space-between;
}
nav a {
text-decoration: none;
}<div class="wrapper">
<div class="content">
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
winter purslane kale. Celery potato scallion desert raisin horseradish
spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo
shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.
Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi
beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki
bean chickweed potato bell pepper artichoke.
</p>
<p>
Nori grape silver beet broccoli kombu beet greens fava bean potato
quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil
turnip greens parsnip. Sea lettuce water chestnut eggplant winter purslane
fennel azuki bean earthnut pea sierra leone bologi leek soko chicory
celtuce parsley jícama salsify.
</p>
</div>
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>
</div>물리적 값과 논리적 속성 (Physical values and logical properties)
논리적인 그리드 속성과 물리적인 속성을 섞어서 사용할 때 주의할 점이 있습니다. 바로 물리적 속성들은 쓰기 모드가 변해도 모양을 바꾸지 않는다는 사실입니다.
우리의 CSS 그리드 레이아웃에서 아이템 정렬하기(Aligning items in CSS grid layout) 가이드 문서에서, 우리는 margin: auto를 사용해서 한 아이템을 다른 아이템들로부터 멀리 밀어내는 기법을 배웠습니다. 여기서 마진(margin)은 물리적 속성이죠. 하지만 대부분의 물리적 속성에는 그에 대응하는 '논리적 속성(Logical property)' 버전이 존재합니다. 이 논리적 속성들은 그리드의 배치나 정렬 속성들처럼 쓰기 모드의 변화를 존중하고 반응합니다. (예: margin-left 대신 margin-inline-start 사용)
비슷한 맥락으로, 그리드 영역 내에서 절대 위치(absolute positioning)를 사용할 때에도, inset 속성(inset properties)의 논리적 버전을 사용해 아이템을 배치할 수 있습니다. (top 대신 inset-block-start 등을 사용)
물리적 속성(값)과 논리적 속성(값)을 한 코드에서 섞어 쓸 때는 이 둘 사이의 '충돌(tension)'을 항상 인식해야 합니다. 예를 들어, ltr 환경에서 잘 보이던 사이트가 rtl로 전환될 때 레이아웃이 깨지지 않도록 CSS를 전체적으로 손봐야 할 수도 있습니다.
이번 Grid 파트에서 배운 '블록(Block)'과 '인라인(Inline)'에 대한 개념은 앞으로 CSS 논리적 속성 및 값(CSS logical properties and values) 전체를 이해하는 데 있어서 엄청난 도움이 될 것입니다!
어떠신가요? 그리드에서 쓰기 모드와 논리적 속성이 왜 중요한지 조금 감이 잡히시나요? 실무에서 다국어 지원을 고려하거나 트렌디한 세로 디자인을 짤 때 아주 유용하게 쓰일 지식이니, 헷갈리면 언제든 다시 질문해 주세요! 😊 화이팅!
