HTML에서는 공간을 만들어야 하는 경우가 있는데 스페이스바를 사용하여 공간을 만드는 것만큼 쉽지는 않습니다. 행이나 탭에 여러 공백이 필요한 경우 특히 그렇습니다. HTML은 이러한 여러 공백을 하나의 공백으로 축소하는 경향이 있습니다. 여기에서 HTML 엔터티가 필요합니다. 이 기사에서는 다양한 크기의 공간을 만들 수 있는 다양한 HTML 엔터티를 살펴봅니다.
HTML 요소에서 작업할 수 있는 공백에는 네 가지 주요 유형이 있습니다. 즉, 얇은 공백, 줄바꿈하지 않는 공백, en 공백 및 em 공백입니다. 아래 코드 편집기는 네 가지 유형 간의 크기 차이를 간략하게 보여줍니다.
<!DOCTYPE html>
<!--
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
span {
background: pink;
}
<style>
body {
font-family: Arial
}
</style>
</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>
다른 공간 유형은 다른 용도로 사용할 수 있습니다. 이 코드 예제에서는 스페이스바를 사용하는 표준 공간과 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>
다음 줄로 줄바꿈해서는 안 되는 구, 이름 또는 번호가 있는 경우 nbsp 문자 엔터티를 사용하세요. 자체 줄이나 단락에서 강조해야 하는 텍스트 블록이 있는 경우 emsp 문자 엔터티를 사용하십시오.
다음 표에는 다양한 크기의 공간에 사용할 수 있는 코드가 요약되어 있습니다.
이러한 코드는 각각의 공간 크기/유형에 대해 작동합니다. 브라우저 지원은 엔티티 이름에 대해 상당히 광범위하지만 그렇지 않은 것으로 판명되면 16진수 및 12진수 코드도 작동합니다.