반응형
Web Development · CSS Float
float — 박스 4개를
좌·우로 배치하기
float: left 3개 + float: right 1개 — 한 줄에 박스 줄세우기의 정석
시작 오늘 분석할 코드
박스 3개는 왼쪽에 차곡차곡 쌓고, 마지막 박스 하나만 오른쪽 끝으로 빼는 코드다. 메뉴 바, 툴바, 카드 그리드의 가장 단순한 형태를 이해하는 데 좋다.
<style> .box1 { padding: 20px; margin-right: 10px; background: #ffd800; float: left; } .box2 { background: #0094ff; padding: 20px; margin-right: 10px; float: left; } .box3 { background: #00ff21; padding: 20px; float: left; } .box4 { background: #ffffff; padding: 20px; float: right; border: 1px solid black; } </style> <body> <div class="box1">박스1</div> <div class="box2">박스2</div> <div class="box3">박스3</div> <div class="box4">박스4</div> </body>
실제 출력 미리보기
박스1
박스2
박스3
박스4
용어 용어 정리
float: left박스를 왼쪽으로 — 여러 개면 등장 순서대로 옆에 붙음
float: right박스를 오른쪽으로 — HTML 순서와 무관하게 끝으로
class 셀렉터. 으로 시작, 같은 class를 여러 요소가 공유 가능
background박스 배경색 (또는 이미지)
padding박스 안쪽 여백 — 텍스트가 박스 안에서 숨통
margin-right박스 사이 가로 간격
color hex#ffd800 = 노랑, #0094ff = 파랑, #00ff21 = 초록
border박스 테두리 — 두께·종류·색
1 float: left 3번 연속 = 옆으로 줄 세우기
왜 박스가 옆으로 붙나?
일반 div는 한 줄을 통째로 차지하는 블록 요소다. 그래서 그냥 두면 4개 박스가 위에서 아래로 차곡차곡 쌓인다. float: left를 주는 순간 박스는 일반 흐름에서 빠져나와 왼쪽 끝으로 이동한다. 다음 박스도 같은 방식으로 띄우면, 먼저 띄워진 박스 옆 자리에 붙는다.
float 없음: [ 박스1 ] [ 박스2 ] [ 박스3 ] [ 박스4 ] float: left 적용 (1·2·3): [박스1] [박스2] [박스3] ← 차곡차곡 옆으로
※ 한 줄에 다 안 들어가면?
- 화면 폭이 좁아져서 박스 합산 너비를 넘기면 → 다음 박스가 다음 줄로 자동 줄바꿈
- 높이가 다른 박스가 있으면 줄바꿈 시 빈 공간이 생길 수도 (걸림 현상)
- 이런 자동 줄바꿈은 카드 그리드에서 자주 활용
2 float: right로 마지막만 따로
왜 마지막 박스만 오른쪽 끝으로 가나?
박스 4번에 float: right을 주면, 1~3번이 차지하지 않은 오른쪽 빈 공간의 끝으로 이동한다. 만약 화면이 충분히 넓으면 1·2·3·····4 사이에 빈 공간이 생긴다. 이게 좌측 메뉴 + 우측 로그인 버튼 같은 흔한 헤더 패턴이다.
.box1 .box2 .box3 (float: left) .box4 (float: right) [박스1][박스2][박스3] [박스4] ↑ ↑ 왼쪽부터 차례로 오른쪽 끝
※ HTML 순서는
1 → 2 → 3 → 4 차례대로지만, 화면에서는 4번이 가장 오른쪽으로 시각적으로 분리된다. HTML 구조와 시각적 위치가 달라도 된다는 게 float의 핵심 활용 포인트.반응형
3 margin-right — 박스 사이 간격
왜 box3에는 margin-right이 없을까?
박스 1·2·3는 차례대로 옆에 붙는다. 그 사이 간격을 만들려면 박스 1과 2에 margin-right: 10px을 줘서 오른쪽에 10px 공간을 띄우면 된다. 하지만 마지막 박스 3에는 margin-right이 필요 없다 — 그 다음에 같은 줄에 더 올 박스가 없기 때문.
.box1 (margin-right: 10) │ 10 │ .box2 (margin-right: 10) │ 10 │ .box3 (margin-right 없음) 마지막 박스에 margin을 주면 → 컨테이너 너비가 어긋나거나 다음 박스(box4)와 의도치 않은 간격
※ 모던 패턴 — gap 활용
- 이런 "마지막만 빼기" 작업은 옛날 float 시절의 번거로움
- flex/grid에서는
gap: 10px한 줄이면 박스 사이만 자동으로 간격 부여, 끝은 마진 없음 - :last-child로 마지막 margin을 0으로 빼는 트릭도 자주 사용
4 색상 #hex — 6자리 16진수의 의미
#ffd800은 어떻게 노란색인가?
색상 코드는 RR GG BB 순서의 16진수 표기다. 각 두 자리가 빨강·초록·파랑의 강도를 0~255 범위로 나타낸다.
| 코드 | R | G | B | 색 |
|---|---|---|---|---|
| #ffd800 | FF (255) | D8 (216) | 00 (0) | 진한 노랑 |
| #0094ff | 00 (0) | 94 (148) | FF (255) | 밝은 파랑 |
| #00ff21 | 00 (0) | FF (255) | 21 (33) | 형광 초록 |
| #ffffff | FF | FF | FF | 흰색 |
| #000000 | 00 | 00 | 00 | 검정 |
#ffd800 = #fd0 (단축 안 됨, 이건 6자리) #ffffff = #fff (모든 자리가 같으면 3자리 단축 가능) #0094ff = 단축 불가 rgba(255, 216, 0, 0.5) → 같은 노랑이지만 투명도 50%
5 박스가 만들어지는 흐름
1
.box1 (float:left)왼쪽 끝으로 이동, 노랑 배경, 오른쪽 10px 간격
2
.box2 (float:left)box1 옆에 붙음, 파랑 배경, 오른쪽 10px 간격
3
.box3 (float:left)box2 옆에 붙음, 초록 배경, 마진 없음
4
.box4 (float:right)같은 줄의 오른쪽 끝으로, 흰 배경 + 검은 테두리
5
모든 박스가 일반 흐름에서 빠짐부모(body)는 박스 높이를 인식하지 못함 → 다음 요소가 박스 위로 끼어들 수 있음
6 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
부모에 clear 처리 누락 |
다음 요소가 박스 위로 올라탐 | 부모에 ::after { clear: both } 또는 overflow: auto |
| 마지막 박스에도 margin-right | 오른쪽에 의도치 않은 빈 공간 | 마지막만 0 또는 :last-child { margin-right: 0 } |
| 박스 너비 합 > 컨테이너 너비 | 마지막 박스가 다음 줄로 떨어짐 | 너비 줄이거나 box-sizing: border-box |
| 높이가 제각각인 박스들 | 줄바꿈 시 빈 공간 (걸림) | 같은 높이 강제 또는 flex로 전환 |
| id 셀렉터로 .box1, .box2 만듦 | 유일성 위반·재사용 어려움 | 같은 디자인 반복은 class |
7 같은 결과를 flex로
4개 박스를 좌·우로 분할하는 패턴은 flex의 justify-content: space-between이 훨씬 직관적이다.
<div class="toolbar"> <div class="left-group"> <div>박스1</div> <div>박스2</div> <div>박스3</div> </div> <div>박스4</div> </div> .toolbar { display: flex; justify-content: space-between; } .left-group { display: flex; gap: 10px; }
※ 마지막 마진 빼기 / float / clear 모두 불필요.
justify-content: space-between은 "양 끝으로 밀어내고 사이 빈 공간"이라는 뜻.핵심 한 줄 요약
float: left × N왼쪽부터 차례로 옆에 붙음
float: right같은 줄의 오른쪽 끝으로 따로 이동
사이 간격앞쪽 박스에 margin-right, 마지막은 0
색상 #hexRR GG BB — 16진수로 빨강·초록·파랑 강도
class반복되는 디자인은 .class — id는 유일한 곳에만
현대식space-between flex 한 줄로 좌·우 분할
실무 패턴왼쪽 메뉴 그룹 + 오른쪽 로그인 버튼 = 이 코드의 응용
Tags
#float #float-left #float-right #margin-right #hex컬러 #class셀렉터 #id셀렉터 #justify-content #space-between #flex #CSS레이아웃 #박스배치 #툴바 #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
float, float-left, float-right, margin-right, hex컬러, class셀렉터, id셀렉터, justify-content, space-between, flex, CSS레이아웃, 박스배치, 툴바, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| CSS 2단 레이아웃 — float · width · margin auto 완전 정리 (0) | 2026.05.04 |
|---|---|
| float — 이미지 옆으로 텍스트 흐르게 만들기 완전 정리 (0) | 2026.05.04 |
| CSS 3단 레이아웃 — 좌측 사이드 · 본문 · 우측 사이드 완전 정리 (0) | 2026.05.04 |
| 외부 CSS와 float 레이아웃 — 2단·3단 구조 완전 정리 (0) | 2026.05.04 |
| HTML 이벤트 메일 — table 레이아웃 · 인라인 스타일 완전 정리 (0) | 2026.05.04 |
댓글