논리적 속성 (Logical Properties)
전통적인 CSS에서는 여백을 줄 때 margin-left, padding-top과 같이 물리적 방향(상하좌우)을 사용했습니다. 하지만 논리적 속성(Logical Properties)은 글이 읽히는 방향을 기준으로 삼습니다.
가로쓰기(한국어, 영어 등) 환경에서 글은 왼쪽에서 오른쪽으로(Inline), 위에서 아래로(Block) 흐릅니다. 따라서 margin-left 대신 margin-inline-start를 사용하면, 아랍어(우측에서 좌측으로 읽는 언어) 환경으로 전환될 때 코드를 수정하지 않아도 여백이 자동으로 우측으로 이동합니다. 이는 국제화(i18n)와 유연한 컴포넌트 설계에 필수적입니다.
<div class="demo-box">
<span class="badge">New</span>
일반적인 LTR(Left-to-Right) 언어 환경입니다. 배지의 오른쪽에 여백이 있습니다.
</div>
<div class="demo-box rtl-mode">
<span class="badge">جديد</span>
아랍어와 같은 RTL(Right-to-Left) 환경입니다. 논리적 속성을 사용했기 때문에 자동으로 배지의 왼쪽에 여백이 생깁니다!
</div>