흐름 기준 약식을 사용한 논리 레이아웃 개선

Chromium용 새로운 논리적 속성 접두사 및 새로운 인셋 속성

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

Chromium 69 (2018년 9월 3일)부터 논리적 속성 및 값을 사용하면 개발자가 실제 방향 및 크기 스타일이 아닌 논리적 방향 및 크기 스타일을 통해 국제 레이아웃을 제어할 수 있습니다. Chromium 87에서는 이러한 논리적 속성과 값을 더 쉽게 작성할 수 있도록 단축키와 오프셋이 제공되었습니다. 이렇게 하면 66부터 약어를 지원하던 Firefox까지 Chromium을 포착합니다. Safari는 테크 프리뷰에서 이 기능을 제공합니다.

라틴어, 히브리어, 일본어가 기기 프레임 내에서 자리표시자 텍스트를 렌더링하는 모습입니다. 텍스트 다음에 화살표와 색상이 표시되므로 블록과 인라인의 두 방향을 연결하는 데 도움이 됩니다.

문서 흐름

논리적 속성, 인라인 및 블록 축에 이미 익숙하고 복습하고 싶지 않다면 건너뛰어도 됩니다. 그렇지 않다면 다음 내용을 간단히 다시 살펴보겠습니다.

영어에서는 글자와 단어가 왼쪽에서 오른쪽으로 흐르고 단락은 위에서 아래로 쌓입니다. 중국어 번체에서는 글자와 단어가 위에서 아래로 표시되고, 단락은 오른쪽에서 왼쪽으로 쌓입니다. 이 두 가지 경우에만 단락에 'margin top'을 적용하는 CSS를 작성하면 언어 스타일 1개에만 적절한 간격을 적용할 수 있습니다. 페이지가 영어에서 중국어 번체로 번역되는 경우 새로운 세로 쓰기 모드에서는 여백이 잘 맞지 않을 수 있습니다.

따라서 상자의 실제 측면은 해외에서 그다지 유용하지 않습니다. 이제 여러 언어를 지원하는 프로세스가 시작됩니다. 상자 모델의 물리적 측면과 논리적 측면을 알아봅니다.

Chrome DevTools에서 p 요소를 검사해 보신 적이 있나요? 이 경우 기본 사용자 에이전트 스타일이 실제가 아닌 논리적이라는 것을 알 수 있습니다.

p {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

Chromium의 사용자 에이전트 스타일시트의 CSS

영어 독자가 생각하는 것처럼 여백이 상단이나 하단에 있는 것이 아닙니다. block-start님과 block-end님입니다. 이러한 논리적 속성은 영어 리더의 '위'와 '아래'와 비슷하지만 또한 일본어 리더의 '오른쪽'과 '왼쪽'과도 비슷합니다. 한 번 작성하면 어디서나 작동합니다.

정상적인 흐름은 웹페이지가 의도적으로 이러한 다방향성의 일부인 경우입니다. 문서 방향 변경에 따라 페이지 콘텐츠가 업데이트되면 레이아웃과 그 요소가 흐름에 있는 것으로 간주됩니다. MDN 또는 CSS 디스플레이 모듈 사양에서 흐름의 '들어오기'와 '아웃'에 대해 자세히 알아보세요. 논리적 속성은 흐름에 있지 않아도 되지만 방향이 변경될 때 많은 까다로운 작업을 실행합니다. 흐름은 방향을 의미하며, 어느 문자, 단어, 콘텐츠가 따라가야 하는지를 나타냅니다. 이렇게 하면 논리적 경로를 차단 및 인라인으로 만들 수 있습니다.

차단 방향은 새 콘텐츠 블록이 따르는 방향입니다(예: '다음 단락을 어디에 배치해야 할까?'). '콘텐츠 블록' 또는 '텍스트 블록'이라고 생각하면 됩니다. 모든 언어는 블록을 정렬하고 각 block-axis에 따라 순서를 지정합니다. block-start은 단락이 처음 배치되는 쪽이고 block-end는 새 단락이 흐르는 쪽입니다.

예를 들어 전통적인 일본어 필기에서는 블록 방향이 오른쪽에서 왼쪽으로 흐릅니다.

인라인 방향은 문자와 단어가 이동하는 방향입니다. 글을 쓸 때 팔과 손이 이동하는 방향을 생각해 보세요. inline-axis를 따라 이동합니다. inline-start는 쓰기를 시작하는 쪽이고 inline-end는 쓰기가 끝나거나 줄바꿈되는 쪽입니다. 위 동영상에서는 inline-axis가 위에서 아래로 이동하지만, 다음 동영상에서는 inline-axis가 오른쪽에서 왼쪽으로 흐릅니다.

flow-relative는 한 언어로 작성된 스타일이 문맥에 따라 다른 언어에 적절하게 적용된다는 것을 의미합니다. 콘텐츠는 전송되는 언어에 따라 흐릅니다.

새로운 약어

다음 약어 중 일부는 브라우저의 새로운 기능이 아니라 블록 또는 인라인 가장자리 모두에 값을 한 번에 설정할 수 있는 기능을 활용하여 스타일을 더 쉽게 작성하는 방법입니다. inset-* 논리 속성은 앞에 논리적 속성으로 절대 위치를 지정하는 기존의 방법이 없었기 때문에 새로운 기능을 제공합니다. 인셋과 약어는 함께 잘 어울리므로 Chromium 87에 적용되는 새로운 논리적 속성 기능을 모두 한 번에 알려드리겠습니다.

마진 약어

새로운 기능은 출시되지 않았지만 매우 유용한 약어인
margin-block 및 margin-inline가 출시되었습니다.

장문
margin-block-start: 2ch;
margin-block-end: 2ch;
새로운 약어
margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

'상단과 하단' 또는 '왼쪽과 오른쪽'의 축약형은 없었습니다. 이제는 다릅니다. margin: 10px;의 약어를 사용하여 4면을 모두 참조할 수 있지만 이제는 논리적 속성 약어를 사용하여 보완적인 2면을 쉽게 참조할 수 있습니다.

장문
margin-inline-start: 4ch;
margin-inline-end: 2ch;
새 약어
margin-inline: 4ch 2ch;

패딩 약어

새로운 기능은 출시되지 않았지만 더 유용한 바로가기(
padding-block 및 padding-inline)가 추가되었습니다.


장문
padding-block-start: 2ch;
padding-block-end: 2ch;
새 약어
padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

그리고 inline 보조 문자 집합:

장문
padding-inline-start: 4ch;
padding-inline-end: 2ch;
새로운 약어
padding-inline: 4ch 2ch;

인셋 및 약식

물리적 속성 top, right, bottom, left는 모두 inset 속성의 값으로 작성할 수 있습니다. position 값은 모두 inset을 사용하여 측면을 설정하는 데 도움이 됩니다.

.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
}


필기 메모
position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;
새로운 물리적 약어
position: absolute;
inset: 1px 2px 3px 4px;

그러면 즉시 편리하게 사용할 수 있을 겁니다. Inset은 실제 측면의 약어이며 여백과 패딩과 마찬가지로 작동합니다.

새로운 기능

물리적 측면의 약칭만큼이나 흥미진진한 것은 추가 inset 약식을 통해 가져온 논리적 특성이 더 많습니다. 이러한 약칭은 개발자의 작성 편의성을 제공하지만 (입력하는 속도가 더 짧음) 흐름에 따라 레이아웃의 잠재적 도달범위도 늘립니다.

필기 메모
position: absolute;
top: 10px;
bottom: 10px;
논리 약칭
position: absolute;
inset-block: 10px;


필기 메모
position: absolute;
left: 10px;
right: 20px;
논리적 약어
position: absolute;
inset-inline: 10px 20px;

자세한 내용과 인셋 약어 및 전체 목록은 MDN에서 확인할 수 있습니다.

테두리 단축키

Border와 중첩된 color, style, width 속성에는 모두 새로운 논리적 약어도 있습니다.


실물 롱핸드
border-top-color: hotpink;
border-bottom-color: hotpink;
논리 약칭
border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;


필기 메모
border-left-style: dashed;
border-right-style: dashed;
논리 약칭
border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;


필기 메모
border-left-width: 1px;
border-right-width: 1px;
논리 약칭
border-inline-width: 1px;
/* or */
border-inline-width: 1px 1px;

MDN에서 자세한 내용과 테두리 접기 및 전체 목록을 확인할 수 있습니다.

논리적 속성 <figure> 예

간단한 예제에 종합해 보겠습니다. 논리적 속성은 자막이 있는 이미지를 레이아웃하여 다양한 작성 및 문서 방향을 처리할 수 있습니다.

또는 사용해 보세요.

<figure> 및 몇 가지 논리 속성을 사용하여 카드를 국제적으로 응답하도록 만들기 위해 별도로 해야 할 작업은 없습니다. 국제적으로 고려된 CSS가 어떻게 작동하는지 궁금하다면 이 내용이 도움이 되었기를 바랍니다.

폴리필 및 교차 브라우저 지원

캐스케이드 또는 빌드 도구는 업데이트된 논리적 속성으로 적절한 간격을 두고 새 브라우저와 이전 브라우저를 모두 사용할 수 있는 실용적인 옵션입니다. 계단식 대체의 경우 실제 속성에 논리적 속성을 따라가면 브라우저는 스타일 확인 중에 찾은 '마지막' 속성을 사용합니다.

p {
  /* for unsupporting browsers */
  margin-top: 1ch;
  margin-bottom: 2ch;

  /* for supporting browsers to use */
  /* and unsupporting browsers to ignore and go 🤷‍♂️ */
  margin-block: 1ch 2ch;
}

하지만 이 방법은 모든 사용자에게 적합한 해결책은 아닙니다. 다음은 :lang() 가상 선택기를 활용하여 특정 언어를 타겟팅하고 실제 간격을 적절하게 조정한 다음 지원되는 브라우저에 논리적 간격을 제공하는 수동 대체입니다.

/* physical side styles */
p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

/* adjusted physical side styles per language */
:lang(ja) {
  p {
    /* zero out styles not useful for traditional Japanese */
    margin-top: 0;
    margin-bottom: 0;

    /* add appropriate styles for traditional Japanese */
    margin-right: 1ch;
    margin-left: 2ch;
  }
}

/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}

/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
  /* remove any potential physical cruft.. */
  margin: 0;
  /* explicitly set logical value */
  margin-block: 1ch 2ch;
}

@supports를 사용하여 실제 속성 대체를 제공할지 여부를 결정할 수도 있습니다.

p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

@supports (margin-block: 0) {
  p {
    margin-block: 1ch 2ch;
  }
}

Sass, PostCSS, Emotion 등에는 다양한 대체 옵션이나 솔루션이 있는 자동화된 번들러 또는 빌드 시간 제공 프로그램이 있습니다. 각 도구를 살펴보고 툴체인 및 전반적인 사이트 전략과 일치하는 도구를 선택하세요.

다음 단계

더 많은 CSS가 논리적 속성을 제공할 것입니다. 아직은 작동하지 않습니다. 하지만 한 가지 큰 누락된 약어가 있으며 이 GitHub 문제에서 아직 해결 방법이 대기 중입니다. 초안에 임시 해결 방법이 있습니다. 약어로 상자의 모든 논리적 측면에 스타일을 지정하려면 어떻게 해야 하나요?

물리적 약어
margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;
논리적 약어
margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

현재 초안 제안서에서는 논리적 등가물을 적용하려면 모든 약식에 logical를 작성해야 하는데, 이는 일부 사람에게는 DRY라고 느껴지지 않을 수 있습니다.

블록 또는 페이지 수준에서 이를 변경하라는 다른 제안이 있지만, 이 경우 여전히 물리적 측면을 가정하는 스타일에 논리적 사용이 유출될 수 있습니다.

html {
  flow-mode: physical;
  /* or */
  flow-mode: logical;
  /* now all margin/padding/etc references are logical */
}

/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */

어려운 문제입니다. YouTube는 여러분의 의견을 기다리고 있습니다.

논리 속성에 대해 자세히 알아보거나 알아보고 싶으신가요? MDN에서 가이드와 예시와 함께 자세한 참조를 확인하세요. 🤓

의견