반응형 float5 CSS 2단 레이아웃 — float · width · margin auto 완전 정리 Web Development · CSS LayoutCSS 2단 레이아웃 —float · width · margin auto 완전 정리본문 + 사이드바를 한 줄에 배치하는 가장 기본적인 레이아웃 패턴시작 오늘 분석할 코드화면 가운데에 컨테이너를 두고, 그 안에서 본문(#contents)과 사이드바(#sidebar)를 좌우로 나란히 배치하는 코드다. 핵심은 float로 좌우 정렬 + clear로 다음 줄 복귀 두 가지다.실제 출력 미리보기#header · 사이트 제목#contents (float:left, 620px)본문 영역. 너비를 정확히 맞춰야 사이드바와 한 줄에 배치된다.#sidebar (float:right, 220px)회색 배경의 사이드바.#footer (clear:both) · 다시 한 줄 전체.. 2026. 5. 4. float — 이미지 옆으로 텍스트 흐르게 만들기 완전 정리 Web Development · CSS Floatfloat — 이미지 옆으로텍스트가 흘러 들어가게 만들기잡지·책 표지 같은 레이아웃을 만드는 가장 기본적인 패턴시작 오늘 분석할 코드이미지를 왼쪽에 두고, 그 옆 빈 공간으로 제목·소제목·본문이 자연스럽게 흘러 들어가는 코드다. 책 소개·인물 프로필 같은 곳에서 흔히 보이는 형태다. id="container"> src="images/cover.jpg" class="left-img" alt=""> 바쁜 3, 4학년을 위한 빠른 분수 3, 4학년이 꼭 알아야 할 분수를 한 권에… 한국 교육과정평가원이 최근 발표한… 실제 출력 미리보기cover.jpg(이미지 자리)바쁜 3, 4학년을 위한 빠른 분수3, 4학년이 꼭 알아야 할 분수를 한 권에 모았어요!한국.. 2026. 5. 4. float — 박스 4개를 좌·우로 배치하기 완전 정리 Web Development · CSS Floatfloat — 박스 4개를좌·우로 배치하기float: left 3개 + float: right 1개 — 한 줄에 박스 줄세우기의 정석시작 오늘 분석할 코드박스 3개는 왼쪽에 차곡차곡 쌓고, 마지막 박스 하나만 오른쪽 끝으로 빼는 코드다. 메뉴 바, 툴바, 카드 그리드의 가장 단순한 형태를 이해하는 데 좋다. class="box1">박스1 class="box2">박스2 class="box3">박스3 class="box4">박스4 실제 출력 미리보기박스1박스2박스3박스4용어 용어 정리float: left박스를 왼쪽으로 — 여러 개면 등장 순서대로 옆에 붙음float: right박스를 오른쪽으로 — HTML 순서와 무관하게 끝으로class 셀렉터. 으로.. 2026. 5. 4. CSS 3단 레이아웃 — 좌측 사이드 · 본문 · 우측 사이드 완전 정리 Web Development · CSS LayoutCSS 3단 레이아웃 —좌측 사이드 · 본문 · 우측 사이드float: left · left · right 조합으로 한 줄에 3개의 박스를 배치하는 패턴시작 오늘 분석할 코드2단 레이아웃에 사이드바를 하나 더 붙인 형태다. 핵심은 왼쪽 사이드 + 본문은 float:left로 묶고, 오른쪽 사이드는 float:right로 따로 빼는 것.실제 출력 미리보기#header · 사이트 제목#left-sidebar(float:left)#contents (float:left)본문 영역. 좌측 사이드 옆에 붙는다.#right-sidebar(float:right)#footer (clear:both)용어 용어 정리3단한 줄에 박스 3개를 좌·중·우로 배치float: lef.. 2026. 5. 4. 이전 1 2 다음 반응형