다국어와 반응형을 동시에! CSS 논리적 속성 쉽게 배우기

최근 일이 너무 바빠 공부가 더딘 요즘 ㅜㅠ... 중앙 정렬을 위해 평소처럼 margin: 0 auto;를 쓰다가 새로운 속성을 알게되어서 공부+정리 겸 CSS 논리적 속성에 관한 글을 쓰고자 합니다. CSS에서 놓치기 쉬운 다국어와 반응형 이야기 왜 다국어와 반응형을 같이 고민해야 할까? 웹사이트를 만들 때, 한국어만 고려하면 쉽습니다. 하지만 영어, 일본어, 아랍어, 힌디어 같은 다양한 언어를 지원하려면 이야기가 달라지죠. 특히, 쓰기 방향이 달라지는 언어는 레이아웃까지 영향을 미치기 때문에 신경 써야 합니다. 게다가 요즘은 모든 화면 크기에 맞게 레이아웃을 조정해야 하니, 다국어와 반응형을 동시에 고려할 수밖에 없습니다. 전통적 CSS 방식이 가진 문제 기존 방식에서는 다음과 같은 문제가 자주 발생..

• format_list_bulleted Study/CSS
• · 2024. 11. 29.

CSS Grid와 Flexbox 비교

웹 레이아웃 구현에는 주로 Grid와 Flexbox가 사용됩니다. 저는 Flexbox만 사용하다 보니 다른 팀원이 Grid를 사용할 때 늘 헷갈리더라고요. 차이점도 확실히 알아볼 겸, 이 글에서는 CSS Grid와 Flexbox의 개념, 사용 예시, 차이 등을 정리하고자 합니다. CSS Grid / Flexbox 란?CSS Grid CSS Grid는 2차원 레이아웃 (가로 세로 두 방향) 시스템으로, 행과 열을 모두 고려한 복잡한 레이아웃을 쉽게 작성할 수 있습니다. Flexbox Flexbox는 1차원 레이아웃 (수평 수직 한 방향) 시스템으로, 단일 행 또는 열의 정렬과 공간 분배에 최적화되어 있습니다. 사용 예시CSS Grid 1 2 3/*------------CSS-----------*/.g..

• format_list_bulleted Study/CSS
• · 2024. 6. 17.