본문 바로가기

IT

[HTML] div와 span

 <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>는 어떨까?

[나는 바보다] 

 * []는 영역을 표시하기 위한 것으로 실제로는 출력되지 않음.

 아무런 효과가 없는 것이 아니다. 스팬의 영역이 바로 [나는 바보다] 자체 뿐이기 때문에 가운데 정렬을 하든 오른쪽 정렬을 하든 똑같이 보이는 것 뿐이다. 뭐 결론적으로는 효과가 없다고 해도 상관은 없겠다.