HTML에서 여러 칸의 공백을 넣으려면?
HTML로 웹 페이지를 작성하다 보면 요소 사이에 여백을 만들어야 하는 경우가 자주 있습니다. 그런데 스페이스바를 아무리 여러 번 눌러도 원하는 만큼 공백이 생기지 않습니다. HTML은 연속된 여러 개의 공백이나 탭을 하나의 공백으로 합쳐 버리기 때문입니다. 이런 문제를 해결해 주는 것이 바로 HTML 엔티티(entity)입니다. 이 글에서는 다양한 크기의 공백을 만들 수 있는 HTML 엔티티의 종류와 실전 활용법을 살펴보겠습니다.
HTML에서 사용할 수 있는 4가지 공백 엔티티
HTML 요소에서 활용할 수 있는 대표적인 공백은 다음 네 가지입니다.
 — 얇은 공백(Thin Space) — 줄바꿈 없는 공백(Non-breaking Space) — 반각 공백(En Space) — 전각 공백(Em Space)
아래 코드 예제는 네 가지 공백의 크기 차이를 한눈에 비교할 수 있게 보여 줍니다.
<!DOCTYPE html>
<!--
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
span {
background: pink;
}
body {
font-family: Arial
}
</head>
<body style="font-family:Arial;">
<h1>Differences in Sizes of Space Entities in HTML</h1>
<!-- At beginning of sentences -->
<p style="font-size:16px;text-decoration:underline;font-weight:bold;"> Beginning of Sentences</p>
<p><span> </span>I am a sentence.</p>
<p><span> </span>I am a sentence.</p>
<p><span> </span>I am a sentence.</p>
<p><span> </span>I am a sentence.</p>
<!-- in between words -->
<p style="font-size:16px;text-decoration:underline;font-weight:bold;"> In Between Words</p>
<p>I<span> </span>am<span> </span>a<span> </span>sentence.</p>
<p>I<span> </span>am<span> </span>a<span> </span>sentence.</p>
<p>I<span> </span>am<span> </span>a<span> </span>sentence.</p>
<p>I<span> </span>am<span> </span>a<span> </span>sentence.</p>
</body>
</html>일반 공백 vs HTML 엔티티: 무엇이 다를까?
공백 엔티티는 단순히 크기만 다른 것이 아니라, 각자 어울리는 용도가 따로 있습니다. 아래 예제는 스페이스바로 입력한 일반 공백과 HTML 엔티티를 사용했을 때 어떤 차이가 나타나는지 보여 줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head>
<body style="font-family:Arial;">
<div>
<strong>Using nbsp; example</strong>
<br/>
<br/>
<div style="width:50px;height: 50px;border:1px solid red;margin:10px;">Dr. John Doe</div>
<div style="width:50px;height: 50px; border: 1px solid red;margin:10px;">Dr. John Doe</div>
<div style="width:50px;height: 50px;border:1px solid red;margin:10px;">Reno, NV</div>
<div style="width:50px;height: 50px; border: 1px solid red;margin:10px;">Reno, NV</div>
</div>
<div>
<strong>Using emsp; example</strong>
<br/>
<br/>
<div style="border:1px solid red;margin:10px;">
<p>Here are some quotes.</p>
<p> <em> —To be or not to be, that is the question...</em></p>
<p> <em> —This above all: to thine own self be true...</em></p>
<p> <em> —What's in a name? That which we call a rose
By any other word would smell as sweet...</em></p>
</div>
<div style="border: 1px solid red;margin:10px;">
<p>Here are some quotes.</p>
<p> <em> —To be or not to be, that is the question...</em></p>
<p> <em> —This above all: to thine own self be true...</em></p>
<p> <em> —What's in a name? That which we call a rose
By any other word would smell as sweet...</em></p>
</div>
</div>
</body>상황별 공백 엔티티 선택 가이드
줄이 바뀌면 안 되는 구문, 사람 이름, 숫자가 있다면 엔티티를 사용하세요. 위 예제의 'Dr. John Doe'처럼 이름 중간에서 줄바꿈이 일어나지 않도록 할 때 특히 유용합니다. 반대로 인용문처럼 별도의 줄 또는 문단에서 독립적으로 강조해야 하는 텍스트 블록 앞에는   엔티티를 사용하면 시각적으로 깔끔하게 들여쓰기 효과를 낼 수 있습니다.
공백 크기별 코드 정리
아래 표는 크기가 서로 다른 공백에 사용할 수 있는 코드를 정리한 것입니다.
표에 있는 코드들은 각각 해당하는 크기와 유형의 공백을 만들며, 어느 것을 사용해도 동일하게 동작합니다. 엔티티 이름(Entity Name) 방식은 대부분의 브라우저에서 폭넓게 지원되지만, 만약 지원하지 않는 환경이라면 Hex(16진수) 또는 Dec(10진수) 코드를 대신 사용하면 됩니다.