CSS 논리적 속성과 값

CSS 논리적 속성과 값 모듈은 레이아웃을 물리적인 방향과 차원의 매핑이 아닌 논리적인 방식의 매핑으로 제어할 수 있는 논리적 속성들과 값으로 정의합니다. 논리적 속성은 해당하는 물리적 속성의 대응하는 방향 상대성을 정의합니다.

문장의 시작 부분이 항상 왼쪽 부분인 것은 아닙니다. 다른 쓰기 체계는 다양한 방향성을 가지고 있습니다. 아래 예시들을 확인해 보세요.

• 영어와 포르투갈어는 왼쪽에서 오른쪽이로 쓰여지고 새로운 문장은 기존 문장 아래에 추가됩니다.
• 히브리어와 아라비아어는 오른쪽에서 왼쪽으로 쓰여지는 언어이고 새로운 문장은 기존 문장 아래에 추가됩니다.
• 몇몇의 쓰기 모드에서, 텍스트로 이루어진 문장은 수직이고, 위에서 아래로 쓰입니다. 중국어, 베트남어, 한국어, 그리고 일본어는 전통적으로 위에서 아래 방향인 수직 방향으로 쓰여지며, 새로운 문장은 기존 문장 왼쪽에 추가됩니다.
• 전통 방식의 몽골어 또한 위에서 아래로 쓰여지지만, 새로운 문장은 기존 문장의 오른쪽에 추가됩니다.

이 모듈에서 정의된 논리적 속성은 물리적 방향이 아니라 콘텐츠의 쓰기 방향에 따른 속성을 정의할 수 있습니다. 이 의미는 콘텐츠가 다른 쓰기 방식의 언어로 번역되어도 콘텐츠가 의도한대로 렌더링된다는 것을 의미합니다.

논리적 속성과 값은 흐르는 방향을 설명하기 위해 블록과 인라인이라는 추상적인 용어들을 사용합니다. 이러한 용어들의 물리적 의미는 쓰기 모드에 의존합니다.

블록 차원은 문장 내의 흐름에 수직적인 차원입니다. 즉, 가로 방향의 쓰기 모드에서는 수직 차원이고, 세로 방향의 쓰기 모드에서는 수평 차원입니다. 표준 영어 텍스트의 경우에는 수직 차원입니다.

인라인 차원은 문장 내의 흐름과 평행합니다. 즉, 가로 방향의 쓰기 모드에서는 수평 차원이고, 세로 방향의 쓰기 모드에서는 수직 차원입니다. 표준 영어 텍스트의 경우에는 수평 차원입니다.

CSS 는 본래 물리적인 좌표만을 위해 고안되었습니다. 논리적 속성과 값 모듈은 많은 값과 속성들에 대응하는 흐름 상대성을 정의합니다. 물리적 값 (top, bottom, left, right) 만 수용했던 속성들은 이제 흐름 상대적인 논리적 속성 (block-start, block-end, inline-start, inline-end) 들도 허용하게 됩니다.