웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

[CSS] 엘리먼트의 논리적 이동 스타일 속성 알아보기. Logical properies

Last Modified : 2023-02-25 / Created : 2023-02-25
2,220
View Count
웹페이지의 레이아웃을 구성할 때 DOM 요소의 이동 방법으로 두 가지 방법이 있습니다. 첫 번째는 물리적인 이동 방법이고 두 번째는 논리적인 이동 방법입니다. 아래는 CSS 논리적인 이동 방법의 구현에 대하여 알아봅니다.



# CSS 논리적 이동 스타일 알아보기

Logical properies
먼저 기존의 물리적인 이동 방법과 논리적인 방법의 차이점을 알아야하겠죠. 먼저 각각 사용되는 css 스타일 속성은 아래와 같습니다.

1. 물리적인 이동 스타일 속성
// top, bottom, left, right, margin-left, margin-right, padding-top, padding-right, border-left ...

2. 논리적인 이동 스타일 속성
// inset, inset-inline, margin-inline, margin-block, padding-inline, padding-block ...

추가로 아래와 같이 동일한 속성에 논리적인 값을 사용하는 방법도 있습니다. 아래에서 float는 브라우저 호환성에 따라 지원 여부가 다를 수 있습니다.
text-align: start;
text-align: end;

float: inline-start;
float: inline-end;

위 둘의 css 속성을 보시면 차이점을 아실 수 있습니다. 요약하면 물리적인 방법은 왼쪽, 오른쪽, 위, 아래의 방향에 따라 이동시키는 스타일 속성입니다. 하지만 논리적인 이동은 block과 inline으로 구분하고 start, end로 또 다시 구분됩니다. 즉 왼쪽, 위 등의 방향을 결정하고 이동하는 것이 아니라 블록과 인라인에서 시작과 끝나는 시점을 기준으로 이동할 수 있게 됩니다.


@ 논리적인 이동 스타일 사용의 장점은?
이 두 가지 방법 모두 이동한다는 공통적인 목적으로 사용되는 스타일 속성이지만 차이점이 있습니다. 논리적인 이동 방법은 물리적인 방법과 달리 사용자가 사용하는 언어 방향에 맞춰 페이지에서 요소의 이동할 수 있기 때문입니다. 예를들어 웹페이지는 언어에 따라 LTR, RTL 방향(왼쪽에서 오른쪽이거나 반대로 오른쪽에서 왼쪽으로 콘텐츠가 이동되는 방향)이 다를 수 있습니다. 이 경우 논리적인 스타일 속성은 이에 따라 이동 방향이 결정되기 때문에 언어에 선어에 따라 따로 제어할 필요가 없다는 장점이 있습니다.

만약 다국어 웹사이트를 운영하는 경우라면 이 장점은 더욱 크게 나타납니다. 특정 언어를 위해 이동 스타일 코드를 모두 재작성해 오버라이드해야 하는 경우가 필요할 수도 있지만 미리 논리적인 이동 스타일을 사용했다면 그럴 필요가 없기 때문이죠.


! Logical css properties 예제보기


이제 간단한 예제 코드를 만들어보겠습니다. 아래의 예제는 ltr, rtl 사용시 물리적인 방법과 논리적인 방법 사용시 차이점을 보여주기 위함입니다. 먼저 예제 코드를 간략히 작성합니다. 먼저 html로 비교할 두 개의 엘리먼트를 만들고 내부에 box 형태의 요소를 가지게 합니다.
<div class="test-physical">
  <div class="test-box">Physical box</div>
</div>
<br />
<div class="test-logical">
  <div class="test-box">Logical box</div>
</div>

아래는 스타일 속성입니다.
<style>
.test-physical,
.test-logical {
  width: 160px;
  height: 160px;
  background: #eee;
}
.test-box {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

.test-physical .test-box {
  margin-left: 20px;
  margin-right: 40px;
}
.test-logical .test-box {
  margin-inline-start: 20px;
  margin-inline-end: 40px;
}
</style>

위 코드는 한글에 사용되는 LTR에서는 동일하게 나타나게 됩니다. 위 코드를 구현하면 아래와 같죠.

<div class="test-physical">
<div class="test-box">Physical box</div>
</div>
<br />
<div class="test-logical">
<div class="test-box">Logical box</div>
</div>

<style>
.test-physical,
.test-logical {
width: 160px;
height: 160px;
background: #eee;
}
.test-box {
width: 100px;
height: 100px;
border: 1px solid;
}

.test-physical .test-box {
margin-left: 20px;
margin-right: 40px;
}
.test-logical .test-box {
margin-inline-start: 20px;
margin-inline-end: 40px;
}
</style>

보시는 것처럼 차이가 없습니다. 하지만 만약 언어가 바뀌고 LTR이 아닌 RTL 환경인 경우라면? 위 예제는 다르게 나타나게 될 것 입니다. 아래는 RTL인 경우입니다.


* direction: rlt (우측에서 좌측 방향)
동일한 예제를 RTL로 구현하면 아래와 같이 나타납니다. 
<div class="test2-physical">
<div class="test2-box">Physical box</div>
</div>
<br />
<div class="test2-logical">
<div class="test2-box">Logical box</div>
</div>

<style>
.test2-physical,
.test2-logical {
width: 160px;
height: 160px;
background: #eee;
direction: rtl;
}
.test2-box {
width: 100px;
height: 100px;
border: 1px solid;
}

.test2-physical .test2-box {
margin-left: 20px;
margin-right: 40px;
}
.test2-logical .test2-box {
margin-inline-start: 20px;
margin-inline-end: 40px;
}
</style>

위 둘의 차이점을 발견하셨나요? 물리적인 이동 스타일을 적용한 위에서는 RTL로 변경되도 변화가 없었습니다. 하지만 이와 달리 논리적인 스타일 속성으로 변경한 margin-inline-start, margin-inline-end 속성을 사용한 경우에는 방향이 RTL로 바뀌었을 때 이동 방향 역시 이에 맞추어 자동으로 변경되는 것을 확인 할 수 있습니다.


! 마치면서


예전에는 논리적인 이동 스타일을 사용하려면 각 css 속성과 브라우저 호환성 확인이 필요해 사용하기 어려웠습니다. 하지만 최근 대부분의 브라우저는 논리적인 이동 스타일 속성을 대부분 지원하고 있습니다. 다만 각 속성마다 지원 여부에 있어 조금씩 차이가 있을 수 있기 때문에 반드시 논리적인 이동 스타일을 사용해야 한다는 것은 아니며 프로젝트의 요구 사항이나 사용 언어 등을 고려하여 선택하는 것이 좋을 것 입니다.
아래의 글도 찾고 계시지 않나요?

    Previous

    css 스타일 속성 text-underline-offset 알아보기

    Previous

    css grid 레이아웃 방법으로 정사각형, 직사각형 만들기