HTML에서  를 언제, 왜 써야할까?

웹 개발을 하실 때 HTML에서 뛰어쓰기를 위해서  를 사용하시는 분을 종종 보게 되는데요. 이렇게 무분별하게  를 사용하면 큰 낭패를 볼 수 있다는 사실을 알고 계시나요?

이번 포스팅에서는 사실 공백 문자랑은 완전히 용도가 다른  에 대해서 한번 알아보도록 하겠습니다.

줄바꿈을 일으키는 공백

일반적으로 웹에서는 텍스트가 너무 길어서 요소 내에 주어진 가로 폭을 넘어갈 때는 자동으로 줄바꿈이 일어나는데요. 예를 들어 너비가 250px인 <div> 요소 안에 긴 문장을 넣으면 다음과 같이 알아서 적당한 위치에서 줄바꿈이 일어나는 것을 볼 수 있습니다.

웹페이지에서 줄바꿈이 발생한 지점을 자세히 살펴보시면 HTML 코드에서 띄어쓰기가 어디서 되고 있는지가 상당히 중요하는 것을 알 수 있는데요. 기본적으로 스페이스(space) 문자와 같이 공백이 있는 곳에서 다음 단어가 들어갈 공간이 부족하면 줄바꿈이 일어난다는 것을 알 수 있습니다.

줄바꿈이 일으키지 않는 공백

 는 “Non-breaking Space”를 의미하는 HTML entity 인데요. 한국말로 번역을 해보자면 “줄바꿈이 일으키지 않는 공백” 정도가 되겠죠?

이 말은즉슨  를 사용하면 띄어쓰기는 되지만 자동으로 줄바꿈은 되지 않는다는 건데요. 위의 예제 코드에서 스페이스(space) 문자를 한번 모두  로 대체해보겠습니다.

어떤가요? 텍스트가 줄바꿈이 전혀 되지 않고 요소 밖으로 삐져나오죠? 이것이 바로  가 필요한 진정한 이유입니다!

즉, 줄바꿈을 일으키지 않으면서 공백을 넣고 싶을 때  를 사용합니다.

사실 CSS의 white-space 속성을 nowrap으로 주면 굳이 많은  를 사용하지 않고도 좀 더 쉽게 줄바꿈을 방지할 수 있습니다. 이 부분에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다.

언제 써야할까?

그러면  가 실질적으로 언제 웹 개발에 도움이 되는지 살펴볼까요?

아래 두 개의 텍스트를 비교해보면 첫 번째는 pm 앞에 일반 스페이스 문자를 사용하고, 두 번째는  를 사용하고 있습니다. 따라서 첫 번째 경우는 pm 앞에서 줄바꿈이 일어나고, 두 번째 경우에는 2:50 pm이 하나의 단어처럼 취급뒤어 그 앞에서 줄바꿈이 일어납니다.

첫 번째 경우처럼 줄바꿈이 일어나면 한국인 입장에서는 큰 문제가 없어보이지만 영어 사용자 입장에서는 어색하게 느껴질 수 있다고 합니다. 영미권에서는 숫자와 단위를 띄어쓰더라도 일반적으로 그 사이에서 줄바꿈을 하지 않는 것이 관례이기 때문입니다.

뿐만 아니라  는 2개 이상의 공백을 연속으로 넣고 싶을 때도 유용한데요. 왜냐하면 웹에서는 기본적으로 단어 사이에 공백 문자들을 아무리 연속해서 많이 사용하더라도 그냥 하나의 띄어쓰기로 처리되거나, 심지어 공백 문자가 HTML 요소 내에서 맨 앞이나 맨 뒤에 나오면 아예 무시가 되기 때문입니다.

하지만 이러한 HTML 요소 내의 공백 처리 방식은 CSS의 white-space 속성을 이용하여 얼마든지 바꿀 수 있습니다. 이 부분에 대해서는 관련 포스팅을 참고 바랍니다.

예를 들어, 웹페이지에 들여쓰기가 된 자바스크립트 코드를 넣을 때 스페이스 기호나 탭 기호 대신에 다음과 같이  를 사용하면 적절히 들여쓰기 효과를 낼 수 있습니다.

한국어에서는?

지금까지 일부로 영어로 된 예제만을 다루었는데요. 사실 한국어로 된 웹페이지에서는  의 의미가 반감이 되는 경향이 있습니다.

왜냐하면 웹에서 한국어는 영어와 달리 요소의 가로 너비가 모자르면 단어 중간에서도 자동으로 줄바꿈이 일어나기 때문입니다.

예를 들어, 다음 두 개의 텍스트가 담긴 요소를 비교해보면 스페이스 문자를 사용하든  를 사용하든 큰 차이가 없다는 것을 알 수 있습니다.

개인적으로 이것이 한국인 웹개발자 사이에서 특히  가 좀 더 빈번하게 납용 또는 오용되는 이유이지 않을까 생각하고 있습니다. 🤔

마치면서

지금까지 HTML에서  가 왜 필요하고 언제 사용해야 되는지에 대해서 알아보았습니다.

본 포스팅을 통해서 HTML 문서 안에 스페이스 키를 눌러 공백 문자를 입력하는 것과  를 입력하는 것이 겉으로는 같게 보일지 몰라도 엄연히 다르다는 것을 꼭 기억하셨으면 좋겠습니다. 특히 다국어를 지원하는 웹사이트에서는 공백 문자를 사용할 상황에서   사용하면 예상치 못했던 큰 부작용을 겪을 수도 있으니 각별한 주의가 필요하고요.