공백 규칙과 특수 문자

글 속의 빈칸 · 줄바꿈 · 들여쓰기를 함께 공백(whitespace)이라고 합니다. 공백도 나무에는 친 그대로 글로 남지만, 브라우저는 화면에 그릴 때 이어진 공백을 빈칸 하나로 합칩니다. 그래서 줄을 나누는 것은 엔터가 아니라 요소와 br이고, 꺾쇠(< · >)를 글자로 보이려면 < · > 같은 특수 문자를 씁니다.

편집기에서 엔터로 줄을 나누고 빈칸으로 칸을 맞춰도, 브라우저에서 열면 글이 한 줄로 붙어 나옵니다. 글 속에 태그를 설명하려고 <p>를 그대로 적으면 그 글은 사라지고 문단이 하나 더 생깁니다. 두 일 모두 오류 메시지 없이 일어납니다. 이 레슨에서는 공백이 나무와 화면에서 어떻게 다른지, 줄을 나누는 법, 꺾쇠를 글자로 쓰는 법을 봅니다.

<p>재료:  밥 2공기  김치 1컵</p>

1나무에는 그대로, 화면에서 하나로

<p>재료:
  밥 2공기
  김치 1컵</p>

코드에서는 세 줄로 나눠 두 칸씩 들여 썼지만, 결과 화면에는 '재료: 밥 2공기 김치 1컵' 한 줄이 그려졌습니다. 브라우저는 p 안의 줄바꿈과 들여쓰기를 지우지 않고 글로 나무에 넣어 둡니다. 화면에 그릴 때만 줄바꿈 하나와 빈칸 둘이 이어진 덩어리를 빈칸 한 칸으로 합칩니다. 위 화면 그림의 나무 판이 빈칸 보이기로 보여 주는 것이 나무에 든 그대로의 글입니다.

브라우저 규칙 2. 태그 밖의 줄바꿈 · 빈칸 · 들여쓰기도 글로 나무에 남습니다. 화면에 그릴 때 이어진 빈칸은 하나로 합쳐지고, 문단 사이 · 목록의 줄 사이처럼 빈칸만 있는 글은 그려지지 않습니다.

빈칸을 여러 번 쳐도 같습니다. 이어진 빈칸은 몇 개든 화면에서 한 칸입니다.

<p>김치     1컵</p>

2줄을 나누는 것은 요소와 br

화면에서 줄을 나누려면 나무에 줄이 나뉜다는 표시가 있어야 합니다. 그 표시는 요소입니다 — 문단이 바뀌면 p를 새로 열고, 한 문단 안에서 줄만 바꿀 때는 br를 씁니다.

<p>
  재료:<br />
  밥 2공기<br />
  김치 1컵
</p>

br 자리에서 줄이 바뀌었습니다. 줄을 바꾼 뒤 새 줄 맨 앞에 오는 줄바꿈과 들여쓰기는 그려지지 않아, 코드의 들여쓰기도 화면에 남지 않습니다. 재료처럼 줄마다 따로인 글은 목록 ul·ol·li가 맞고, br는 주소나 시처럼 한 문단 안에서 줄만 바꿀 때 씁니다.

3꺾쇠를 글자로 — 특수 문자

글 속에 꺾쇠를 그대로 쓰면, 브라우저는 그것을 태그로 읽습니다.

<p>태그는 <p>처럼 씁니다.</p>

글 속의 <p>는 새 문단을 여는 태그가 되어, 화면에서 사라지고 문단이 둘로 갈라졌습니다. 꺾쇠를 글자로 보이려면 특수 문자(자료에 따라 문자 참조)를 씁니다. &로 시작해 ;으로 끝나는 짧은 이름입니다.

<p>태그는 &lt;p&gt;처럼 씁니다.</p>

< · >는 꺾쇠를 글로 보일 때 씁니다. & 뒤에 이름이 이어지면 특수 문자로 읽힐 수 있어서, & 자체를 보일 때는 &로 씁니다.  는 이어 써도 합쳐지지 않는 빈칸입니다. 그래서 빈칸 여럿을 띄울 수는 있지만, 글 사이를 띄우거나 칸을 맞추는 일은 CSS가 맡습니다.

<p>커피  4000원</p>

<p>커피&nbsp;&nbsp;4000원</p>

빈칸 둘은 한 칸으로 합쳐지고,   둘은 두 칸 그대로 그려져 두 화면이 다릅니다.

예제

조리 메모 두 문단입니다. 화면에 보이는 글을 빈칸까지 그대로, 줄마다 먼저 적어 본 뒤 결과 화면을 펴 보세요.

<p>
  김치    1컵을
  잘게 썰어요.
</p>
<p>밥 &amp; 김치를 볶아요.</p>

자주 틀리는 곳

틀린 생각: 편집기에서 친 대로 줄바꿈과 빈칸이 화면에 나온다.

편집기 화면이 곧 결과처럼 보여서, 엔터를 친 자리에서 줄이 바뀔 것 같습니다.

<p>
  1. 김치 볶기
  2. 밥 넣기
</p>

두 줄로 친 조리 순서가 한 줄로 붙었습니다.

맞는 규칙: 공백은 나무에 남지만, 화면에서는 이어진 공백이 빈칸 하나로 합쳐집니다(브라우저 규칙 2). 줄을 나누려면 요소(문단 · 목록의 줄)나 br를 씁니다. 조리 순서라면 ol이 맞습니다.

틀린 생각: 줄바꿈은 빈칸이 없는 자리에서 해도 화면에 아무것도 남기지 않는다.

1절의 규칙을 배우면, 줄바꿈은 화면에서 사라진다고 여기기 쉽습니다. 줄바꿈은 사라지는 것이 아니라 빈칸 하나가 됩니다.

<p><strong>김치</strong>
를 볶아요.</p>

'김치'와 '를' 사이는 원래 붙은 자리인데, 그 자리에서 줄을 바꿔 빈칸이 생겼습니다.

맞는 규칙: 줄바꿈도 그릴 때 빈칸 한 칸이 됩니다. 코드에서 줄을 나눌 때는 원래 빈칸이 있던 자리에서만 나눕니다.

틀린 생각: 문단 사이를 띄우려면 br를 여러 번 쓴다.

br 하나가 줄을 바꾸니, 여럿 쓰면 그만큼 틈이 생길 것 같습니다.

<p>
  밥 2공기<br /><br /><br />
  김치 1컵
</p>

화면에는 빈 줄이 생겼지만, 나무에서는 여전히 문단 하나 안의 글입니다. 틈의 크기도 글자 크기에 따라 달라집니다.

맞는 규칙: br는 한 문단 안에서 줄을 바꾸는 요소입니다. 글이 나뉘면 문단을 나누고(p 둘), 문단 사이 틈은 CSS가 정하는 여백으로 바꿉니다 — 10단원 '박스 모델'에서 배웁니다.

틀린 생각: br도 다른 요소처럼 </br>로 닫는다.

여는 태그가 있으면 닫는 태그도 있어야 할 것 같습니다.

<p>밥 2공기</br>김치 1컵</p>

브라우저는 </br>를 <br>로 읽어 줄을 바꿨습니다. 화면은 같아 보여도 틀린 태그라, 검사기는 이 줄에 'End tag “br”.'를 냅니다(검사기 — 이 단원 끝 레슨).

맞는 규칙: br는 빈 요소라 닫는 태그가 없습니다. <br />(또는 <br>)로만 씁니다.

확인 문제

1. 예제의 두 문단 사이에 빈 줄(5번 줄)이 있습니다. 이 빈 줄을 다섯 줄로 늘리면, 결과 화면에서 두 문단 사이는 어떻게 될까요?

<p>
  김치    1컵을
  잘게 썰어요.
</p>

<p>밥 &amp; 김치를 볶아요.</p>

• ① 빈 줄 다섯만큼 더 벌어진다
• ② 그대로다
• ③ 빈칸 한 칸만큼 더 벌어진다

<p>
  김치    1컵을
  잘게 썰어요.
</p>





<p>밥 &amp; 김치를 볶아요.</p>

<p>
  김치    1컵을
  잘게 썰어요.
</p>

<p>밥 &amp; 김치를 볶아요.</p>

2. 결과 화면에 5 < 7이 보이도록 ____ 자리에 들어갈 특수 문자를 쓰세요.

<p>5 ____ 7</p>

<p>5 &lt; 7</p>

3. 동아리 공지 한 문단입니다. 화면에 보이는 글을 빈칸까지 그대로 쓰세요.

<p>모임은 <strong>금요일</strong>
입니다.</p>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. hello.html의 문단 하나에서 낱말 사이에 빈칸을 열 번 쳐 넣고 저장 · 새로고침합니다. 화면에서 그 자리가 몇 칸으로 보이는지 세어 보고, 개발자 도구 Elements 패널에서 그 문단의 글이 어떻게 보이는지도 봅니다. 파일을 만들고 여는 법은 준비: VS Code와 작업 폴더에 있습니다.