블로그에 개인적으로 사용한 "기술"을 요약해놓고 나중 복기하는 용도로 사용했었는데,
chatgpt가 나타난 이후로는 위 용도를 완전히 대체해버려서
블로그를 쓰거나 보는것을 계속 미루게 되는것 같습니다.
그래도 간단히 요즘 공부한 것을 요약해서 써볼려고 합니다..
1. Logical Properties란?
CSS Logical Properties(논리적 속성)은 요소의 좌우(인라인 방향)나 상하(블록 방향)처럼 문서의 쓰기 방향에 따라 바뀌는 속성을 말합니다
기존 CSS 속성들은 left, right, top, bottom처럼 물리적인 방향을 지정했지만, Logical Properties는 이러한 대신
인라인(inline)과 블록(block) 방향으로 속성을 지정합니다. 예를 들어 left와 right는 인라인 방향의
시작(start)과 끝(end)으로, top과 bottom은 블록 방향의 시작과 끝으로 표현됩니다
이렇게 함으로써 요소의 실제 배치 방향(LTR인지 RTL인지 등)에 따라 속성이 자동으로 적용되는 것입니다.
새로운 박스 모델
- Width, Height
- 영어(LTR) 환경:
- width는 텍스트의 흐름 방향이므로 inline-size로 대체
- height는 문장이 쌓이는 방향이므로 block-size로 대체
- 몽골어와 같이 수직 텍스트 환경:
- 텍스트 흐름이 수직이므로 inline-size가 height가 되고,
- 문장이 쌓이는 방향이 수평이 되어 block-size가 width로 대체
2. Position Offsets
- 기존의 top/left/bottom/right는 논리적 속성으로 변환되며,
- top → inset-block-start
- left → inset-inline-start
- bottom → inset-block-end
- right → inset-inline-end
요약하자면 아래와 같습니다.
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;
이외에도 다양한 속성들이 있는데, 아래 링크에서 잘 설명해둔것 같습니다.
https://wit.nts-corp.com/2019/08/05/5621
2. 왜 RTL/LTR이 중요할까?
전세계에는 영어처럼 왼쪽에서 오른쪽으로 쓰는 언어(LTR)뿐만 아니라 아랍어, 히브리어처럼 오른쪽에서 왼쪽으로 쓰는 언어(RTL)도 많이 있습니다
웹 페이지를 다국어로 지원할 때 단순히 left, right 같은 물리적 속성만 사용하면, RTL 언어에서는 레이아웃이 의도와 다르게 표시되는 문제가 발생합니다. 왜냐하면 예를 들어 left는 문서의 방향과 무관하게 항상 왼쪽을 의미하기 때문에, RTL 문서에서도 그대로 왼쪽에 적용되어 “시작 부분”에 적용되지 않기 때문입니다
이러한 문제 때문에 RTL 지원을 위해 별도의 CSS를 작성하거나, dir="rtl"일 때 클래스를 다르게 적용하는 등의 추가 작업이 필요해지곤 합니다.
3. Tailwind에서 기존 클래스를 덮어쓰는 방법
Tailwind CSS는 유틸리티 퍼스트(utility-first) 프레임워크로, 기본적으로 물리적 속성 기반의 클래스(.ml-4는 margin-left 등)를 제공합니다. Tailwind 자체적으로는 (과거 버전 기준) 논리적 속성 전용 유틸리티를 제공하지 않았기 때문에, RTL 지원을 위해서는 플러그인이나 커스터마이징이 필요했습니다. 다행히 Tailwind v3부터는 일부 논리적 속성을 다루는 유틸리티가 도입되었는데요. 예를 들어 ms-4는 margin-inline-start: 1rem, me-4는 margin-inline-end: 1rem에 해당하여, 콘텐츠 방향에 따라 좌우 마진을 알아서 적용해줍니다
이미 tailwind를 사용하면서 기본 값들 (w, ml-1 등등..)에 익숙해졌는데 새로운 값을 배우려니 귀찮기도 하고,
혹시 크로스 브라우징 이슈가 발생한다면.. (caniuse에 따르면 ie가 아니면 거의 문제없긴 합니다) 롤백이 쉽도록
직접 커스텀 플러그인으로 기존 위치 정보(width, left 등)을 logical properties로 overwrite하는 플러그인을 구현해서 사용해봤습니다. .ml-<값> 클래스가 margin-inline-start를, .mr-<값> 클래스가 margin-inline-end를 지정하도록 유틸리티를 추가하면 됩니다.
// tailwind.config.js의 plugins 배열 안
plugins: [
function ({ addUtilities, theme, variants }) {
const spacing = theme("spacing");
const newUtilities = {};
for (const [key, value] of Object.entries(spacing)) {
newUtilities[`.ml-${key}`] = { "margin-inline-start": value };
newUtilities[`.mr-${key}`] = { "margin-inline-end": value };
}
addUtilities(newUtilities, variants("margin"));
}
]
이렇게 하면 Tailwind의 기존 .ml-1, .mr-1, .ml-2, .mr-2, ... 클래스들이 모두 물리적 margin-left/right 대신 논리적 margin-inline-start/end로 동작하도록 덮어쓰게 됩니다.
https://gist.github.com/lodado/e286cdc452c6362117c2129abfab562a
위 링크는 제가 지금 사용하고 있는 커스텀 플러그인 코드 예시입니다.
5. 마무리
CSS Logical Properties를 적극 활용하면 별도의 RTL 전용 스타일시트 없이도 하나의 CSS로 양쪽 방향의 레이아웃을 모두 커버할 수 있습니다. 이는 다국어 웹사이트나 글로벌 서비스에서 유지보수를 훨씬 쉽게 만들어줍니다
이 글을 쓰면서 알게 된건데, 비슷한 역할을 하는 tailwindcss-vanilla-rtl 같은 플러그인 라이브러리가 이미 있군요..
그리고 이걸 왜 공부했냐고요?
다국어 지원이 되는 사이드 프로젝트를 구현하다가, 전 세계 사용 언어 5위권에 속하는 아랍어(rtl)를 지원하기 위해
logical properties를 사용했습니다..!
아래 링크에서 제 사이드 프로젝트를 확인 가능하고,
덤으로 rtl ltr이 지원되는 swipe(?) 기능 list 도 확인하실 수 있습니다..!
참고 자료:
CSS Tricks – CSS Logical Properties and Values
MDN Web Docs – CSS logical properties and values 모듈
Tailwind CSS 공식 문서
Dev.to – CSS Logical Properties - RTL in a web platform
'Front-end > 브라우저' 카테고리의 다른 글
| Cross-Origin Read Blocking(CORB) (3) | 2022.02.04 |
|---|---|
| 크롬 브라우저의 이벤트 핸들링 처리 (0) | 2022.02.01 |
| 브라우저의 렌더링 과정 (feat GPU) (0) | 2022.01.30 |
| [운영체제] 크롬 웹 브라우저의 구조 (프로세스 & 쓰레드) (0) | 2022.01.30 |