HTML 공백(space)과 공백문자( )의 차이점과 사용방법

HTML에서는 공백(space)을 인식하되, 들어간 스페이스 수에 상관없이 1 칸으로 처리하여 보여준다. 행의 맨 앞에 있는 공백(space)는 무시되어 표시되지 않으므로, 행 맨앞에는 공백문자를 쓰야 한다.

공백문자 코드는   이고, 키보드의 스페이스 키 한 번을 친 것과 같이 한 칸을 띄운다. 여러 칸의 공백을 주려면, 원하는 만큼 공백문자를 연이어 붙여 쓰면 된다.    는 non-breaking space (줄바꿈을 하지 않는 공백)의 줄임말이다.


[공백 예 1]

0123
 01234
  01234

0123 0123
0123       0123

[실제 적용한 모습]

0123
01234
01234

0123 0123
0123 0123

첫 째줄, 둘 째줄, 셋 째줄을 비교하면, 행 맨앞의 스페이스는 모두 무시되어 없는 것과 마찬가지로 표시됨을 알 수 있다.
네 째줄과 다섯 째 줄을 비교하면, 문자 사이의 공백은 그 수에 상관없이 한 칸으로 인식하여 처리됨을 알 수 있다.


[공백 예 2]

01234
 01234
  01234
   01234
    01234
     01234

[실제 적용한 모습]

01234
 01234
  01234
   01234
    01234
     01234

공백문자는 위치에 상관없이 원하는 공백만큼 연이어 붙여 쓰면 된다


[공백 예 3]

01234
 01234
 01234

[실제 적용한 모습]

01234
 01234
01234

행 맨앞에 공백을 준 경우와 공백문자를 넣은 경우의 차이를 볼 수 있다. 세째줄의 맨 앞에 준 공백은 무시되어 표시되지 않음을 볼 수 있다.


[공백 예 4]

    01234
    01234
    01234

[실제 적용한 모습]

    01234
    01234
   01234

문자와 문자 사이의 공백(space)은 1칸으로 인식되므로, 공백문자를 4개 연이어 쓰는 것과 공백문자+공백+공백문자+공백 은 같은 결과가 된다 (첫째줄과 둘째줄 비교).
세번째 줄은 맨앞에 공백을 주었고, 행 맨 앞의 공백은 무시되므로 공백이 3개로 인식되어 처리되었다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...