HTML에서 공백 넣기
HTML에서 두 단어 사이에 공백을 다섯 칸 입력해도 브라우저는 한 칸만 보여 줘요. 연속된 공백, 탭, 개행은 모두 공백 하나로 합쳐져요. 공백을 더 넣으려면 줄바꿈 없는 공백 엔티티 를 한 칸마다 하나씩 쓰세요.
는 텍스트 한 줄 안에 공백 몇 칸을 넣을 때 좋아요. 더 큰 간격이나 요소 사이 간격에는 아래에서 설명하는 CSS를 쓰세요.
가 하는 일
는 줄바꿈 없는 공백(문자 U+00A0)이에요. 효과가 두 가지 있어요.
- 합쳐지지 않아요. 그래서 세 개를 쓰면 공백 세 칸이 돼요.
- 그 자리에서 줄이 바뀌지 않아요. 그래서 양쪽 단어가 붙어 있어요.
진짜 역할은 두 번째예요. 숫자와 단위, 이니셜, 두 줄로 나뉘면 어색한 짧은 구절을 로 이어요.
회색 상자에서는 "10"과 "km"가 다른 줄로 떨어져요. 초록색 상자에서는 떨어질 수 없어요. 더 긴 부분을 붙여 두려면 엔티티를 줄줄이 쓰는 것보다 span에 white-space: nowrap을 주는 게 쉬워요. 줄바꿈 페이지를 보세요.
너비가 다른 공백 엔티티
HTML에는 더 넓거나 좁은 공백을 위한 이름 있는 문자가 있어요. 이것들도 합쳐지지 않아서 텍스트 간격을 세밀하게 조절할 때 편해요.
| 엔티티 | 이름 | 너비 |
|---|---|---|
| 줄바꿈 없는 공백 | 일반 공백과 같음 |
  | En 공백 | 0.5em |
  | Em 공백 | 1em(글자 크기) |
  | 얇은 공백 | em의 일부, 글꼴에 따라 다름 |
  | 좁은 줄바꿈 없는 공백 | 얇고, 줄바꿈 없음 |
파란 하이라이트가 각 공백의 너비를 보여 줘요. 줄바꿈까지 막는 것은 와  뿐이에요.
모든 공백 유지하기: pre와 white-space
공백이 내용의 일부라면(코드, ASCII 아트, 정렬된 열, 시) 엔티티를 넣는 대신 공백을 전부 유지하세요. <pre> 요소는 기본적으로 그렇게 하고, CSS white-space 속성은 어떤 요소에서든 그렇게 해요.
white-space 값 | 공백 | 개행 | 긴 줄 줄바꿈 |
|---|---|---|---|
normal(기본값) | 합쳐짐 | 공백이 됨 | 예 |
nowrap | 합쳐짐 | 공백이 됨 | 아니요 |
pre | 유지 | 유지 | 아니요 |
pre-wrap | 유지 | 유지 | 예 |
pre-line | 합쳐짐 | 유지 | 예 |
사용자 텍스트에는 보통 pre-wrap이 알맞아요. 공백을 유지하면서도 좁은 화면에서는 줄을 바꿔요. pre는 줄을 그대로 두고, 대신 스크롤되거나 넘쳐요.
탭도 pre 안에서는 유지돼요. 기본 너비는 공백 8칸이고 tab-size 속성으로 바꿀 수 있어요(tab-size: 4).
CSS로 간격 주기
"여기에 공백이 필요해"라는 순간의 대부분은 사실 레이아웃이고, CSS가 엔티티보다 잘해요. 간격이 일정하게 유지되고 한 곳에서만 바꾸면 되니까요.
margin과 padding은 요소 사이 간격을, gap은 flex나 grid 컨테이너 안의 항목 간격을, letter-spacing과 word-spacing은 텍스트 자체의 간격을 줘요. 문단 첫 줄 들여쓰기는 text-indent를 쓰고, 텍스트 가운데 정렬 페이지에서 다뤄요.
인라인 요소 사이의 틈
공백이 합쳐지는 것의 이면도 있어요. 인라인 요소나 inline-block 요소 두 개 사이의 공백 문자는 여전히 공백 한 칸으로 계산돼요. 소스에서 두 버튼 사이에 개행이 있으면 버튼 사이에 작은 틈이 생겨요.
첫 번째 쌍은 소스의 개행 때문에 틈이 있어요. flex 컨테이너에서는 항목 사이의 공백 문자가 무시되니까 두 번째 쌍은 붙어 있어요. 간격을 정확히 조절하고 싶다면 flex와 gap을 쓰세요.
자주 하는 실수
- 레이아웃에
를 줄줄이 씀. 글꼴이나 화면 크기가 바뀌면 바로 깨져요.margin,padding,gap을 쓰세요. - 공백을 여러 칸 입력하고 보일 거라고 기대함. 합쳐져요.
나white-space: pre-wrap을 쓰세요. - 세미콜론 없이
 로 씀. 브라우저는 대개 받아 주지만 올바르지 않고 어떤 위치에서는 실패해요. 항상;로 끝내세요. - 줄바꿈을 막으려고
를 어디에나 씀. 줄바꿈 없는 긴 텍스트는 휴대폰에서 넘쳐요. 꼭 붙어 있어야 하는 것만 이으세요. - 공백으로 문단을 들여씀. CSS의
text-indent를 쓰세요.
자주 묻는 질문
HTML에서 공백은 어떻게 넣나요?
공백 한 칸은 입력한 그대로 동작하지만, 여분의 공백은 하나로 합쳐져요. 더 넣으려면 줄바꿈 없는 공백 엔티티 를 공백 한 칸마다 하나씩 쓰세요. a b처럼요. 레이아웃 간격에는 대신 CSS margin, padding, gap을 쓰세요.
HTML에서 는 무슨 뜻인가요?
는 줄바꿈 없는 공백(non-breaking space)이에요. 일반 공백처럼 보이지만 브라우저가 그 자리에서 줄을 바꾸지 않고 합치지도 않아서, 10 km 같은 단어를 붙여 두거나 공백을 더 넣을 때 써요.
HTML은 왜 제가 넣은 공백을 무시하나요?
HTML은 공백 문자를 합쳐요. 연속된 공백, 탭, 개행은 공백 하나로 표시되고, 줄 앞뒤의 공백은 제거돼요. 유지하려면 , <pre>, 또는 CSS white-space 속성을 쓰세요.
HTML에서 탭은 어떻게 넣나요?
HTML에는 서식을 유지하는 텍스트 밖에서 보이는 탭이 없어요. <pre>나 white-space: pre가 적용된 요소 안에서는 탭 문자가 유지되고, CSS tab-size 속성으로 너비를 정해요. 문단 들여쓰기에는 CSS의 text-indent나 padding-inline-start를 쓰세요.
와  는 무엇이 다른가요?
는 일반 공백과 너비가 같아요.  는 0.5em,  는 1em(글자 크기만큼) 너비예요.  와  도 합쳐지지 않지만, 와 달리 그 자리에서 줄이 바뀔 수는 있어요.
