HTML/CSS - logical properties

logical properties를 사용하는 이유

• 다국어 지원(예: 영어 ↔ 아랍어) 필요할 때 → inline-size, block-size 추천

• 세로쓰기(writing-mode: vertical-rl 등) 사용할 때 → inline-size, block-size 추천

writing mode

텍스트가 어떤 방향으로 흐르는지를 결정하는 속성

writing-mode: horizontal-tb; /* 기본값 */

• horizontal-tb (가로쓰기, 위 → 아래)
• 영어, 한국어, 대부분의 서양권 언어에서 사용
• 텍스트가 왼쪽 → 오른쪽, 줄이 위에서 아래로 배치됨

writing-mode: vertical-rl;

• vertical-rl (세로쓰기, 오른쪽 → 왼쪽)
• 일본어, 중국어 신문/책에서 자주 사용
• 텍스트가 위에서 아래로, 줄이 오른쪽 → 왼쪽 배치됨

속성

값	설명	텍스트 흐름
horizontal-tb	기본값 (가로쓰기)	좌 → 우, 줄은 위 → 아래
vertical-rl	세로쓰기 (오른쪽 → 왼쪽)	위 → 아래, 줄은 오른쪽 → 왼쪽
vertical-lr	세로쓰기 (왼쪽 → 오른쪽)	위 → 아래, 줄은 왼쪽 → 오른쪽

크기관련 물리적 속성 vs 논리적 속성 비교

물리적 속성	논리적 속성
width	inline-size
height	block-size
min-width	min-inline-size
min-height	min-block-size
max-width	max-inline-size
max-height	max-block-size

예제

.box {
  inline-size: 200px; /* 가로 크기 */
  block-size: 100px; /* 세로 크기 */
}

패딩관련 물리적 속성 vs 논리적 속성 비교

물리적 속성	논리적 속성
padding-top	padding-block-start
padding-bottom	padding-block-end
padding-left	padding-inline-start
padding-right	padding-inline-end