반응형
Web Development · CSS Layout
외부 CSS와 float 레이아웃 —
2단·3단 구조 완전 정리
link 외부 CSS 연결, float·clear로 만드는 헤더-본문-사이드바-푸터 구조
시작 이 포스팅에서 다루는 것
HTML 페이지를 만들 때 가장 먼저 마주치는 두 가지 문제가 있다. (1) CSS를 어디에 둘 것인가 — head 안에 직접? 아니면 별도 .css 파일로 분리? (2) 화면을 어떻게 나눌 것인가 — 헤더/본문/사이드바/푸터 같은 영역을 어떤 방식으로 배치할 것인가? 이 글에서는 외부 CSS 연결법과 float 기반 2단/3단 레이아웃 만드는 법, 그리고 박스에 테두리·라운드를 적용하는 방법까지 한번에 정리한다.
학습 흐름: 외부 CSS 연결 → 2단 레이아웃 → 3단 레이아웃 → float 박스 정렬 → border-radius 디자인
용어 핵심 키워드 정리
link외부 CSS 파일을 연결하는 head 안 태그
float요소를 좌/우로 띄워 옆 요소가 감싸도록 함
clearfloat 영향을 끊는 속성 (양쪽: both)
margin: 0 auto좌우 여백 자동 → 가로 가운데 정렬
#container전체 페이지를 감싸는 wrapper id
border-radius박스 모서리를 둥글게 깎는 속성
header/section/aside/footerHTML5 시맨틱 영역 태그
박스모델content + padding + border + margin 구조
1 외부 CSS 연결 <link>
왜 CSS를 분리하는가?
CSS를 <style> 태그로 head 안에 직접 작성하는 것을 "내부 스타일 시트"라고 한다. 이 방법은 페이지가 1개일 때는 편하지만, 여러 페이지가 같은 디자인을 공유해야 할 때 모든 페이지마다 같은 CSS를 반복해서 써야 한다. 외부 CSS 파일로 분리하면 CSS 한 번만 수정해도 모든 페이지에 반영된다.
link 태그로 연결하는 법
<head> <meta charset="utf-8"> <title>외부 CSS 연결</title> <link href="layout.css" rel="stylesheet" type="text/css"> </head>
| 속성 | 값 | 의미 |
|---|---|---|
href |
"layout.css" | 연결할 CSS 파일 경로 |
rel |
"stylesheet" | 이 파일이 스타일시트라는 표시 |
type |
"text/css" | 파일의 MIME 타입 (HTML5에서 생략 가능) |
※ 외부 CSS의 장점
- 여러 페이지가 같은 CSS를 공유 → 디자인 통일성 유지
- 수정은 한 곳에서, 반영은 전체 페이지에
- HTML 코드가 깔끔해져서 가독성 ↑
- 브라우저가 CSS 파일을 캐시 → 두 번째 페이지부터 로딩 빠름
2 2단 레이아웃 만들기
2단 레이아웃의 구조
대부분의 블로그·게시판 사이트가 사용하는 가장 흔한 구조다. 위에 헤더, 가운데 본문 + 옆에 사이드바, 아래에 푸터. 이 구조를 만들려면 본문은 left float, 사이드바는 right float를 쓰고, 푸터에서 clear:both로 float을 해제한다.
레이아웃 시각화
HEADER (제목)
CONTENTS (본문) — float: left
SIDEBAR — float: right
FOOTER — clear: both
CSS 코드
#container { width: 960px; /* 컨테이너 너비 */ padding: 20px; margin: 0 auto; /* 화면 중앙 정렬 */ } #header { padding: 20px; margin-bottom: 20px; } #contents { width: 620px; padding: 20px; float: left; /* 왼쪽으로 띄움 */ } #sidebar { width: 220px; padding: 20px; float: right; /* 오른쪽으로 띄움 */ background: #eee; } #footer { clear: both; /* float 해제 */ padding: 20px; }
HTML 구조
<div id="container"> <div id="header">...</div> <div id="sidebar">...</div> <div id="contents">...</div> <div id="footer">...</div> </div>
⚠️ 너비 계산: 컨테이너 960px - 좌우 padding 40px = 920px 사용 가능. 본문 620 + 사이드 220 = 840px (각각 padding 40px 포함). 합쳐서 920px이 안 넘어야 한쪽이 아래로 떨어지지 않는다.
3 3단 레이아웃 (좌·본문·우)
3단 구조의 핵심
3단은 왼쪽 사이드바 - 본문 - 오른쪽 사이드바 구조다. 좌 사이드바는 float:left, 본문도 float:left(좌측에 자연스럽게 붙도록), 우 사이드바만 float:right로 처리한다.
HEADER
LEFT
CONTENTS
RIGHT
FOOTER · clear: both
#container { width: 960px; margin: 0 auto; } #left-sidebar { width: 150px; float: left; margin-right: 20px; /* 본문과 간격 */ } #contents { width: 490px; float: left; /* 좌측 사이드 옆에 붙음 */ } #right-sidebar { width: 150px; float: right; } #footer { clear: both; }
2단 레이아웃
- 본문(왼쪽 float) + 사이드바(오른쪽 float)
- 가장 흔한 블로그 구조
- 본문 영역이 넓어 가독성 좋음
3단 레이아웃
- 좌 사이드 + 본문 + 우 사이드
- 포털·뉴스 사이트에 많음
- 한 화면에 정보 밀도 ↑
4 float 박스 정렬 익히기
여러 박스를 옆으로 나열하기
float을 이해하는 가장 쉬운 방법은 작은 박스 여러 개를 한 줄에 늘어놓는 연습이다. 각 박스에 float:left를 주면 위에서부터 순서대로 좌측에 붙고, 마지막 박스만 float:right를 주면 같은 줄의 우측 끝에 붙는다.
.box1 { background: #ffd800; float: left; margin-right: 10px; } .box2 { background: #0094ff; float: left; margin-right: 10px; } .box3 { background: #00ff21; float: left; } .box4 { background: #fff; float: right; border: 1px solid black; }
실제 결과
박스1
박스2
박스3
박스4
※ float을 쓸 때 자주 만나는 문제
- 부모가 float 자식의 높이를 인식하지 못해 부모가 0 높이가 됨 → "clearfix" 트릭 필요
- 다음 요소가 float 옆에 따라 붙어버림 →
clear: both로 끊기 - 전체 너비가 컨테이너를 넘으면 다음 줄로 떨어짐 → 너비 계산 정확히
반응형
5 이미지 옆에 글 흐르게 하기
img에 float 적용
float의 또 다른 흔한 용도는 이미지 옆에 텍스트가 자연스럽게 감기게 하는 것. 신문이나 잡지의 그림 옆 본문 같은 효과다.
.left-img { float: left; /* 이미지가 왼쪽에 붙음 */ margin-right: 25px; /* 텍스트와 간격 */ } p { line-height: 30px; }
<div id="container"> <img src="images/cover.jpg" class="left-img" alt=""> <h1>제목</h1> <p>본문이 이미지 오른쪽에 자연스럽게 감긴다...</p> </div>
💡 신문·잡지 효과: 이미지에
float:left + 텍스트의 line-height를 넉넉히 주면 잡지처럼 깔끔한 비주얼이 나온다.6 시맨틱 태그 + border-radius 디자인
HTML5 시맨틱 태그
<div> 대신 의미 있는 태그를 쓰면 검색엔진과 스크린리더가 페이지 구조를 이해할 수 있다. 주요 시맨틱 태그를 정리하면:
| 태그 | 역할 | 예시 위치 |
|---|---|---|
<header> |
페이지·섹션 머리 | 로고·내비게이션 |
<nav> |
주요 메뉴 링크 | 상단 메뉴 |
<section> |
주제별 영역 | 본문 영역 |
<article> |
독립적인 콘텐츠 단위 | 게시글·카드 |
<aside> |
본문 보조 정보 | 사이드바·관련글 |
<footer> |
페이지 하단 | 저작권·연락처 |
border-radius로 모서리 둥글게
#pet1 { border: 1px solid black; border-radius: 10px; /* 4 모서리 모두 10px */ } #pet2 { border: 1px dotted blue; /* 점선 */ border-radius: 20px; } #pet3 { border: 2px double green; /* 이중선 */ border-top-left-radius: 30px; /* 좌상단만 */ border-bottom-right-radius: 30px; /* 우하단만 */ }
| 속성 | 의미 |
|---|---|
border-radius: 10px |
네 모서리 모두 동일하게 둥글게 |
border-top-left-radius |
좌상단 모서리만 |
border-top-right-radius |
우상단 모서리만 |
border-bottom-left-radius |
좌하단 모서리만 |
border-bottom-right-radius |
우하단 모서리만 |
border: 1px solid |
실선 / dotted(점선) / dashed(파선) / double(이중선) |
7 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| 너비 합이 컨테이너 초과 | 사이드바가 다음 줄로 떨어짐 | 본문 + 사이드바 + padding 합 ≤ 컨테이너 너비 |
| footer에 clear 안 줌 | 푸터가 사이드바 옆에 붙음 | clear: both 추가 |
| 외부 CSS 경로 오류 | 스타일이 전혀 안 먹힘 | HTML 파일 기준 상대경로 확인 |
| link 태그 self-closing 누락 | 대부분 동작은 함, 하지만 검사기 오류 | HTML5에서는 >로 닫음 (XHTML은 />) |
| float 후 부모 높이 0 | 배경·테두리가 사라져 보임 | clearfix 또는 부모에 overflow: hidden |
요약 핵심 한 줄 정리
외부 CSS · 레이아웃 · float 핵심
<link>외부 CSS 연결 — head 안에서 href + rel="stylesheet"
margin: 0 auto고정 너비 컨테이너를 화면 가운데로
float: left/right요소를 좌·우로 띄워 옆에 다른 요소가 흐르게
clear: bothfloat 영향 끊기 — 푸터에 필수
2단 레이아웃contents(left) + sidebar(right) + footer(clear)
3단 레이아웃left(left) + contents(left) + right(right)
border-radius전체 또는 개별 모서리 둥글게 — 네 가지 방향 별도 지정 가능
시맨틱 태그header / nav / section / article / aside / footer
Tags
#float #2단레이아웃 #3단레이아웃 #외부CSS #link태그 #clear #CSS레이아웃 #박스모델 #HTML5시맨틱 #border-radius #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
float, 2단레이아웃, 3단레이아웃, 외부CSS, link태그, clear, CSS레이아웃, 박스모델, HTML5시맨틱, border-radius, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| float — 박스 4개를 좌·우로 배치하기 완전 정리 (0) | 2026.05.04 |
|---|---|
| CSS 3단 레이아웃 — 좌측 사이드 · 본문 · 우측 사이드 완전 정리 (0) | 2026.05.04 |
| HTML 이벤트 메일 — table 레이아웃 · 인라인 스타일 완전 정리 (0) | 2026.05.04 |
| CSS Background — clip · origin · position 완전 정리 (0) | 2026.05.04 |
| CSS display — block · inline · inline-block 완전 정리 (0) | 2026.05.04 |
댓글