CSS 방향 속성과 논리적 속성
명심해야 할 한 가지 주제는 내면화입니다. w3.org에서 정의를 살펴보겠습니다.
"If you internationalize, you design or develop your content, application, specification, and so on, in a way that ensures it will work well for, or can be easily adapted for, users from any culture, region, or language."
source: Internationalization - W3C
그래서 우리가 웹 앱을 국제화하고 싶을 때, 번역 외에도 "텍스트의 방향이 현재 방향과 반대가 되는 날에는 어떻게 될까요?"라는 질문도 필요합니다.
LTR 언어용 웹 앱을 개발할 수 있지만 비즈니스는 언어 방향이 RTL인 시장에 진입하기로 결정합니다. 이러한 경우 CSS 방향 속성과 CSS 논리적 속성의 차이점을 아는 것이 정말 중요합니다.
CSS 방향 속성
이름에서 알 수 있듯이 - CSS 방향 속성은 방향을 기반으로 합니다. 우리 모두는 매일 사용합니다: 위, 오른쪽, 아래, 왼쪽. div 오른쪽에 여백을 두려면 오른쪽 여백을 사용하면 문제가 해결됩니다.
그 접근 방식의 문제는 페이지의 방향을 변경하면, 예를 들어 LTR에서 RTL로 페이지 방향이 한쪽에서 다른 쪽으로 변경되지만 div의 여백은 다른 쪽으로 이동하지 않는다는 것입니다.
CSS 논리적 속성
간단히 말해서 논리적 속성은 정적 방향이 아니라 텍스트 또는 문서의 흐름에 연결된 속성입니다. 위쪽, 아래쪽, 왼쪽, 오른쪽을 사용하지 않고 대신 시작 및 끝과 같은 더 유창한 용어를 사용하여 레이아웃을 더 유연하게 사용할 수 있습니다.
예를 살펴보겠습니다.
// HMTL
<body>
<div class="content">
<h1>This is the title</h1>
<p>This is the content</p>
</div>
</body>
// CSS
body{
direction: ltr;
}
.content{
border: 1px solid black;
width: 400px;
}
h1, p{
margin-left: 1.5rem;
}
이제 논리적 속성으로 동일한 작업을 수행하는 방법을 살펴보겠습니다.
h1, p{
margin-inline-start: 1.5rem;
}
차이점은 이제 콘텐츠가 페이지의 자연스러운 방향 흐름의 시작부터 여백이 있음을 알고 정적으로 왼쪽 또는 오른쪽을 선택하지 않는다는 것입니다.
다음 펜에서 이 차이를 볼 수 있습니다. 본문의 방향을 ltr에서 rtl로 변경하면 어떻게 되는지 확인합니다(오른쪽 상단 모서리에 있는 편집 클릭).
다음 단계
CSS 논리적 속성으로 이동하는 것은 방향성 속성에 익숙한 사용자에게는 약간 까다로울 수 있습니다. 이 주제에 대해 자세히 알아보고 싶은 분들은 MDN guide about CSS logical properties을 확인하시기 바랍니다.
Reference
이 문제에 관하여(CSS 방향 속성과 논리적 속성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/yairmishnayot/css-directional-properties-vs-logical-properties-1o50텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
