최근 일이 너무 바빠 공부가 더딘 요즘 ㅜㅠ... 중앙 정렬을 위해 평소처럼 margin: 0 auto;를 쓰다가 새로운 속성을 알게되어서 공부+정리 겸 CSS 논리적 속성에 관한 글을 쓰고자 합니다.
CSS에서 놓치기 쉬운 다국어와 반응형 이야기
왜 다국어와 반응형을 같이 고민해야 할까?
웹사이트를 만들 때, 한국어만 고려하면 쉽습니다. 하지만 영어, 일본어, 아랍어, 힌디어 같은 다양한 언어를 지원하려면 이야기가 달라지죠. 특히, 쓰기 방향이 달라지는 언어는 레이아웃까지 영향을 미치기 때문에 신경 써야 합니다. 게다가 요즘은 모든 화면 크기에 맞게 레이아웃을 조정해야 하니, 다국어와 반응형을 동시에 고려할 수밖에 없습니다.
전통적 CSS 방식이 가진 문제
기존 방식에서는 다음과 같은 문제가 자주 발생합니다:
1. 쓰기 방향의 변화에 대응하지 못함
- 예를 들어, 아랍어 환경에서는 쓰기 방향이 오른쪽에서 왼쪽입니다. 하지만 margin-left와 margin-right를 사용하는 방식은 LTR(왼쪽에서 오른쪽) 쓰기 방향을 전제로 만들어진 것입니다.
- margin: 0 auto;는 중앙 정렬만 처리하므로 RTL 환경에서는 논리적으로 다국어를 지원하지 않는 설정이 됩니다.
2. 기존 여백이 사라질 수 있음
- margin: 0 auto;는 좌우 중앙 정렬을 쉽게 구현하지만, 상하단 여백(예: margin: 10px 20px;)을 덮어써서 없어질 수 있습니다.
- 기존 레이아웃이 깨지거나 의도치 않은 디자인이 나타날 수 있습니다.
3. 코드 유지보수의 어려움
- 다국어와 반응형을 동시에 지원해야 하는 경우, 언어별 조건문이나 추가 설정이 필요할 수 있습니다. 이는 코드가 복잡해지는 원인이 됩니다.
이 문제들을 해결하려고 나온 것이 바로 논리적 속성입니다!
논리적 속성이란?
논리적 속성의 개념과 쓰임
논리적 속성은 쓰기 방향과 언어에 따라 자동으로 작동하는 CSS 속성입니다. 예를 들어:
- margin-inline: 좌우 여백
- margin-block: 상하 여백
- text-align: start: 쓰기 방향의 시작점 기준으로 정렬
반응형 디자인에서 논리적 속성의 매력
1. 언어와 디바이스에 따라 자동 대응
논리적 속성은 쓰기 방향이나 화면 크기에 상관없이 일관된 스타일을 유지합니다.
2. 코드가 더 간결
특정 언어나 뷰포트 크기에 맞춰 복잡한 조건을 쓰지 않아도 됩니다.
👀 margin-inline : 실제로 어떻게 쓸까?
중앙 정렬의 올바른 방법
기존 방식:
div {
margin: 0 auto; /* 좌우 중앙 정렬 */
}
대신 이렇게 바꾸기!
div {
margin-inline: auto; /* 좌우 중앙 정렬 */
margin-block: 10px; /* 상하 여백 */
}이렇게 하면 상하단 여백이 사라지지 않고, 모든 언어에서 정상 작동합니다.
논리적 속성으로 레이아웃 관리하기
.box {
width: 200px;
height: 200px;
padding-inline: 15px; /* 좌우 여백 */
border: 5px solid #ffc7c7;
}위 코드는 LTR(왼쪽-오른쪽) 언어에서도, RTL(오른쪽-왼쪽) 언어에서도 자동으로 방향이 조정됩니다.
✔ 실전 예제: 다국어 + 반응형 레이아웃 만들기
쓰기 방향에 따른 유연한 디자인
/*
HTML 내용
<div class="content">텍스트 예제</div>
*/
.content {
padding-inline: 20px;
text-align: start; /* 쓰기 방향의 시작점 기준 */
}LTR 환경에서는 왼쪽 정렬, RTL 환경에서는 오른쪽 정렬이 됩니다.
반응형 페이지에 적용한 예
.container {
max-width: 1200px;
margin-inline: auto;
padding-inline: 10px;
}
@media (max-width: 768px) {
.container {
padding-inline: 5px;
}
}화면 크기가 작아지면 자동으로 여백이 줄어들어 모바일에서도 깔끔하게 보입니다.
CSS 스타일링을 조금 더 논리적이고 글로벌하게 바꾸기 위한 아주 좋은 속성! 손에 익히는 것이 좋을 것 같아 저도 다음 개인 프로젝트에서부터 열심히 활용해보고자 합니다.👍
참조