CSS Logical Properties and Values

Posted by in Research

이 글의 주요 예제 및 도식은 Elad Shechte의 아티클과​ Rachel Andrew의 아티클에서 차용하였습니다.

배경

과거에 CSS는 세계인들이 가장 많이 사용하는 언어의 흐름 방식(horizontal-tb, LTR, 텍스트는 왼쪽에서 오른쪽으로 흐르고, 문단은 위에서 아래로 흐르는 방식)에 맞춰서 만들어졌다. 그렇기 때문에 CSS 속성에서 top, left, bottom, right는 항상 위쪽, 왼쪽, 아래쪽, 오른쪽에만 대응이 된다.

하지만, 모든 언어의 흐름이 위와 같지는 않다.

언어 영어 아랍어 일본어 몽골어
writing-mode horizontal-tb horizontal-tb vertical-rl vertical-rl
direction LTR RTL X X
그림
기타 horizontal-tb, LTR도 가능하다.

이렇게 모든 언어의 흐름은 각기 다르다.

하나의 언어에만 초점을 맞추어 CSS를 입히면 상관이 없지만, writing-mode나 direction이 다른 언어들을 대응해야 한다고 하면 이야기는 달라진다.

예를 들어 아래 코드를 적용하면, 다음과 같이 어색한 화면이 된다.

텍스트의 direction이 다름에도 불구하고 둘 다 왼쪽 방향에 border와 padding이 적용되었다.
아래의 화면처럼 ‘왼쪽’보다는 텍스트가 ‘시작’하는 방향 쪽에 border와 padding이 있는 것이 더 자연스럽고, 디자인 관점에서도 더 적합해 보인다.

이런 문제는 ‘물리적인’ 방향에 맞춘 CSS 속성 대신에 언어의 상대적인 흐름에 맞는 ‘논리적인’ 방향에 맞춘 CSS 논리적 속성을 사용하면 해결할 수 있다.

먼저 CSS 논리적 속성의 기본 개념부터 알아보자!

CSS 논리적 속성의 사고방식

논리적 속성의 기본 개념은 inline 축과 block 축이다.

1) Inline axis(dimension)

먼저 inline 축은 inline-level 요소들의 배열을 생각해보면 이해하기 쉽다. inline-level 요소들이 흐르는 축. 즉, 텍스트가 흐르는 축이 inline 축이고, 언어의 writing-mode에 따라 다르다.
예를 들어 영어의 텍스트는 왼쪽에서 오른쪽으로 수평으로 흐른다. 그러므로 영어의 inline 축은 수평이다.

2) Block axis(dimension)

마찬가지로 block 축은 block-level 요소들의 배열을 생각하면 이해하기 쉽다. block-level 요소들이 쌓이는 축이 block 축이다. 그리고 block 축도 언어의 writing-mode에 따라서 달라진다.
예를 들어 영어의 문장 한 줄, 한 줄은 위에서 아래로 수직으로 쌓인다. 그러므로 영어의 block 축은 수직이다.

정리

언어 영어 아랍어 일본어 몽골어
writing-mode horizontal-tb horizontal-tb vertical-rl vertical-rl
direction LTR RTL X X
그림
inline 축 수평 수평 수직 수직
block 축 수직 수직 수평 수평

이를 바탕으로 inline 축과 block 축을 활용한 박스 모델을 보자.

박스 모델

우리가 흔히 알고 있는 박스 모델도 논리적 속성을 적용하여 새롭게 대체될 수 있다.

예를 들어 영어와 같은 특성(horizontal-tb, LTR)을 가진 언어의 박스 모델은 아래와 같이 대체된다.

위에서 알아본 inline 축, block 축의 개념이 추가되었을 뿐만 아니라 top/left/bottom/right 같은 물리적인 개념도 논리적인 개념인 start/end로 대체되었다. start/end는 말 그대로 각 축에서 시작하는 방향, 끝나는 방향을 의미한다.

이렇게 물리적인 개념이 논리적인 개념으로 대체된 CSS ‘속성’과 ‘값’이 있다. 먼저 속성부터 살펴보자.

Logical Properties

1) width, height

너비와 높이를 지정하는 ‘width’와 ‘height’ 속성은 ‘inline-size’와 ‘block-size’로 대체된다. 앞서 설명한 inline 축과 block 축 방향에 맞추어서 생각하면 된다.

영어를 예로 들면 width는 텍스트가 흘러가는 사이즈이므로 inline-size로, height은 문장이 쌓이는 사이즈인 block-size로 대체된다.

width = inline-size
height = block-size

몽골어의 경우는 영어와 반대다.
몽골어의 텍스트는 위에서 아래로 수직방향으로 흐르며, 문장은 왼쪽에서 오른쪽으로 수평방향으로 쌓인다.
따라서 텍스트가 흘러가는 사이즈인 inline-size가 height이 되며, 문장이 쌓이는 사이즈인 block-size가 width가 된다.

height = inline-size
width = block-size

min/max-width, min/max-height 속성은 똑같이 앞에 min/max를 붙여주면 된다.

정리

writing-mode에 따라서 달라진다.

언어 영어 아랍어 일본어 몽골어
writing-mode horizontal-tb horizontal-tb vertical-rl vertical-rl
direction LTR RTL X X
그림
width inline-size inline-size block-size block-size
height block-size block-size inline-size inline-size
min/max-width min/max-inline-size min/max-inline-size min/max-block-size min/max-block-size
min/max-height min/max-block-size min/max-block-size min/max-inline-size min/max-inline-size

2) margin, padding and border

간격, 여백, 테두리를 지정하는 ‘margin’, ‘padding’, ‘border’ 속성은 ‘inline/block’, ‘start/end’의 조합으로 대체된다.

먼저 inline 축과 block 축 방향을 생각하고, 시작 방향과 끝 방향을 더해주면 된다.

예를 들어 영어에서 텍스트가 흐르는 inline 축은 왼쪽에서 시작하여 오른쪽으로 흐른다. 그러므로 물리적인 값 margin-left, margin-right는 논리적인 값 margin-inline으로 대체되며, 시작 방향과 끝 방향을 나타내는 start/end를 더해 최종적으로 margin-left는 margin-inline-start, margin-right는 margin-inline-end로 대체된다.
마찬가지로 문장이 쌓이는 block 축은 위에서 시작하여 아래로 흐르므로 margin-top, margin-bottom은 각각 margin-block-start, margin-block-end로 대체된다.

padding, border도 똑같은 개념으로 적용된다.

정리

writing-mode와 direction에 따라서 달라진다.

언어 영어 아랍어 일본어 몽골어
writing-mode horizontal-tb horizontal-tb vertical-rl vertical-rl
direction LTR RTL X X
그림
margin-top margin-block-start margin-block-start margin-inline-start margin-inline-start
margin-left margin-inline-start margin-inline-end margin-block-end margin-block-start
margin-bottom margin-block-end margin-block-end margin-inline-end margin-inline-end
margin-right margin-inline-end margin-inline-start margin-block-start margin-block-end

3) Position offsets

position 속성과 함께 사용되어 위치를 잡아주는 속성인 ‘top/left/bottom/right’도 논리적 속성으로 대체된다.
top/left/bottom/right는 위와 똑같이 ‘inline/block’, ‘start/end’의 조합으로 대체되지만 ‘inset’이라는 프리픽스가 붙어 ‘inset-block-start/inset-inline-start/inset-block-end/inset-inline-end’로 대체된다.

영어에서는 아래와 같이 대체된다.

top = inset-block-start
left = inset-inline-start
bottm = inset-block-end
right = inset-inline-end

정리

writing-mode와 direction에 따라서 달라진다.

언어 영어 아랍어 일본어 몽골어
writing-mode horizontal-tb horizontal-tb vertical-rl vertical-rl
direction LTR RTL X X
그림
top inset-block-start inset-block-start inset-inline-start inset-inline-start
left inset-inline-start inset-inline-end inset-block-end inset-block-start
bottom inset-block-end inset-block-end inset-inline-end inset-inline-end
right inset-inline-end inset-inline-start margin-block-start inset-block-end

Logical Values

CSS 속성값 중에도 물리적 개념이 들어가 있는 속성값들은 논리적 개념을 가지는 논리적 속성값으로 대체되었다.

1) float, clear

float 속성은 inline 축에서만 움직이는 성질을 가지고 있다. 그렇기 때문에 float의 ‘left/right’ 값은 ‘inline’ 과 ‘start/end’의 조합인 ‘inline-start/inline-end’로 대체되고, float을 해제시켜주는 clear 속성값도 똑같이 대체된다.

float: left = float: inline-start
float: right = float: inline-end

clear: left = clear: inlne-start
clear: right = clear: inline-end

정리

direction에 따라서 달라진다.

언어 영어 아랍어 일본어 몽골어
writing-mode horizontal-tb horizontal-tb vertical-rl vertical-rl
direction LTR RTL X X
그림
left inline-start inline-end inline-start inline-start
right inline-end inline-start inline-end inline-end

2) text-align

text-align 속성의 ‘left/right’ 값은 좀 더 간단히 ‘start/end’로 대체된다.

text-align: left = text-align: start
text-align: right = text-align: end

정리

direction에 따라서 달라진다.

언어 영어 아랍어 일본어 몽골어
writing-mode horizontal-tb horizontal-tb vertical-rl vertical-rl
direction LTR RTL X X
그림
left start end start start
right end start end end

3) resize

<textarea> 요소에 사용되는 resize 속성의 속성값 ‘hosizontal/vertical’은 ‘inline/block’으로 대체된다.

resize: horizontal = resize: inline
resize: vertical = resize: block

정리

writing-mode에 따라서 달라진다.

언어 영어 아랍어 일본어 몽골어
writing-mode horizontal-tb horizontal-tb vertical-rl vertical-rl
direction LTR RTL X X
그림
horizontal inline inline block block
vertical block block inline inline

브라우저 서포트

  • margin/padding/border, width/height, text-align의 논리적 속성, 값은 IE를 제외한 주요 브라우저에서 작동한다.
  • float, position, resize의 논리적 속성, 값은 파이어폭스에서만 작동한다.

이슈

1) 축약형

margin, padding, border 속성은 모두 다 풀어쓴 원형보다 축약형으로 더 많이 사용하는 속성이지만, 논리적 개념으로는 사용할 수 없다. 이미 물리적 개념의 축약형 속성이 사용 중이기 때문이다.

논리적 개념의 축약형 속성이 없는 것은 아니다.

아쉽게도 아직 미지원되지만, 스펙 문서에는 분명히 논리적 개념의 축약형 속성이 명시되어있으며 사용법은 앞에 ‘logical’을 함께 써주면 된다.

축약형 이외에도 스펙 문서에는 명시되어있지만, 아직 미지원되는 새로운 속성들은 몇 가지 더 있다. 궁금하다면 CSS Logical Properties and Values 스펙 문서를 참고하면 좋을 것 같다.

2) 미디어 쿼리

미디어 쿼리의 조건에는 논리적 개념의 속성을 사용하지 못한다. 즉, 흔히 미디어 쿼리의 조건으로 많이 사용되는 min/max-width의 논리적 속성인 ‘min/max-inline-size’ 속성은 미디어 쿼리 조건으로 적용되지 않는다.

예를 들어 writing-mode가 horizontal-tb인 언어에서는 min-width로 적용되고, vertical-rl이나 vertical-lr인 언어에서는 min-height으로 적용되기 위해서 미디어 쿼리의 조건으로 ‘min-inline-size’를 사용하고 싶을 수 있다. 하지만 아직 모든 브라우저에서 미지원되어 사용할 수 없다.

참고 문서