What are writing modes?

CSS의 writing-mode 는 텍스트가 쓰여지는 방향을 설정한다.
"가나다"를 "다나가" 로 바꿔주는 인라인 방향를 변경하는 것이 아니라 블록 뱡향을 변경한다.
사용 가능한 값으로는 다음과 같다.

• horizontal-tb : 위에서 아래 방향으로 블록이 설정된다.
  

• vertical-rl : 오른쪽에서 왼쪽으로 블록이 설정된다.
  

• vertical-lr : 왼쪽에서 오른쪽으로 블록이 설정된다.
  
  
  

Writing modes and block and inline layout

• 수직 모드 ( horizontal-tb )
  

• 수평 모드 ( vertical-rl , vertical-lr )
  
  
  

Logical properties and values

writing-mode 가 가로 모드일 때와 세로모드일 때의 width 는 어떻게 적용될까
다음의 두 박스를 보자.

.box {
  width: 150px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}
    

두 박스 모두 화면 기준 가로로 150px가 된다.
텍스트의 방향은 서로 다르지만 width 속성은 화면 방향을 기준으로 가로만 적용된다.

만약 가로 및 세로로 방향을 바꿀때 그 엘리먼트의 가로, 세로, 패딩, 마진 등을 그대로 간직하고 싶다면 Logical properties를 사용한다.

width 의 논리적 속성은 inline-size이다.
height의 논리적 속성은 block-size이다.
다음의 두 박스를 보자.

.box {
  inline-size: 150px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

MDN 페이지에서 논리적 속성 및 값에 대한 모든 매핑된 속성을 볼 수 있다.
MDN 논리적 속성과 값

Should you use physical or logical properties?

이러한 논리적 속성과 값은 나온지 얼마 되지않았고 최근에야 브라우저에 구현되었다.
여러값의 writing-mode 를 사용하지 않는 경우 물리적 속성을 사용하는 것이 더 좋다.
하지만 플랙스박스 및 그리드와 같은 레이아웃을 다루는 페이지에선 논리적 속성으로 구성하는 것이 더 유리할 것이다.

[참고] : MDN