CSS Logical Properties and Values (CSS 논리적 속성과 값)

이 글의 주요 예제 및 도식은 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이 다른 언어들을 대응해야 한다고 하면 이야기는 달라진다.
예를 들어 아래 코드를 적용하면, 다음과 같이 어색한 화면이 된다.

<blockquote dir="ltr">Quotation in English</blockquote>
<blockquote dir="rtl">اقتباس في العربية</blockquote>
blockquote {
    border-left: 5px solid gray;
    padding-left: 5px;
}

텍스트의 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

코드펜) https://codepen.io/witblog/pen/ymgaMz

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도 똑같은 개념으로 적용된다.

margin-top: margin-block-start;
margin-left: margin-inline-start;
margin-bottom: margin-block-end;
margin-right: margin-inline-end;
border-top: border-block-start;
border-left: border-inline-start;
border-bottom: border-block-end;
border-right: border-inline-end;
padding-top: padding-block-start;
padding-left: padding-inline-start;
padding-bottom: padding-block-end;
padding-right: padding-inline-end;

정리

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

코드펜) https://codepen.io/witblog/pen/aepmqQ

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

코드펜) https://codepen.io/witblog/pen/PMpKmY

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

코드펜) https://codepen.io/witblog/pen/xvqLXz

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

코드펜) https://codepen.io/witblog/pen/eqegyr

브라우저 서포트

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

이슈

1) 축약형

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

/* physical */
margin: 10px;

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

/* logical */
margin: logical 10px;

축약형 이외에도 스펙 문서에는 명시되어있지만, 아직 미지원되는 새로운 속성들은 몇 가지 더 있다. 궁금하다면 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’를 사용하고 싶을 수 있다. 하지만 아직 모든 브라우저에서 미지원되어 사용할 수 없다.

/* physical - Working */
@media (min-width: 640px){
     .main-content{
            background:red;
      }
}
/* logical - Not Working */
@media (min-inline-size: 640px){
      .main-content{
            background:red;
      }
}

CSS Logical Properties and Values

글쓴이 신다연 날짜 2019년 8월 5일2019년 8월 5일

배경

CSS 논리적 속성의 사고방식

1) Inline axis(dimension)

2) Block axis(dimension)

정리

박스 모델

Logical Properties

1) width, height

정리

2) margin, padding and border

정리

3) Position offsets

정리

Logical Values

1) float, clear

정리

2) text-align

정리

3) resize

정리

브라우저 서포트

이슈

1) 축약형

2) 미디어 쿼리

참고 문서

1개의 댓글

이상윤 · 2023년 2월 13일 2:02 오후

답글 남기기 응답 취소

Research

scrollbar-gutter 와 classic scrollbar 대응하기

Research

Media Query(미디어쿼리)의 모든 것 – 3. 더 알아보기

Research

Media Query(미디어쿼리)의 모든 것 – 2. 실전 적용

CSS Logical Properties and Values

글쓴이 신다연 날짜 2019년 8월 5일2019년 8월 5일

배경

CSS 논리적 속성의 사고방식

1) Inline axis(dimension)

2) Block axis(dimension)

정리

박스 모델

Logical Properties

1) width, height

정리

2) margin, padding and border

정리

3) Position offsets

정리

Logical Values

1) float, clear

정리

2) text-align

정리

3) resize

정리

브라우저 서포트

이슈

1) 축약형

2) 미디어 쿼리

참고 문서

이 글 공유하기:

1개의 댓글

이상윤 · 2023년 2월 13일 2:02 오후

답글 남기기 응답 취소

관련 글

Research

scrollbar-gutter 와 classic scrollbar 대응하기

Research

Media Query(미디어쿼리)의 모든 것 – 3. 더 알아보기

Research

Media Query(미디어쿼리)의 모든 것 – 2. 실전 적용