div와 span은 뜻이 없는 묶음입니다. div는 여러 요소를 한 덩어리로, span은 글 속의 한 조각을 묶습니다. 둘은 화면에서 자리를 잡는 방식이 다릅니다 — div 같은 블록은 한 줄을 통째로 차지하며 위에서 아래로 쌓이고, span 같은 인라인은 글자처럼 줄 안에서 흐릅니다.
영역 요소 가운데 맞는 것이 없는데 몇 요소를 묶어야 할 때가 있습니다. 카드의 요리 이름과 배지를 나중에 한 줄에 놓으려고 묶거나, 문장 속 '한식' 두 글자만 꾸미려고 감쌀 때입니다.
그런데 감싸기만 했는데 이름이 다음 줄로 내려가거나, 따로 쓴 두 줄이 한 줄로 붙기도 합니다. 요소마다 자리를 잡는 방식이 정해져 있기 때문입니다.
이 레슨에서는 블록과 인라인이 놓이는 규칙, 그 사이 빈칸, 그리고 div · span을 고르는 때를 봅니다.
1블록은 쌓이고, 인라인은 줄 안에서 흐른다
<div>가</div>
<div>나</div>
<span>다</span>
<span>라</span>div의displayblockspan의displayinlinebody의 보이는 글가 / 나 / 다 라
div 둘은 두 줄로 쌓였고, span 둘은 한 줄에 이어졌습니다. 잰 값의 display는 브라우저가 그 요소를 어떻게 놓는지 적은 값입니다 — div는 블록(block), span은 인라인(inline)입니다.
브라우저 규칙 7. 일반 흐름에서 블록은 위에서 아래로 쌓이고, 인라인은 글자처럼 줄 안에서 흐릅니다.
일반 흐름은 CSS로 놓는 방식을 따로 정하지 않았을 때의 배치입니다. 블록은 앞뒤에서 줄을 바꾸고 가로를 다 차지합니다. 인라인은 줄이 차면 다음 줄로 넘어갈 뿐, 앞뒤에서 줄을 바꾸지 않습니다. 이 규칙의 뒤 절반 — 놓는 방식은 부모가 정한다는 것 — 은 12단원 flex에서 봅니다.
| 블록 | 인라인 | |
|---|---|---|
| 자리 | 가로 한 줄을 통째로 · 앞뒤에서 줄이 바뀜 | 글자만큼 · 줄 안에 이어짐 |
| 요소 | div · p · h1~h6 · ul · ol · figure · 영역 요소 | span · a · strong · em · img |
블록이 가로를 다 차지하는 것은 개발자 도구 Elements 패널에서 보입니다. div 줄에 마우스를 올리면 페이지에서 가로 폭 전체가 칠해지고, span 줄에 올리면 그 글자만큼만 칠해집니다.
2블록 사이 빈칸은 그려지지 않는다
1절 코드는 줄마다 태그를 썼으니, 태그 사이에 줄바꿈 글이 셋 있습니다. div 사이의 줄바꿈은 화면에 보이지 않고, span 사이의 줄바꿈은 '다 라'의 빈칸 한 칸으로 그려졌습니다.
span 둘을 줄바꿈 없이 붙여 쓰면 빈칸 글이 없어져 두 글자가 붙습니다.
<span>다</span><span>라</span>body의 보이는 글다라
공백 규칙과 특수 문자에서 '문단 사이 · 목록의 줄 사이'라고 풀어 쓴 자리가 바로 블록 사이입니다. 공백은 글로 나무에 남고, 블록 사이처럼 빈칸만 있는 글은 그려지지 않습니다(브라우저 규칙 2). 인라인 사이의 공백은 같은 줄 안의 글이라 빈칸 하나로 그려집니다.
3그림 옆에 붙는 이름 — img도 인라인이다
<img
src="images/gyeran-mari.svg"
alt="계란말이"
width="120"
height="90"
/>
<span>계란말이</span>img의displayinlinespan의displayinline
그림 img도 인라인이라, 뒤의 이름은 줄을 바꾸지 않고 그림 오른쪽에 붙었습니다. 그림이 글자보다 훨씬 높아 줄이 그림 높이만큼 커지고, 이름은 그 줄의 바닥에 놓입니다.
이름을 그림 아래 줄로 내리려면 블록으로 감쌉니다. 요리 이름은 카드의 제목이니 뜻 있는 블록 h2가 맞습니다.
4뜻 있는 요소가 없을 때만 div · span
| 요소 | 묶는 것 | 쓰는 때 |
|---|---|---|
div | 여러 요소를 한 덩어리로 | 영역 요소 · 목록 · 문단 가운데 맞는 것이 없을 때 |
span | 글 속의 한 조각 | strong · em 같은 뜻 있는 글 요소가 맞지 않을 때 |
div와 span의 역할은 둘 다 뜻 없는 generic입니다. 화면 읽기 프로그램과 검색에 아무것도 알려 주지 않습니다. 그래서 고르는 차례는 늘 뜻 있는 요소가 먼저이고, 맞는 것이 없을 때만 div · span입니다(브라우저 규칙 3).
예제
목록 페이지의 계란말이 카드 안입니다. 요리 이름과 배지는 나중에 한 줄에 놓으려고 div로 묶었습니다. 결과 화면을 펴기 전에, 배지 '한식'이 요리 이름 옆에 놓일지 아래 줄에 놓일지 먼저 적어 보세요.
<img
src="images/gyeran-mari.svg"
alt="계란말이"
width="200"
height="150"
/>
<div>
<h2>계란말이</h2>
<span>한식</span>
</div>
<p>조리 20분</p>결과 화면 보기
h2의displayblockspan의displayinlinediv의 보이는 글계란말이 / 한식
배지는 요리 이름 아래 줄에 놓입니다. span은 인라인이지만, 바로 앞의 h2가 블록이라 그 뒤에서 줄이 바뀌었습니다. 그림 뒤의 div · 맨 아래 p도 블록이라 저마다 새 줄에서 시작합니다.
이름과 배지를 한 줄 양 끝에 놓는 일은 CSS가 맡습니다 — 12단원 flex에서 이 div를 씁니다.
자주 틀리는 곳
틀린 생각: span에도 width로 너비를 줄 수 있다.
div에 준 너비가 먹으니, span에도 같은 선언이 먹을 것 같습니다. width는 상자의 너비를 정하는 CSS 속성입니다(10단원).
<div>상자</div>
<span>조각</span>div {
width: 120px;
}
span {
width: 120px;
}div의 너비120pxspan의 width 선언120px
선언은 둘 다 닿았지만 div만 120px이 되었고, span은 글자만큼 그대로입니다. span처럼 글을 담는 인라인은 글자처럼 흘러, 너비 · 높이 선언이 먹지 않습니다(그림 img는 인라인이어도 먹습니다).
맞는 규칙: 너비 · 높이는 블록과 그림에 먹고, 글을 담는 인라인(span · a · strong)에는 먹지 않습니다. 인라인 요소의 놓는 방식을 바꾸는 법은 10단원 블록과 인라인 display에서 봅니다.
틀린 생각: 묶을 곳은 모두 div로 감싸면 된다.
div는 아무 데나 쓸 수 있고 화면도 그대로라, 페이지 전체를 div로만 나누기 쉽습니다.
<div>레시피 노트</div>
<div>
<h1>김치볶음밥</h1>
</div>
<div>
내가 만든 요리를 기록하는 곳
</div>div의 역할generic
결과 화면은 영역 요소로 감싼 것과 같습니다. 하지만 세 묶음의 역할이 모두 generic이라, 읽는 쪽은 어디가 머리글이고 본문인지 알 수 없습니다.
맞는 규칙: 뜻 있는 요소를 먼저 고릅니다 — 머리글은 header, 본문은 main, 바닥글은 footer(시맨틱 요소). div는 맞는 것이 없을 때만 씁니다(브라우저 규칙 3).
틀린 생각: 배지 안에 덩어리를 넣으려면 span 안에 div를 넣어도 된다.
span도 div도 뜻 없는 묶음이니, 서로 안에 넣어도 될 것 같습니다.
<span>
<div>한식</div>
</span>body의 나무<span><div> 한식</div> </span>
- Error2줄Element “div” not allowed as child of element “span” in this context. (Suppressing further errors from this subtree.)
브라우저는 오류 없이 쓴 대로 나무를 지었고, 화면에서도 '한식'이 그려집니다. 검사기는 Error를 냅니다 — '이 자리에서 div는 span의 자식이 될 수 없다'는 뜻입니다.
맞는 규칙: 인라인 span 안에는 글과 인라인만 넣습니다. 덩어리를 묶으려면 바깥을 div로 씁니다.
틀린 생각: 줄을 나누려면 줄마다 div로 감싼다.
div가 줄을 바꾸니, 줄을 나눌 곳마다 div를 쓰면 편해 보입니다.
<div>밥 2공기</div>
<div>김치 1컵</div>div의 역할genericbody의 보이는 글밥 2공기 / 김치 1컵
화면은 두 줄로 나뉘었지만, 두 줄이 재료 목록이라는 뜻은 어디에도 없습니다.
맞는 규칙: 줄을 나누는 것은 블록입니다. 그 블록은 뜻에 맞는 요소로 고릅니다 — 재료 목록이면 ul과 li, 글이면 p입니다.
확인 문제
1. 예제 카드에서 요리 이름의 h2를 strong으로 바꿨습니다(여는 태그와 닫는 태그 둘 다). 결과 화면에서 '계란말이'와 '한식'은 어떻게 놓일까요?
<img
src="images/gyeran-mari.svg"
alt="계란말이"
width="200"
height="150"
/>
<div>
<strong>계란말이</strong>
<span>한식</span>
</div>
<p>조리 20분</p>- ① 그림 아래 한 줄에 '계란말이 한식'
- ② 그대로 두 줄 — '계란말이' 아래에 '한식'
- ③ 그림 오른쪽에 '계란말이 한식'
힌트
div 안 두 요소가 저마다 블록인지 인라인인지, 그리고 div 자신은 무엇인지 봅니다.
정답
① — 그림 아래 한 줄에 '계란말이 한식'입니다.
strong의displayinlinediv의 보이는 글계란말이 한식
strong과span은 둘 다 인라인이라 한 줄 안에 이어집니다. 둘을 담은div는 블록이라, 그림 뒤에서 새 줄로 시작합니다(브라우저 규칙 7).- ②는
strong도 제목처럼 줄을 바꾼다고 본 것입니다. 줄을 바꾸는 것은 블록입니다. - ③은
div안의 인라인이 그림 옆으로 올라간다고 본 것입니다. 블록div가 그 줄을 끊습니다. - 한 줄에 놓였지만, 이제 '계란말이'는 제목이 아닙니다. 모양 때문에 제목 요소를 바꾸지 않습니다 — 둘을 한 줄에 놓는 것은 12단원 flex의 일입니다.
2. 문장 속 '한식' 두 글자만 나중에 꾸미려고 감싸려 합니다. ____ 자리에 알맞은 여는 태그를 쓰세요.
<p>
계란말이는
____한식</span>
반찬입니다.
</p>힌트
감쌀 것이 문단 안 글의 한 조각인지, 여러 요소의 덩어리인지 봅니다.
정답
<span>
<p>
계란말이는
<span>한식</span>
반찬입니다.
</p>p span의 보이는 글한식p의 보이는 글계란말이는 한식 반찬입니다.
글 속 한 조각은 인라인 span으로 감쌉니다. 문장이 끊기지 않고 한 줄로 이어집니다.
div를 쓰면 블록이라 문단이 그 자리에서 끊기고, 문단 안에 div를 넣을 수 없어 나무도 고쳐 지어집니다.
3. 플로우 카페 메뉴판을 이렇게 썼습니다. 결과 화면에는 몇 줄로, 어떻게 보일까요?
<span>커피</span>
<span>4000원</span>
<div>라테</div>
<span>4500원</span>- ① 네 줄 — 코드 한 줄이 화면 한 줄
- ② 세 줄 — '커피 4000원' / '라테' / '4500원'
- ③ 한 줄 — '커피 4000원 라테 4500원'
힌트
네 요소를 위에서부터 블록 · 인라인으로 나눠 적고, 줄이 바뀌는 자리를 찾습니다.
정답
② — '커피 4000원' / '라테' / '4500원' 세 줄입니다.
body의 보이는 글커피 4000원 / 라테 / 4500원
- 인라인
span둘은 한 줄에 이어지고, 블록div가 앞뒤에서 줄을 바꿉니다. 마지막span은div뒤 새 줄에서 시작합니다(브라우저 규칙 7). - ①은 코드에서 줄을 바꾼 대로 화면도 나뉜다고 본 것입니다(친 대로 나온다는 생각). 코드의 줄바꿈은 빈칸 하나로 그려집니다.
- ③은
div도 글자처럼 흐른다고 본 것입니다.
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
hello.html의 body 안을 자주 틀리는 곳 첫째 코드(div '상자' · span '조각')로 바꾸고, style 요소 안의 규칙을 그 CSS로 바꿔 저장 · 새로고침합니다. 개발자 도구 Elements 패널에서 div 줄과 span 줄에 차례로 마우스를 올려, 칠해지는 너비를 견줘 봅니다. div는 120px로 칠해지고 span은 글자만큼 칠해집니다.
파일을 만들고 여는 법은 준비: VS Code와 작업 폴더에 있습니다.