sliver__

안녕하세요! 이번 포스팅에서는 float 만으로 헤더·메인 콘텐츠·사이드바·푸터가 포함된 2단 레이아웃을 완성해볼게요. 😄📝 1. 레이아웃 구조 파악Header: 전체 너비(왼→오)Main + Sidebar: 왼쪽 메인(900px), 오른쪽 사이드바(300px)Footer: 전체 너비(왼→오)🔧 2. 컨테이너 너비 설정.container { width: 1200px; margin: 0 auto; /* 가운데 정렬 */} 🔧 3. 메인·사이드바 배치article { width: 900px; float: left;}aside { width: 300px; float: right;}float:left/right 로 각각 좌·우로 띄워, 2단 레이아웃 완성요소 간 여백이 필요하면, 간단히 너비 ..

안녕하세요! 이번 포스팅에서는 플로트 레이아웃에서 자주 마주치는 부모 요소 높이 붕괴(Collapse) 문제를 해결하는 방법, 특히 “clearfix hack” 기법을 빠르게 배워볼게요. ⚡️🔍 1. 문제 복습: 높이 붕괴이전 강의에서 header 안의 h1·nav에 각각 float를 주자부모인 header가 자식의 높이를 인식하지 못해 height: 0 으로 산정패딩이나 border 없이는 배경·테두리가 사라지는 현상 발생⚙️ 2. 가장 쉬운 해결법: 빈 엘리먼트 추가 ….clearfix::after { content: ""; /* pseudo-element 생성 필수 */ display: block; /* block 레벨로 만들어야 clear가 동작 */ clear: bot..

안녕하세요! 이번 포스팅에서는 CSS의 float 속성이 어떻게 동작하는지, 그리고 플로트를 쓰면서 마주치는 대표적인 이슈들을 정리해볼게요. 😎1️⃣ 프로젝트 준비이전 섹션에서 완성한 블로그 포스트 페이지를 복제해 CSS-Layouts 폴더로 준비VS Code에서 Go Live로 서버 재시작 ✔️2️⃣ float 속성의 핵심 동작 원리문서 흐름에서 제거float: left 또는 float: right를 주면 해당 요소가 일반적인 블록 흐름에서 분리텍스트 및 인라인 요소 감싸기분리된 요소 주위를 텍스트가 마치 물 흐르듯 wrapping컨테이너 높이 붕괴(Collapse)부모 요소는 떠 있는(floated) 자식의 높이를 인식하지 못해, 높이가 0으로 산정padding이나 border 없이는 부모 배경·테..