[html] 공백과  의 차이

배경

html에서 같은 공백인데도 ' '면 줄바꿈이 되지만  면 자리만 차지하고 줄바꿈이 되지 않는 것을 확인했다.

 

 

공백과  의 차이점

 

• 공백 병합(Collapsing):
  • 일반 공백: HTML에서 여러 개의 연속된 일반 공백 문자는 하나의 공백으로 처리되거나 "병합"됩니다. 즉, 코드 상에서 여러 개의 공백을 넣더라도 화면상에서는 하나의 공백으로만 보입니다.
  •  : 반면,  는 non-breaking space로, 여러 개를 연속해서 사용하더라도 각각이 병합되지 않고 모두 화면상에 표시됩니다. 이를 통해 여러 개의 공백을 화면상에 나타낼 수 있습니다.
• 줄 바꿈(Word Wrap):
  • 일반 공백: 단어 사이에 있는 일반 공백은 줄 바꿈 지점으로 사용될 수 있습니다. 즉, 화면 폭이 좁아져 단어가 분리될 필요가 있을 때, 일반 공백을 기준으로 줄이 바뀔 수 있습니다.
  •  :  로 연결된 단어나 문자는 줄 바꿈이 일어나지 않습니다. 이것은 "non-breaking" 속성 때문으로,  는 단어나 문자들을 함께 묶어서 줄 바꿈을 방지합니다. 이는 특정 단어나 구문이 분리되지 않고 항상 같은 줄에 나타나게 하고 싶을 때 유용합니다.