지난 15편에서 테두리와 배경색으로 요소를 꾸미는 법을 배웠죠? 오늘은 그 요소들을 화면에 자유롭게 배치하는 웹 디자인의 혁명, [플렉스(Flexbox) 레이아웃]에 대해 아주 깊이 있게 다뤄보겠습니다. 예전에는 블로그 레이아웃을 잡으려면 코드가 너무 복잡했지만, 이제는 플렉스만 알면 누구나 전문가처럼 배치할 수 있습니다.
[플렉스란 무엇인가요?]
플렉스는 ‘유연한 상자’라는 뜻입니다. 블로그의 특정 영역(부모) 안에 있는 요소들(자식)을 가로로 정렬하거나, 균등하게 나누거나, 위치를 자유롭게 바꾸고 싶을 때 사용합니다. 과거의 복잡한 방식보다 훨씬 직관적이고 강력합니다.
플렉스의 핵심 원리는 '부모에게 명령을 내리면 자식이 알아서 움직인다'는 것입니다.
[부모(Container)에게 주는 명령: display: flex]
배치를 시작하려면 먼저 자식 요소들을 감싸고 있는 부모 태그에 딱 한 줄의 명령을 내려야 합니다.
display: flex;
이 한 줄을 적는 순간, 그 안의 모든 요소는 가로로 나란히 정렬될 준비를 마칩니다.
[가로 정렬의 핵심: justify-content]
자식 요소들을 부모 박스 안에서 어떻게 배치할지 결정하는 가장 중요한 속성입니다.
justify-content: flex-start; (왼쪽부터 정렬, 기본값)
justify-content: center; (가운데로 정렬)
justify-content: space-between; (요소 사이를 동일한 간격으로 벌림)
justify-content: space-around; (요소 주위에 균등한 여백을 줌)
[세로 정렬의 핵심: align-items]
가로뿐만 아니라 세로 방향으로도 위치를 잡아야 합니다. 예를 들어 글자와 이미지가 섞여 있을 때 세로 기준을 맞추는 것이죠.
align-items: center; (세로 중앙으로 맞춤, 가장 많이 쓰임)
align-items: flex-start; (위쪽으로 맞춤)
align-items: stretch; (부모 높이에 꽉 차게 늘림)
[플렉스 전략]
과한 배치는 금물: 너무 많은 단(Column)을 나누면 모바일에서 글자가 너무 작아집니다. 블로그는 본문이 가장 중요하므로, 본문 비중을 70% 이상으로 잡으세요.
모바일 반응형 고려: 나중에 배우겠지만, 모바일에서는 플렉스를 해제하거나 세로로 쌓이게 만들어야 가독성이 깨지지 않습니다.
불필요한 레이아웃 최소화: 심플한 구조를 좋아합니다. 너무 복잡한 다단 구조보다는 본문 집중형 레이아웃이 승인에 더 유리합니다.
[에코노트허브의 경험담]
저도 처음에 플렉스를 배웠을 때 너무 신나서 이것저것 다 나눠보느라 블로그 디자인을 엉망으로 만든 적이 있습니다. 하지만 승인을 받은 블로그들을 보면 하나같이 구조가 아주 단순합니다. 플렉스는 '예쁘게 꾸미기 위한 도구'이지, '복잡하게 만들기 위한 도구'가 아니라는 점을 꼭 기억하세요!
핵심 요약
플렉스는 부모 태그에 display: flex를 선언하여 자식 요소들을 쉽게 정렬하는 기술입니다.
justify-content는 가로 방향 정렬, align-items는 세로 방향 정렬을 담당합니다.
복잡한 다단 레이아웃보다는 본문 가독성을 높이는 방향으로 플렉스를 활용하세요.
다음 편 예고: 17편에서는 구글 로봇이 여러분의 글을 완벽하게 이해하게 만드는 [시맨틱(Semantic) 태그]에 대해 알아보겠습니다. 블로그의 검색 순위를 높이는 비밀이 여기에 있습니다!
여러분은 블로그 화면을 어떻게 나누고 싶으신가요? 본문 옆에 사이드바를 둘 건가요, 아니면 본문 위주로 아주 깔끔하게 가실 건가요?