CSS 논리 속성 빠른 안내서

기본 및 고급 사용 예제를 포함한 CSS 논리적 속성에 대한 기사입니다.만약 당신이 CSS 논리 속성을 필요로 하지 않는다고 생각한다면 다시 생각해 보세요!
만약 당신이 전 세계 고객을 위해 사이트를 개발한 적이 있다면, 당신은 '왼쪽에서 오른쪽으로'(ltr)과' 오른쪽에서 왼쪽으로'(rtl)이라는 두 용어를 만날 수 있을 것이다.
'왼쪽에서 오른쪽으로' 언어는 영어나 프랑스어 등 대부분의 서양 언어를 포함하고, '오른쪽에서 왼쪽으로' 언어는 아랍어, 페르시아어, 히브리어를 포함한다.
웹 사이트에서 HTML에서 dir="ltr"(또는 rtl)을 사용하거나 CSS에서 direction - 속성을 사용하여 (언어) 방향을 전환할 수 있습니다.
그렇다면 방향을 바꿀 때 어떤 속성이 영향을 받나요?
기본적으로 모든 속성은 단어 left 또는 right을 포함한다.
빠르게 검색하려면 이 컨텐트를 console에 붙여넣습니다.

const logical = ['right', 'left'];
const props = [...getComputedStyle(document.body)].filter(entry => logical.some(key => entry.includes(`-${key}`)));
console.table(props);

하지만 이게 다가 아니야!일부 언어는 CSS writing-mode-property를 사용하여 수직으로 작성됩니다.따라서 코드 세션에 top과 bottom을 포함해야 합니다.

const logical = ['top', 'right', 'bottom', 'left'];

그리고 대부분 단어 height 또는 width의 속성을 포함한다.
요소를 position: absolute; 및 left: 0;으로 지정하면 방향을 변경할 때 해당 요소가 작동하지 않거나: 작동하지만 예상에 맞지 않습니다. 요소는 left을 유지하고 다른 모든 내용은 방향을 변경하기 때문입니다.
이를 수정하려면 rtl에 다음과 같은 추가 CSS를 작성할 수 있습니다.

[dir="rtl"] .selector {
  left: auto;
  right: 0;
}

그러나... 많은 구성 요소가 있는 사이트에 있어서 이것은 너무 많은 작업이 될 것이다. 단지 해결 방안에 불필요한 CSS를 많이 추가했을 뿐이다.
다행히도 더 똑똑한 방법이 있다.

CSS 논리 속성

MDN:

CSS Logical Properties and Values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings

논리적 속성에 대해 left과 right은 inline이고 top과 bottom은 block이다.
이 "상자"안의 방향을 표시하기 위해서, 우리는 단어 start과 end을 사용합니다.
따라서 포지셔닝의 새로운 가치는 다음과 같습니다.
가치관
논리 값
왼쪽
인라인 삽입 시작
옳았어
직선 열 끝 삽입하기
꼭대기
블록 삽입 시작
밑바닥
블록 단자
논리적 속성을 사용하면 이전에는 불가능했던 모든 속성을 한 번에 설정할 수도 있습니다.

.before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.after {
  position: fixed;
  inset: 0;
}

margin-top은 margin-block-start, margin-bottom은 margin-block-end으로 바뀌었다.margin-left에서 margin-inline-start10margin-right에서 margin-inline-end으로 바뀌었다.
등등:border-blockborder-inline10padding-block...
이 형식과 다른 유일한 특성은 경계 반지름입니다.
가치관
논리 값
테두리 왼쪽 위 반지름
경계 시작 반지름
경계 오른쪽 상단 반지름
경계 시작점 끝점 반지름
경계 왼쪽 아래 반지름
경계-끝-시작 반지름
경계 오른쪽 아래 반지름
경계단 반지름
근데 그만해.documentation is here, 지금 몇 가지 예를 보겠습니다!

예.

이 카드는 dir="ltr"으로 제공됩니다.

이 카드는 dir="rtl"과 함께 제공됩니다.

응, 이'최고치'의 제목은 position: absolute과 left: 0;인데, 우리가 방향을 바꿔도 변하지 않을 거야.
다음과 같이 변경하겠습니다.

.caption {
  inset-inline-start: 0;
  position: absolute;
}

많이 좋아졌어!이제 inset-inline-end: 0의 주요 차별화 요소를 살펴보겠습니다.

보기에는 괜찮은데 간격이 좀 필요할 것 같아요.편집자는 사용자 지정 속성 translate-x: var(--S-tx, -10%)과 translate-y: var(--S-ty, 10%)을 사용하여 스프레이를 찾으려고 할 수 있으므로 굳이 인코딩하지 않겠습니다.

지금 우리가 방향을 바꿀 때 무슨 일이 일어날까요?

응, 그다지 좋지 않아. 번역된 값이 여전히 존재해.내가 말한 바와 같이 편집자가 동적 위치를 바꿀 수 있다면, 우리는 이 값들을 억지로 인코딩할 수 없다.
불행하게도 translate-inline 또는 translate-block이 존재하지 않으므로 scaleX, --S-sx에 기본값 1의 속성을 추가하겠습니다.

.splash {
  transform:
    scaleX(var(--S-sx, 1))
    translateX(var(--S-tx, 0%))
    translateY(var(--S-ty, 0%))
}

그리고 dir="rtl"을 사용하여 이 속성을 간단하게 업데이트할 수 있습니다.

[dir="rtl"] .splash { --S-sx: -1; }

정말 쓸모가 있다!scaleX(1)에서 scaleX(-1)으로 바뀌지만 텍스트 줄도 뒤집는다!이 문제를 해결하기 위해 텍스트 줄 주위에 패키지를 추가하고 뒤집습니다.

[dir="rtl"] .splash-lines { transform: scaleX(-1) translateX(-100%); }

이 예에서는 margin-inline-end: -10%;과 margin-block-start: 10%;을 사용할 수도 있지만 translate과 scaleX을 사용할 수 있으므로 스파크는 모양이 달라지고 뒤집힙니다.
다음은 ltr의 또 다른 예입니다.
rtl:

마지막 예제에서는 다음 방법을 사용하여 이미지(및 포장)를 추가합니다.

.image {
  transform:
    scaleX(var(--I-sx, 1))
    translateX(var(--I-tx, 0))
    translateY(var(--I-ty, 0));
}
.image-wrapper {
  inset-block-end: 0;
  inset-inline-end: 0;
  transform: scaleX(var(--IW-sx, 1)) translateX(var(--IW-tx, 0));
}

우리는 splash처럼 그것을 번역하고 drop-shadow을 추가할 것이다.

이전과 같은 원리를 사용하지만 .image에서 calc()의 변수(.image-wrapper-ulated 속성)를 사용하면 우리는 이렇게 위치를 뒤집고 조정할 수 있다.

[dir="rtl"] .image { --I-sx: -1; }
[dir="rtl"] .image-wrapper { --IW-sx: -1; --IW-tx: calc(-1% * var(--I-tx)); }

perspective-변수와 rotateY-변수를 추가하면 다음과 같은 효과를 얻을 수 있습니다.

그리고 rtl의 변수만 업데이트하면 됩니다.

결론

비록 당신의 사이트가 현재 ltr에 불과하다고 해도 당신은 CSS 논리 속성을 사용해야 합니까?맞아요!너는 잃을 것이 없다. 만약 네가 앞으로 국제 지원을 늘리고 싶다면, 너의 사이트는 미래의 증명이다.
읽어주셔서 감사합니다!