웹 사이트를 디자인 할 때는 전 세계 잠재 고객에게 필수적입니다. 대부분의 개발자는 레이아웃 조정에 마진 왼쪽 및 마진 오른쪽을 사용하는 데 익숙하지만 이러한 특성은 텍스트 방향이 변경되는 환경에서 부족합니다. 다국어 및 양방향 콘텐츠를위한 디자인을 더 쉽게 디자인 할 수있는 최신 CSS 속성을 입력하십시오.

이 기사에서는 마진 왼쪽/마진 오른쪽에서 마진 인라인 시작 및 마진 인라인-엔드로 전환이 유연성을 향상시키고 LTR 및 RTL 언어에서 일관성을 유지하는 방법을 살펴 봅니다.

CSS에서 논리적 특성 이해

마진-왼쪽 및 마진 오른쪽과 같은 전통적인 CSS 속성은 물리적 특성이므로 그들의 동작은 화면의 왼쪽과 오른쪽에 묶여 있습니다. 이것은 영어와 같은 LTR 언어에 적합하지만 페이지 방향이 아랍어 또는 히브리어와 같이 RTL로 전환 할 때 문제를 만듭니다.

CSS3에 소개 된 논리적 특성은 방향에 대한 정보입니다. 문서 또는 요소의 쓰기 모드에 따라 적응합니다. 주요 논리 마진 속성은 다음을 포함합니다 :

• 마진 인라인 시작 : LTR의 마진 왼쪽과 RTL의 마진 오른쪽을 대체합니다.
• 마진 인라인-엔드 : LTR의 마진 오른쪽을 대체하고 RTL의 경우 왼쪽을 대체합니다.

이러한 속성은 양방향 텍스트의 자연스러운 흐름과 더 잘 일치하여 국제화 된 웹 디자인에 필수 불가결 한 것입니다.

왜 마진 인라인-시작?

1- 원활한 RTL 지원
왼쪽의 마진을 사용하면 텍스트 방향에 관계없이 항상 요소의 왼쪽에 마진을 적용합니다. 이 동작은 페이지가 RTL로 전환 되어도 변경되지 않아 오정렬한 레이아웃으로 이어집니다. 대조적으로, 텍스트 방향을 기반으로 마진 인라인-시작 적응물은 마진을 적절한 측면에 적용합니다 :

/* Logical property */
.element {
 margin-inline-start: 20px;
}
/* Equivalent to */
:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

2- 클리너 코드
논리적 특성이 없으면 LTR 및 RTL을 모두 지원하려면 방향 별 스타일이 필요하므로 복잡성과 오류 가능성이 추가됩니다. 비교는 다음과 같습니다.

전통적인 접근 방식 :

:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

현대적인 접근 :

.element {
 margin-inline-start: 20px;
}

3- 미래 방지 및 확장 가능한
논리적 특성은 적응적이고 유연한 레이아웃에 대한 CSS의 지속적인 진화의 일부입니다. 마진 인라인 시작을 채택함으로써 디자인을 최신 표준과 정렬하여 더욱 확장 가능하고 유지 관리 가능합니다.

실제 예제

더 나은 RTL 지원을위한 일반적인 카드 레이아웃을 리팩터링 할 수있는 방법은 다음과 같습니다.
전 : 왼쪽 마진 사용

.card {
 margin-left: 1rem;
 padding-left: 2rem;
}

RTL에서 간격이 왼쪽에 고정되어 있기 때문에 레이아웃이 꺼집니다.
후 : 마진 인라인 스타트 사용

.card {
 margin-inline-start: 1rem;
 padding-inline-start: 2rem;
}

이제 방향이 변경 될 때 마진과 패딩이 자동으로 조정되어 일관된 사용자 경험을 보장합니다.

브라우저 지원

논리적 특성은 Chrome, Edge, Firefox 및 Safari를 포함한 최신 브라우저에서 잘 지원됩니다. 이전 브라우저를 지원 해야하는 경우 폴백 사용을 고려하십시오 :

.card {
 margin-left: 1rem; /* Fallback */
 margin-inline-start: 1rem;
}

최종 생각

Margin-inline-Start와 같은 논리적 특성으로 전환하는 것은 접근성, 유지 관리 및 국제화에 큰 영향을 미치는 작은 변화입니다. 웹이 점점 더 전 세계화되면서 이러한 속성을 채택하면 전 세계 사용자에게 디자인이 포함되고 적응할 수 있습니다.

다음에 마진 왼쪽에 도달하면 잠시 멈추고 고려하십시오 : 마진 인라인 시작이 더 나은 일을합니까? 가능성이 있습니다.

행복한 코딩, 그리고 당신의 디자인이 어떤 언어로든 아름답게 흐르기를 바랍니다!