Day 5 — Flexbox: 1차원 정렬 완전 정복
요소들을 내 마음대로 가로세로 배치하는 마법의 지휘봉
💡 10초 만에 이해하는 핵심
- 가운데 정렬, 좌우 배치 등 웹사이트의 모든 '배치'는 Flexbox 하나로 끝납니다.
- 명령은 정렬할 대상이 아니라, 그들을 감싸는 '부모 상자'에게 내려야 합니다.
- PC에서는 나란히(가로), 모바일에서는 위아래(세로)로 바꾸는 반응형의 필수 기술입니다.
1. Flexbox의 핵심: 부모에게 명령하라
🚂 일상 비유로 이해하기
기차를 상상해 보세요. 여러 개의 객차(자식 요소)들을 나란히 움직이게 하려면, 객차 하나하나에 직접 명령할 필요가 없습니다. 맨 앞의 기관차(부모 요소)에게 "앞으로 가!"라고 명령하면 뒤의 객차들은 알아서 예쁘게 따라옵니다.
👉 기술적 번역: 정렬하고 싶은 요소들을 감싸는 부모 태그에 display: flex;를 선언하면, 그 안의 자식 요소들은 자동으로 가로로 나란히 배치됩니다.
.container {
display: flex; /* 마법의 시작: 부모에게 리모컨을 쥡니다! */
}
⚠️ 초보자 1위 실수 (매우 중요)
"왜 코드를 넣었는데 정렬이 안 되지?" 하고 보면 십중팔구 자식 요소에 display: flex;를 넣은 경우입니다. 정렬의 주도권은 항상 부모에게 있습니다!
2. 부모의 4가지 리모컨 (Container 속성)
부모에게 display: flex;를 주었다면, 이제 아래 4가지 버튼(속성)으로 자식들을 마음대로 배치할 수 있습니다.
↔️ justify-content (가로 정렬)
• center: 중앙으로 모으기
• space-between: 양 끝으로 벌리기
👉 "가로축으로 어떻게 배치할까?"
↕️ align-items (세로 정렬)
• center: 세로 중앙에 맞추기
• flex-start: 위쪽으로 붙이기
👉 "세로축으로 어떻게 맞출까?"
📏 gap (간격)
• gap: 20px; 자식들 사이 간격
👉 (단, 티스토리 같은 에디터 환경에서는 호환성을 위해 margin-right를 쓰는 것이 더 안전합니다.)
🔄 flex-direction (방향)
• row: 가로 배치 (기본값)
• column: 세로 배치
👉 "모바일 화면 만들 때 필수 속성!"
⚠️ 중심축 전환 주의! (멘붕 방지)
flex-direction: column으로 세로 배치를 선언하면 축이 뒤집힙니다! 즉, 가로를 담당하던 justify-content가 세로 정렬을 담당하게 되고, align-items가 가로 정렬을 담당하게 됩니다. 방향을 세로로 바꿨다면 리모컨의 역할도 바뀐다는 점을 꼭 기억하세요.
3. 자식들의 성격 정하기 (Item 속성)
부모가 전체 틀을 잡는다면, 안쪽에 있는 자식(Item)들은 각자의 '성격'을 가질 수 있습니다.
🎈 고무풍선 vs 🧱 단단한 벽돌
- 고무풍선 (
flex: 1;) : 남는 공간을 물처럼 쫙 채웁니다. 화면이 커지면 같이 커집니다. (메인 본문 영역에 적합) - 단단한 벽돌 (
flex: 0 0 280px;) : 늘어나지도(0), 줄어들지도(0) 않고 딱 280px 크기를 고집합니다. (사이드바에 적합)
4. 티스토리 실전 적용: 헤더와 2단 레이아웃
실전 1: 로고는 왼쪽, 메뉴는 오른쪽 (헤더)
가장 많이 쓰는 상단 바 패턴입니다. 양 끝으로 밀어내는 space-between을 사용합니다.
display: flex;
justify-content: space-between; /* 양 끝으로 벌리기 */
align-items: center; /* 세로 중앙 맞추기 */
}
실전 2: 본문 + 사이드바 레이아웃 (반응형 무결점 코드)
티스토리의 핵심 레이아웃입니다. 본문은 유연하게(풍선), 사이드바는 고정(벽돌)시킵니다. 에디터 호환성을 위해 gap 대신 margin-right를 사용하며, 모바일에서는 사이드바의 벽돌 크기를 해제(reset)해 주어야 레이아웃이 깨지지 않습니다.
.wrap {
display: flex;
}
.main-content {
flex: 1; /* 풍선: 남는 공간 차지 */
margin-right: 40px; /* gap 대신 안전한 여백 사용 */
}
.sidebar {
flex: 0 0 280px; /* 벽돌: 280px 고정 */
}
/* 📱 모바일 화면 (화면이 768px보다 좁아지면) */
@media (max-width: 768px) {
.wrap {
flex-direction: column; /* 세로로 쌓기! */
}
.main-content {
margin-right: 0;
margin-bottom: 40px; /* 여백을 아래쪽으로 변경 */
}
.sidebar {
flex: auto; /* 고정 크기 해제 (매우 중요!) */
width: 100%; /* 화면에 꽉 차게 리셋 */
}
}
5. 흔한 실수와 해결 방법 (디버깅)
6. 오늘의 실습 & AI 프롬프트
🤖 AI에게 이렇게 지시해 보세요 (복사-붙여넣기)
"나는 티스토리 스킨을 만들고 있어. 좌측 본문(.main)과 우측 사이드바(.sidebar)가 있는 2단 레이아웃을 코딩하려고 해.
1. PC 화면에서는 본문은 남는 공간을 다 차지하고, 사이드바는 280px로 고정해 줘. (gap 속성 대신 본문에 margin-right를 사용해 줘)
2. 모바일(768px 이하)에서는 세로 방향(column)으로 쌓이게 하고, 사이드바의 크기가 100% 꽉 차도록 리셋하는 코드를 반드시 포함해 줘."
🖥️ 직접 확인하기 (F12 실습)
- 내 블로그나 아무 웹사이트(예: 티스토리 홈)에 접속합니다.
- F12를 눌러 개발자 도구를 엽니다.
- 개발자 도구 좌측 상단의 모바일/태블릿 전환 아이콘(📱)을 클릭합니다.
- 화면 너비를 줄였다 늘였다 하면서 가로 배치가 세로(column)로 바뀌는 시점과, 크기가 리셋되는 과정을 직접 관찰해 보세요!
🏁 핵심 3줄 요약
- 1 Flexbox 리모컨은 정렬할 요소들을 감싸는 부모 태그에게 주어야 작동합니다.
- 2 티스토리 에디터 환경 호환성을 위해
gap대신 안전한margin-right를 사용하세요. - 3 모바일 대응 시 세로 정렬(column) 전환과 함께 사이드바 고정 크기 리셋(width:100%)을 잊지 마세요.
Next Step 🚀 Day 6 — 반응형 웹과 미디어 쿼리 심화
'코딩 > 웹디자인' 카테고리의 다른 글
| AI를 이용한 티스토리 웹디자인 공부 - [DAY 4] CSS 기초 강의｜선택자, Margin, Padding, Display (0) | 2026.05.13 |
|---|---|
| AI를 이용한 티스토리 웹디자인 공부 - [DAY 3] HTML → Tistory 연결 (0) | 2026.04.23 |
| AI를 이용한 티스토리 웹디자인 공부 - [DAY 2] DOM 트리와 시맨틱 태그 (0) | 2026.04.20 |
| AI를 이용한 티스토리 웹디자인 공부 - [DAY 1] HTML 가이드 (0) | 2026.04.16 |