<div>와 <span>의 차이는 직접 사용해 보면 확연히 드러난다.
| <div>바보</div> <div>똥개</div> <div>멍청이</div> |
<span>바보</span> <span>똥개</span> <span>멍청이</span> |
위와 같이 작성하였을 때 실제로는 각각 다음과 같이 보인다.
| 바보 똥개 멍청이 |
바보똥개멍청이 |
단순하게 말하면
줄바꿈이 일어나느냐 일어나지 않느냐의 차이
이다.
좀 더 자세하게 말하자면 <div></div>는 전체 너비, <span></span>은 그 글자만큼의 너비를 가진다고 보면 되겠다. 다음 예시를 보자.
<div align="center">나는 바보다</div>는 이렇게 보인다.
[ 나는 바보다 ]
하지만 <span align="center">나는 바보다</span>는 어떨까?
[나는 바보다]
* []는 영역을 표시하기 위한 것으로 실제로는 출력되지 않음.
아무런 효과가 없는 것이 아니다. 스팬의 영역이 바로 [나는 바보다] 자체 뿐이기 때문에 가운데 정렬을 하든 오른쪽 정렬을 하든 똑같이 보이는 것 뿐이다. 뭐 결론적으로는 효과가 없다고 해도 상관은 없겠다.