안녕하세요! 프론트엔드 개발자 양성 과정 강사입니다. 이번에는 현대 CSS에서 정말, 정말 중요해진 개념인 논리적 속성(Logical Properties)에 대해 다뤄볼 텐데요!
글로벌 서비스를 만들거나 다국어를 지원하는 웹사이트를 구축할 때 없어서는 안 될 필수 지식입니다. 실무에서도 이제 물리적 방향(left, right) 대신 논리적 방향(start, end)을 쓰는 것이 권장되는 추세거든요. 공식 문서의 내용을 하나도 빠짐없이 번역해 드리고, 이해하기 쉽도록 제 실무 팁도 팍팍 넣어드릴 테니 집중해서 잘 따라와 주세요!
논리적 속성과 값의 기본 개념 (Basic concepts of logical properties and values)
CSS 논리적 속성과 값 모듈(CSS logical properties and values module)은 CSS에 있는 수많은 물리적 속성(physical properties)과 값들을 콘텐츠의 흐름(flow)에 맞게 매핑(mapping)해 주는 역할을 합니다. 이 문서에서는 해당 모듈에 대해 논의하고, 흐름 상대적 값(flow relative values)과 속성들에 대해 설명합니다.
💡 강사의 팁:
'물리적 속성'이란 우리가 흔히 쓰던top,bottom,left,right,width,height를 말합니다. 화면을 기준으로 위/아래/좌/우가 고정되어 있죠.
반면 '논리적 속성'은 글씨가 써지는 방향이나 줄 바꿈이 일어나는 방향을 기준으로 삼습니다. 한국어나 영어처럼 왼쪽에서 오른쪽으로 읽는 언어냐, 아랍어처럼 오른쪽에서 왼쪽으로 읽는 언어냐에 따라 좌우 기준이 유동적으로 바뀐다는 뜻이에요!
왜 논리적 속성이 유용할까요? (Why are logical properties useful)
CSS 2.1 및 그 이전 버전에서는 요소들의 크기를 화면의 물리적인 차원(크기)에 따라 지정했습니다. 그래서 우리는 박스에 width와 height를 주고, 아이템을 top과 left를 기준으로 배치했으며, 테두리(border), 마진(margin), 패딩(padding)을 top, right, bottom, left 등에 할당해 왔죠.
하지만 논리적 속성과 값 모듈은 이러한 물리적 속성과 값들을 논리적인(즉, 흐름에 상대적인) 대응 요소로 매핑합니다. 예를 들어, left/right나 top/bottom 대신 start와 end를 사용하는 식이죠.
이러한 매핑은 원본 레이아웃과 쓰기 모드(writing mode)의 방향이 다른 언어로 사이트가 번역될 때 매우 유용합니다.
예를 들어, CSS 그리드 레이아웃을 사용한다고 가정해 봅시다. 그리드 컨테이너에 너비(width)가 적용되어 있고, 그리드 아이템들을 정렬하기 위해 align-self와 justify-self 속성을 사용했습니다. 이 속성들은 '흐름 상대적(flow relative)'이므로, justify-self: start는 인라인(inline) 차원의 시작점(start)에 아이템을 정렬하고, align-self: start는 블록(block) 차원의 시작점에 아이템을 정렬합니다.
만약 writing-mode 속성을 사용하여 이 컴포넌트의 쓰기 모드를 vertical-rl(세로쓰기, 오른쪽에서 왼쪽으로)로 변경하더라도 정렬은 원래 의도했던 것과 똑같은 방식으로 잘 작동합니다. 인라인 차원은 수직으로 흐르고 블록 차원은 수평으로 흐르게 되니까요.
하지만 그리드의 전체적인 모습은 이전과 같지 않을 것입니다. 왜냐하면 컨테이너에 할당된 width(너비)는 물리적인 가로 치수일 뿐, 텍스트가 흐르는 논리적인 방향과는 아무런 연결 고리가 없기 때문입니다.
만약 여기서 물리적 속성인 width 대신 논리적 속성인 inline-size를 사용한다면, 컴포넌트가 어떤 쓰기 모드로 표시되든 상관없이 항상 완벽하게 똑같은 비율과 방식으로 작동하게 됩니다!
아래의 실시간 예제에서 직접 테스트해 보세요. .grid의 writing-mode를 vertical-rl에서 horizontal-tb로 변경해 보면서 서로 다른 속성들이 레이아웃을 어떻게 변화시키는지 확인해 보시기 바랍니다.
<div class="grid">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>body {
font: 1.2em / 1.5 sans-serif;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
border: 2px solid rgb(96 139 168);
border-radius: 5px;
}
.grid > * {
border-radius: 5px;
border: 2px solid rgb(96 139 168 / 0.4);
background-color: rgb(96 139 168 / 0.2);
padding: 10px;
}
.grid :nth-child(1) {
align-self: start;
}
.grid :nth-child(2) {
justify-self: end;
}.grid {
writing-mode: vertical-rl;
inline-size: 400px;
}가로 방향(왼쪽에서 오른쪽, 위에서 아래)이 아닌 다른 쓰기 모드로 사이트를 작업할 때, 또는 디자인적인 이유로 창의적인 쓰기 모드를 사용할 때, 콘텐츠의 흐름에 맞춰 레이아웃을 다룰 수 있다는 것은 무척 합리적이고 중요합니다.
💡 강사의 팁:
실무에서 버튼을 만들 때 예전에는padding-left: 20px; padding-right: 20px;를 주었죠? 이제는padding-inline: 20px;한 줄로 쓰는 것이 대세입니다! 아랍어(우측에서 좌측으로 읽음) 사이트를 지원할 때 레이아웃이 깨지지 않게 해주는 마법의 속성이니 꼭 손에 익혀두세요!
블록과 인라인 차원 (Block and inline dimensions)
흐름 상대적(flow relative) 속성과 값을 사용할 때 가장 핵심이 되는 개념은 바로 블록(block)과 인라인(inline)이라는 두 가지 차원입니다. 플렉스박스나 그리드 레이아웃 같은 최신 CSS 레이아웃 방식들은 아이템을 정렬할 때 right/left나 top/bottom 대신 바로 이 block과 inline 개념을 사용합니다.
인라인(inline) 차원은 현재 사용 중인 쓰기 모드에서 한 줄의 텍스트가 쭉 이어지는 방향을 뜻합니다. 따라서 글이 왼쪽에서 오른쪽으로 수평으로 흐르는 영어(또는 한국어) 문서나, 오른쪽에서 왼쪽으로 흐르는 아랍어 문서에서 인라인 차원은 가로(수평)가 됩니다. 하지만 세로 쓰기 모드(예: 일본어 전통 세로 문서)로 바꾸면 텍스트가 위에서 아래로 세로로 흐르기 때문에, 이때의 인라인 차원은 세로(수직)가 됩니다.
블록(block) 차원은 그 반대 차원으로, 단락(paragraph)과 같은 블록 요소들이 차곡차곡 순서대로 쌓이는 방향을 의미합니다. 영어와 아랍어 환경에서는 블록들이 위에서 아래로 수직으로 쌓이지만, 세로 쓰기 모드에서는 블록들이 수평 방향(보통 오른쪽에서 왼쪽)으로 쌓이게 됩니다.
아래 다이어그램은 가로 쓰기 모드(horizontal writing mode)에서의 인라인 및 블록 방향을 명확하게 보여줍니다:
다음 다이어그램은 세로 쓰기 모드(vertical writing mode)에서의 블록과 인라인 방향을 보여줍니다:
💡 강사의 팁:
이 두 단어만 확실히 잡아두세요!
- Inline (인라인): 글씨가 써지는 줄(Line)의 방향! (가로 쓰기에선 좌우)
- Block (블록): 엔터를 쳤을 때 다음 줄이 쌓이는 방향! (가로 쓰기에선 상하)
그래서width대신inline-size를 쓰고,height대신block-size를 쓰게 되는 거랍니다.
더 보기 (See also)
- 그리드 레이아웃에서의 박스 정렬 (Box alignment in grid layout)
- 플렉스 레이아웃에서의 박스 정렬 (Box alignment in flex layout)
- 흐름 레이아웃과 쓰기 모드 (Flow layout and writing modes)
- 논리적 속성과 값 이해하기 (Understanding logical properties and values) - Smashing Magazine (2018)
MDN 문서 개선에 참여하기 (Help improve MDN)
- 이 페이지가 도움이 되셨나요? [ Yes / No ]
- 기여하는 방법 알아보기
- 이 페이지는 MDN 기여자들(MDN contributors)에 의해 2025년 11월 7일에 마지막으로 수정되었습니다.
- GitHub에서 이 페이지 보기
- 이 콘텐츠의 문제점 신고하기
논리적 속성, 처음에는 이름이 낯설어서 어렵게 느껴지지만, 한 번 익혀두면 다국어 대응이나 반응형 웹을 만들 때 어마어마한 시간을 단축해 주는 효자 속성입니다. margin-left 대신 margin-inline-start를 타이핑하는 연습부터 시작해 보시는 건 어떨까요? 궁금한 점이 있으시면 언제든 편하게 질문해 주세요!
