HTML에 공백 넣는 방법

보통 공백은 스페이스바나 엔터키, 탭키를 눌러 추가할 수 있다. 하지만 코딩을 할 때는 이런 키를 눌러 공백을 추가할 수 없다. HTML에서는 단어 사이의 모든 공백을 공백 한 칸으로 취급한다. CSS를 사용하면 공백과 들여쓰기와 관련된 스타일을 세부적으로 손볼 수도 있지만 HTML에서는 따로 제공되는 도구를 사용해 공백을 조정해야 한다.

방법 1

방법 1 의 2:

공백 하나와 여러 개(탭) 넣는 법

PDF 다운로드

1
줄바꿈 없는 공백(nbsp) 넣기. HTML에서는 아무리 스페이스바를 많이 사용해도 공백 하나로만 표시가 된다. 강제로 공백을 넣고 싶다면 &nbsp나 &#160을 넣어보자(뒤에 세미콜론 ;을 꼭 넣어야 된다).^{[1]X출처 검색하기} 이 문자는 "줄바꿈 없는 공백(non-breaking space)"이라고 불리며 무조건 HTML에 하나의 공백으로 나타난다.
- 이 공백 문자가 줄바꿈 없는 공백으로 불리는 이유는 이 문자가 사용된 장소에서 줄바꿈이 사용되는 것을 방지하기 때문이다. 따라서 이 문자를 과도하게 사용하면 줄바꿈 문자를 넣어 깔끔한 문서를 작성하고 가독성을 높이는 것이 어려워질 수 있다.^{[2]X출처 검색하기}
2
다양한 크기의 공백 삽입하기. 브라우저가 공백을 표시하게 하는 다른 문자들에 대해 알아보도록 하자. 이 문자들은 사용하는 브라우저의 종류에 따라 다르게 표기될 수도 있으며 &nbsp와 다르게 줄바꿈에 영향을 미치지 않는다:^{[3]X출처 검색하기}^{[4]X출처 검색하기}
- &ensp — 인쇄기의 "N" 블록 이름을 따왔으며 공백 두 개 만큼의 자리를 차지한다.
- emsp; — 공백 네 개의 공간을 차지한다.
3
nbsp로 탭키를 사용한 공백 흉내내기. 문서 작성이나 코딩을 할 때는 탭키를 눌러 공백을 넣어 간격을 조정하곤 한다. HTML에서는 &nbsp&nbsp&nbsp(사이에 꼭 ;을 넣어줘야 한다)처럼 줄바꿈 없는 공백을 여러 번 넣어 이를 표현할 수 있다. 탭키를 사용했을 때 생기는 여러 개의 공백을 HTML로만 표현하려면 이 방법만을 사용해야 한다. 물론 CSS를 배웠다면 이 방법은 권장되지 않는다.
- 공백이 복잡하게 들어가는 문단을 작성하는 경우에는 아래에 설명해놓은 pre 태그를 사용하는 것이 좋다.
4
CSS를 사용해 문단 들여쓰기 하기. CSS의 패딩과 마진을 사용하면 브라우저에게 각각의 요소를 표시할 구체적인 방법을 지시할 수 있다. 즉, css를 사용하면 결과를 더 일관성 있게 만들 수 있다는 뜻이다. 이 방법은 CSS를 모르거나 스타일시트를 따로 만들지 않아도 가능하다. 아래의 문단 전체를 오른쪽으로 이동시키는 방법을 참고해보자:^{[5]X출처 검색하기}
- HTML 문서의 <head></head> 부분에 아래 코드를 넣어보자. <style>p.indent{ padding-left: 1.8em }</style>
  여기서 "p.indent"는 "indent"라는 이름의 문단(p 태그)을 정의한다(다른 이름을 사용해도 된다). 나머지 코드는 이 문단의 왼쪽에 공백의 일종인 "패딩"을 추가해준다.
- HTML의 바디 부분으로 돌아가도록 하자. 이제 문단에 들여쓰기를 하고 싶을 때 다음 코드를 써주기만 하면 된다:
  <p class="indent"></p>
- 들여쓰기의 너비를 조정하고 싶다면 CSS 코드의 "1.8" 수치를 변경하면 된다. 뒤에 "em"은 그대로 유지하도록 한다. em은 길이를 폰트 크기에 따라 조정한다는 뜻이다.^{[6]X출처 검색하기}
광고

방법 2

방법 2 의 2:

장문 포매팅하는 법

PDF 다운로드

1
미리 포맷된 문자열 사용하기. <pre></pre> 태그 안에서는 space와 ↵ Enter키를 이용한 공백이 쓴 그대로 들어가게 된다. 이 태그 안에서 직접 공백을 조정하면서 코딩 예시, 시, 문자열 등을 넣어보도록 하자.^{[7]X출처 검색하기}
- 이 태그의 단점으로는 너비를 꼽을 수 있다. 이 태그를 사용하게 되면 일반 HTML과 달리 창 크기를 조정해도 그에 따라 크기가 바뀌지 않는다.^{[8]X출처 검색하기}
<br> 태그를 문장 끝에 넣어보도록 하자. 이 방법을 사용해 여러 개의 br 태그를 넣어 줄을 여러 번 바꿀 수 있다. HTML 초보자들에게는 이 방법이 쉽고 간단하지만 사실 CSS를 배우고 나면 br 태그를 사용한 강제 HTML 스타일링은 권장되지 않는다.
<p></p> 태그 사이에 넣은 문자열은 문단으로 정의가 된다. 대부분의 브라우저는 이 문단 위아래로 줄바꿈을 넣어 분리시킨다. 하지만 이 방법을 사용하면 스타일을 세밀하게 조정하기 힘들 수 있다.^{[9]X출처 검색하기}
광고

팁

공백 주변에 이상한 문자들이 돌아다니는 것이 보인다면 다시 한 번 코드를 보도록 한다. <br>로 써야 할 것을 <br로 썼을 수도 있다.
CSS는 더 강력하며 더 예측 가능하게 페이지를 만들어준다. 공백도 CSS를 사용하면 더 세부적으로 조정이 가능하다.
태그 시작과 끝부분에는 공백을 넣지 않는 것이 좋다. 공백 <a>설명</a>처럼 쓰도록 하고 공백<a> 설명 </a>.처럼 쓰는 것을 피하라는 뜻이다.^{[10]X출처 검색하기}
줄바꿈 없는 공백 ( )는 캐릭터 엔티티의 대표적인 예시다. 캐릭터 엔티티는 키보드에서 바로 입력하지 못하는 특수문자를 입력하게 해준다.

경고

Tab ↹키에 대응하는 HTML 문자는 (	)이지만 이를 사용해도 생각한 것처럼 작동하지 않는다. 일반 HTML 문서는 탭키를 지원하지 않기 때문에 이 문자를 직접 입력해도 아무런 효과가 나타나지 않을 것이다.
HTML을 일반 텍스트 파일이나 코드 에디터로만 작성하도록 하자. 워드 프로세서 파일 포맷으로 HTML을 짜면 웹브라우저에서 공백이 이상한 문자로 바뀌어 나타나게 된다. 이는 워드 프로세서 프로그램에서 인터넷 문서를 지원하지 않아 추가적인 데이터를 공백에 같이 저장하기 때문에 발생하는 현상이다.