[HTML] 공백 문자 삽입하기 3가지 방법(띄어 쓰기)

안녕하세요! 오늘은 HTML에서 공백 문자를 삽입하는 방법에 대해 알아보려고 합니다. 웹 페이지를 제작하면서 텍스트 사이에 공백을 삽입하거나, 여러 칸을 띄워야 할 때가 있습니다. 그런데, HTML에서는 일반적인 공백 문자(' ')를 여러 개 사용해도 하나의 공백만 인식됩니다. 그래서 HTML에서는 공백 문자 삽입을 위해 특별한 방법을 사용해야 합니다. 그럼 이에 대해 알아보도록 하겠습니다.

 

 

1.   사용하기

반응형

HTML에서 공백 문자를 삽입하는 가장 간단한 방법은  를 사용하는 것입니다.  는 non-breaking space의 약자로, 한 칸의 공백을 삽입하는 데 사용됩니다.

 

html

<p>안녕하세요.&nbsp;&nbsp;오늘은&nbsp;좋은&nbsp;날씨네요.</p>

위 코드를 실행하면 "안녕하세요.  오늘은 좋은 날씨네요." 라는 문장이 출력됩니다. "  " 부분은 두 칸의 공백으로, " " 부분은 한 칸의 공백으로 표시됩니다.

 

2.   와   사용하기

 와  는 각각 en space와 em space를 나타내며, 더 넓은 공백을 만드는 데 사용됩니다.  는 한 칸 보다 약간 넓은 공백을,  는 네 칸의 공백을 만듭니다.

html

<p>안녕하세요.&ensp;오늘은&emsp;좋은&ensp;날씨네요.</p>

위 코드를 실행하면 "안녕하세요. 오늘은    좋은 날씨네요." 라는 문장이 출력됩니다. " " 부분은 한 칸 보다 약간 넓은 공백으로, " " 부분은 네 칸의 공백으로 표시됩니다.

 

3. ' ' 그냥 스페이스 사용하기

처음 말씀드린 것 처럼 html에서는 앞에 문자가 있을 때 그냥 스페이스바로 입력한 공백이 한개가 들어갑니다. 두칸이상 또는 특수한 경우에는 위의 1, 2번 방법으로 공백을 추가하시면 되고 하나는 그냥 스페이스바 한번 입력하면 됩니다.

이렇게 HTML에서 공백 문자를 삽입하는 방법에 대해 알아보았습니다. 이 기능은 텍스트의 가독성을 높이거나 레이아웃을 조정하는 데 유용하게 사용될 수 있습니다. 다음 글에서 또 다른 유용한 정보를 공유하도록 하겠습니다. 감사합니다!