Chromium의 새로운 논리 속성 약식 및 새 인셋 속성이 추가되었습니다.
Chromium 69 (2018년 9월 3일)부터 논리 속성 및 값은 개발자가 물리적이 아닌 논리적 방향 및 치수 스타일을 통해 국제 레이아웃을 제어하는 데 도움이 되었습니다. Chromium 87에서는 이러한 논리적 속성과 값을 좀 더 쉽게 작성할 수 있도록 약식과 오프셋이 도입되었습니다. 이로 인해 Chromium은 66 이후 축약을 지원하던 Firefox까지 가능합니다. Safari의 기술 미리보기 버전이 이미 준비되어 있습니다.
문서 흐름
논리 속성, 인라인 및 블록 축에 이미 익숙하고 복습을 하고 싶지 않다면 건너뛰고도 됩니다. 그렇지 않다면 다음 내용을 간단히 복습해보시기 바랍니다.
영어에서 문자와 단어는 왼쪽에서 오른쪽으로 흐르고 단락은 위에서 아래로 쌓입니다. 중국어 번체에서는 문자와 단어는 위에서 아래로, 단락은 오른쪽에서 왼쪽으로 쌓습니다. 이 두 사례에서만 단락에 '상단 여백'을 배치하는 CSS를 작성하면 언어 스타일의 간격이 적절하게 조정됩니다. 페이지가 영어에서 중국어 번체로 번역되면 새로운 세로 쓰기 모드에서 여백이 잘 맞지 않을 수 있습니다.
따라서 상자의 물리적 측면은 국제적으로 그다지 유용하지 않습니다. 따라서 박스 모델의 물리적 측면과 논리적 측면을 학습하는 등 여러 언어를 지원하는 프로세스가 시작됩니다.
Chrome DevTools에서 p 요소를 검사한 적이 있나요? 그렇다면 기본 사용자 에이전트 스타일은 물리적이 아니라 논리적이라는 것을 눈치채셨을 것입니다.
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
여백은 영어 독자가 생각할 수 있는 것처럼 상단이나 하단에 있지 않습니다.
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 값은 인셋이 있는 면을 설정하는 것이 좋습니다.
.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 약식에서 가져오는 논리적 특성도 더 많습니다. 이러한 약식은 개발자의 작성 편의성 (입력이 더 짧음)을 제공하지만 흐름에 상대적이므로 레이아웃의 잠재적 도달범위도 증가시킵니다.
position: absolute; top: 10px; bottom: 10px;
position: absolute; inset-block: 10px;
position: absolute; left: 10px; right: 20px;
position: absolute; inset-inline: 10px 20px;
MDN에서 추가 자료와 인셋 약식 및 상세 설명의 전체 목록을 확인할 수 있습니다.
테두리 약식
테두리와 중첩된 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 ..? */
어려운 문제인가요? 투표하고 의견을 알려주세요. Google에 의견을 들려주세요.
논리적 특성을 더 자세히 알아보고 싶으신가요? MDN에서 자세한 참조와 가이드 및 예시를 확인하세요. 🤓
의견
- 흐름 기준 약식의 CSS 구문 변경을 제안하려면 먼저 csswg-drafts 저장소에서 기존 문제를 확인합니다. 제안과 일치하는 기존 문제가 없으면 새 문제를 만드세요.
- Chromium의 흐름 기준 약식 구현에 관한 버그를 신고하려면 먼저 Chromium Bug Tracker에서 기존 문제를 확인합니다. 버그와 일치하는 기존 문제가 없으면 새 문제를 생성합니다.