[HTML]  (non-breaking space, 줄 바꿈 없는 공백)이란?

FE 개발을 하다 보면 JSX나 HTML에 명시적으로 공백을 표시해야 할 때가 있다. 텍스트 요소 길이가 너무 길 때 줄을 바꾸고 그곳에 nbsp를 쓰는 식이다. nbsp가 정확히 무엇을 의미하는지와 사용해야 하는 경우, 사용하면 안 되는 경우를 알아 보았다.

 

1. nbsp란?

 

nbsp는 사실 공백을 표시하는 데 쓰는 것이 아니다. 하지만 공백의 역할을 한다. nbsp를 쓰면 공백이 표시됨과 동시에 그 위치에서는 줄 바꿈이 일어나지 않아 그 이전 공백이나 이후 공백에서 줄 바꿈이 일어나게 한다.

 

그러니까 극단적으로 한 p 태그 안의 모든 공백을 nbsp로 대체해 표시하면, p 태그의 콘텐츠가 p 태그를 감싸고 있는 div의 오른쪽 바깥을 한 줄로 뚫고 나가게 된다.

 

줄 바꿈 없는 공백을 HTML이 인식할 수 있도록 표현하는 기호가 바로 nbsp이며, 다른 인코딩 환경에서는 다른 방식으로 나타낸다. HTML의 특수 문자 중 하나라고 생각하면 된다.

 

2. nbsp를 사용해야 하는 경우

 

1. 줄 바꿈 없는 공백을 추가하고 싶을 때.
2. HTML이 문장의 시작에 있는 복수의 공백을 무시하는 상황에서 공백을 추가하고 싶을 때

 

3. nbsp를 사용하지 말아야 하는 경우

 

1. 줄 바꿈에 영향을 미쳐서는 안되는 일반적인 공백을 추가하려고 할 때. (JSX의 경우 {' '}와 같이 표시하면 된다.)