반응형
Web Development · CSS Float
float — 이미지 옆으로
텍스트가 흘러 들어가게 만들기
잡지·책 표지 같은 레이아웃을 만드는 가장 기본적인 패턴
시작 오늘 분석할 코드
이미지를 왼쪽에 두고, 그 옆 빈 공간으로 제목·소제목·본문이 자연스럽게 흘러 들어가는 코드다. 책 소개·인물 프로필 같은 곳에서 흔히 보이는 형태다.
<style> #container { width: 800px; margin: 20px auto; /* 위·아래 20, 좌·우 가운데 */ padding: 20px; } .left-img { float: left; /* 이미지를 왼쪽으로 띄움 */ margin-right: 25px; /* 텍스트와의 간격 */ } p { line-height: 30px; /* 줄 간격 */ } </style> <body> <div id="container"> <img src="images/cover.jpg" class="left-img" alt=""> <h1>바쁜 3, 4학년을 위한 빠른 분수</h1> <h2>3, 4학년이 꼭 알아야 할 분수를 한 권에…</h2> <p>한국 교육과정평가원이 최근 발표한…</p> </div> </body>
실제 출력 미리보기
cover.jpg
(이미지 자리)
(이미지 자리)
바쁜 3, 4학년을 위한 빠른 분수
3, 4학년이 꼭 알아야 할 분수를 한 권에 모았어요!
한국 교육과정평가원이 최근 발표한 보고서에 따르면 '수포자'는 초등 3학년 때 분수를 배우면서 시작된다고 합니다. 분수를 어려워하는 이유는 분모와 분자, 2개의 수가 나와 낯설기 때문입니다. 이렇게 낯설고 어려운 분수, 어떻게 공부해야 할까요?
용어 용어 정리
float: left요소를 왼쪽으로 띄우고, 뒤따르는 콘텐츠가 옆에 흘러 들어옴
margin-right박스 오른쪽 바깥 여백 — 옆에 오는 텍스트와의 간격
margin: 20px auto위·아래 20px, 좌·우 자동 (가운데 정렬)
line-height한 줄의 높이 — 줄 간격을 결정
img alt이미지 대체 텍스트 (시각장애인·로딩 실패 시)
class 셀렉터CSS에서 . 으로 선택, 여러 요소에 재사용
1 float이 텍스트를 어떻게 감싸나?
기본 흐름 vs float 적용
float이 없으면 이미지는 한 줄을 통째로 차지한다. 그 결과 이미지 아래에 제목·본문이 차곡차곡 쌓여서 어색하다. float: left를 주면 이미지가 왼쪽 끝으로 이동하고, 그 오른쪽에 빈 공간이 생기며 텍스트가 그 안으로 흘러 들어온다.
float 없음: ┌─────────┐ │ 이미지 │ └─────────┘ 바쁜 3, 4학년을 위한 빠른 분수 3, 4학년이 꼭 알아야… 한국 교육과정평가원이 최근… float: left: ┌─────────┐ 바쁜 3, 4학년을 위한 빠른 분수 │ 이미지 │ 3, 4학년이 꼭 알아야… │ │ 한국 교육과정평가원이 최근… └─────────┘ ← 이미지 끝나면 텍스트가 다시 왼쪽 끝으로
※ 이미지가 짧고 텍스트가 길면, 텍스트가 이미지보다 길어지는 시점에서 자동으로 다시 왼쪽 끝부터 시작한다 — 잡지처럼 자연스러운 흐름이 만들어진다.
2 margin-right — 이미지와 글 사이 숨통
margin-right이 없으면 어떻게 보이나?
float만 줘도 텍스트가 옆에 흐르긴 하지만, 이미지 끝과 글자가 딱 붙어서 답답하다. margin-right: 25px은 이미지 박스의 바깥 오른쪽에 25px 공간을 만들어 글자와 분리한다.
margin-right: 0 → ┌────┐바쁜 3, 4학년… (글자가 이미지에 딱 붙음) │이미지│3, 4학년이… └────┘한국 교육과정… margin-right: 25px → ┌────┐ 바쁜 3, 4학년… (글자에 숨통) │이미지│ 3, 4학년이… └────┘ 한국 교육과정…
※ padding-right vs margin-right
padding-right: 이미지 안쪽에 공간 — 이미지 자체가 더 넓어 보임 (배경색 있으면 차이 큼)margin-right: 이미지 바깥쪽에 공간 — 이미지 크기는 그대로, 옆 요소와 간격만 벌어짐- 이미지·박스 사이 간격은 거의 항상
margin
3 margin: 20px auto — 컨테이너 가운데 정렬
margin: 20px auto의 의미
margin은 한 줄에 4개 값까지 적을 수 있다. 값 개수에 따라 의미가 달라진다.
| 표기 | 의미 |
|---|---|
margin: 20px |
위·오른·아래·왼 모두 20px |
margin: 20px auto |
위·아래 20px / 좌·우 auto (가운데) |
margin: 10px 20px 30px |
위 10 / 좌·우 20 / 아래 30 |
margin: 10px 20px 30px 40px |
위→오른→아래→왼 (시계방향) |
※
auto가 작동하려면 width가 명시되어 있어야 한다. 이 코드는 width: 800px이 있어서 가운데 정렬이 동작한다.반응형
4 line-height — 한 줄의 높이
line-height가 왜 가독성을 좌우하나?
본문 글씨가 작은 크기인데 줄 간격이 좁으면 읽기 답답하다. 반대로 너무 넓으면 한 단락이 흩어져 보인다. 일반적으로 글씨 크기의 1.5~1.8배가 읽기 좋다.
font-size: 16px + line-height: 16px → 1배 (답답) + line-height: 24px → 1.5배 (적당) + line-height: 30px → 약 1.9배 (이 코드, 넉넉) + line-height: 40px → 2.5배 (단락이 흩어짐)
※ 단위 없이 쓰는 게 권장
line-height: 1.7처럼 숫자만 쓰면 폰트 크기가 바뀌어도 자동으로 비율 유지line-height: 30px은 폰트가 커지면 비율이 깨짐 (글자가 줄에 끼어 보임)- 실무에서는 거의 단위 없는 값 사용
5 그려지는 흐름
1
#container 시작width 800 + margin auto → 가로 가운데, 위·아래 20 여백
2
img.left-img 만남float:left → 왼쪽 끝으로 이동, margin-right 25px로 오른쪽 빈 공간
3
h1 제목이미지 오른쪽 빈 공간으로 흘러 들어옴
4
h2 부제목이미지 옆 같은 영역에서 다음 줄로
5
p 본문line-height 30px로 줄 간격 넓게, 이미지 끝나면 왼쪽 끝부터 다시 채움
6 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| float 후 부모 박스 높이 깨짐 | 부모 컨테이너가 텍스트만큼만 높아지고 이미지가 밖으로 튀어나옴 | 부모에 ::after { clear: both } 또는 overflow: auto |
| 이미지 alt 누락 | 접근성·SEO 점수 하락 | 의미 있는 이미지면 설명, 장식이면 빈 alt="" |
| margin-right 누락 | 글자가 이미지에 딱 붙음 | 이미지에 margin-right 추가 |
| 너비 없이 margin auto | 가운데 정렬 안 됨 | width 명시 필수 |
| 이미지가 텍스트보다 매우 김 | 다음 단락도 옆으로 흘러감 | 새 섹션 시작 전 clear: both |
7 같은 효과를 flex로
요즘은 같은 레이아웃을 flex로도 자주 만든다. 단, 텍스트가 이미지보다 길어졌을 때 다시 왼쪽 끝으로 흘러 들어가는 효과는 float만 가능하다 — flex는 한 줄 안에서만 정렬한다.
float
- 잡지처럼 텍스트가 이미지를 감쌈
- 책 소개·인물 카드
- 이미지 끝나면 텍스트가 왼쪽으로 복귀
flex
- 이미지 옆에 텍스트 컬럼 (감쌈 안 됨)
- 제품 카드·프로필 영역
- 세로 정렬·간격 조절 쉬움
핵심 한 줄 요약
float: left요소를 왼쪽으로 띄우고 뒤 콘텐츠가 옆 빈 공간으로 흘러 들어옴
margin-right이미지와 옆 텍스트 사이 간격
margin: 20px auto위·아래 20, 좌·우 자동 → 가로 가운데 (width 필수)
line-height줄 간격 — 본문은 1.5~1.8배가 읽기 좋음
잡지 효과텍스트가 이미지를 감싸며 흐름 — float만 가능
img alt접근성 필수, 장식이면 빈 alt=""
Tags
#float #float-left #텍스트흐름 #잡지레이아웃 #이미지정렬 #margin-right #margin-auto #line-height #img-alt #clearfix #flex #CSS레이아웃 #웹개발 #HTML #티스토리
▼ 티스토리 태그 입력란 복사용
float, float-left, 텍스트흐름, 잡지레이아웃, 이미지정렬, margin-right, margin-auto, line-height, img-alt, clearfix, flex, CSS레이아웃, 웹개발, HTML, 티스토리
반응형
'php' 카테고리의 다른 글
| 외부 CSS 연결 · border 스타일 — link · solid · dotted · double 완전 정리 (0) | 2026.05.04 |
|---|---|
| CSS 2단 레이아웃 — float · width · margin auto 완전 정리 (0) | 2026.05.04 |
| float — 박스 4개를 좌·우로 배치하기 완전 정리 (0) | 2026.05.04 |
| CSS 3단 레이아웃 — 좌측 사이드 · 본문 · 우측 사이드 완전 정리 (0) | 2026.05.04 |
| 외부 CSS와 float 레이아웃 — 2단·3단 구조 완전 정리 (0) | 2026.05.04 |
댓글