CSS - 간단한 2단 레이아웃(float) 완성하기!

안녕하세요! 이번 포스팅에서는 float 만으로 헤더·메인 콘텐츠·사이드바·푸터가 포함된 2단 레이아웃을 완성해볼게요. 😄

---

📝 1. 레이아웃 구조 파악

1. Header: 전체 너비(왼→오)
2. Main + Sidebar: 왼쪽 메인(900px), 오른쪽 사이드바(300px)
3. Footer: 전체 너비(왼→오)

---

🔧 2. 컨테이너 너비 설정

.container {
  width: 1200px;
  margin: 0 auto; /* 가운데 정렬 */
}

 

---

🔧 3. 메인·사이드바 배치

article {
  width: 900px;
  float: left;
}
aside {
  width: 300px;
  float: right;
}

• float:left/right 로 각각 좌·우로 띄워, 2단 레이아웃 완성
• 요소 간 여백이 필요하면, 간단히 너비 조정으로 가운데 공간 확보 가능 (예: article 너비 825px)

---

⚠️ 4. 푸터 위치 고정

• float를 쓰면 다음 요소가 감싸이므로, 푸터도 사이드바에 붙어 올라가는 현상 발생
• clear: both 를 푸터에 적용해 아래로 내리기

footer {
  clear: both;
}

---

🎉 최종 결과

• 헤더 → 메인+사이드바 → 푸터가 깔끔하게 배치된 2단 레이아웃 완성!
• float 레이아웃은 이해가 다소 복잡하므로, 이후 Flexbox와 CSS Grid로 더 간단하게 만드는 방법도 함께 배워보아요. 😉