Div vs Span
1) 둘의 차이 : 정말 간단하고, 명료한 둘의 차이는 전자는 block 요소에 해당하는 태그이고, 후자는 inline 요소에 해당하는 태그이다. 간단하게 block vs inline에 대해 설명해보면,
block 요소 vs inline 요소 + inline-block 요소1) 블록 요소 :
- 새로운 줄에서 시작하고, 다음 요소를 쌓을 때 자동으로 줄바꿈이 일어난다. 이는 블록요소 자체가 전체 넓이 100%를 디폴트로 차지하는 것과 같은 맥락에서 이해할 수 있다.
- 가로, 세로(width, height) 길이를 조절할 수 있고, 상하좌우 margin 그리고 상하좌우 padding 모두 적용가능하다.
- 영역이 잡히는 범위가 box 단위이다. 이건 inline 태그와의 비교로 더욱 이해가 쉬워지는데, 인라인태그는 콘텐츠의 내용의 길이에 따라 범위가 잡혀서 예를 들어, inline 태그 안에 콘텐츠가 전체 넓이의 3/4에서 문장단위로 끊겨서 줄넘김이 일어난다면 그 줄넘김이 일어나는 시점까지를 범위로 잡는데, 이와 반대로, block요소는 콘텐츠의 영역과 상관없이 box 단위로 영역을 잡는다.
- 디폴트로 margin-top, margin-bottom이 잡혀있음
- 블록 요소와 달리 새로운 줄에서 시작하지 않으며, 콘텐츠의 영역만큼만 차지한다. 그래서 다른 요소에 새로운 인라인 요소를 쌓으면 무조건 줄바꿈이 일어나지는 않는다(블록요소처럼).
- 상하 margin 값을 줄 수 없고(좌우는 가능), 상하좌우 padding 값은 줄 수 있다. 추가적으로 width와 heigt를 줄 수 없다.
- 위에서 말한 것처럼 영역자체가 콘텐츠를 중심으로 잡히기 때문에 box 단위의 블록요소와 달리 콘텐츠가 끝나는 시점까지가 영역으로 잡힌다.
- inline 요소 안에 inline 요소를 넣을 수 있지만, inline 요소 안에 block요소를 넣으면 안됨. 실제로 span 태그안에 div 태그를 넣어보면 에러는 나지 않지만, span 태그의 실질적인 의미가 없어짐. 개발자 도구로 보면, span 태그 자체가 영역을 차지하고 있지 않음.
- 인라인 요소의 특징인 자동으로 줄바꿈이 일어나지 않고, 콘텐츠의 영역만큼 차지하여 옆으로도 쌓을 수 있는 특징을 지키면서, 인라인 요소의 한계인 width, height 및 상하 margin 값을 적용할 수 없는 부분을 보완한다(가능하게 한다).
- 대표적인 inline-block 태그로는 img, input, button 태그 등이 있다.
- span 태그도 inline-block 태그처럼 사용할 수 있는데, display 세팅을 inline-block으로 주면 된다. 그러면, span태그도 인라인 블록 요소의 특성을 똑같이 이용할 수 있게 된다(span은 원래 inline태그)
Div vs Span
- 둘 다 그 자체로는 아무 의미가 없는 태그이다. 구획을 나누는 태그들이기 때문에 그 자체로는 렌더링상으로 아무런 것도 보이지 않는다. 추가적으로 시맨틱 태그들과 비교해서도, 즉, 의미론적으로도 아무 의미가 없는 단순 레이아웃을 위한 태그들이다.
- div 태그는 블록 요소이기 때문에 자동으로 줄바꿈이 일어나며, 전체 넓이를 100% 차지하는 것이 디폴트이다.
- 이와 달리 span태그는 span태그 내의 다른 엘리멘트 혹은 콘텐츠가 차지하는 영역만큼만 차지하며, 따라서 자동으로 줄바꿈이 일어나지 않는다.
- block vs inline요소의 특징과 똑같은데 div태그는 상하좌우 마진값과 패딩값 그리고 width, height 조절이 가능하지만, span태그는 좌우 마진값, 상하좌우 패딩값만 조절이 가능하며 나머지는 조절이 불가능하다(그래서 inline-block 속성을 이용하기도 한다.).
- 본래 table 태그를 사용해서 레이아웃을 구성하던 예전과 달리 요즘은, div, span을 이용해서 레이아웃을 구성한다(시맨틱 웹을 지향하는 추세이긴 하지만).
완벽함 보다는 최선의 결과를 위해 끊임없이 노력하는 개발자