[HTML][display속성] span 과 div의 차이

  <span> 태그와 <div>태그는 영억을 설정 할 때 사용되는 태그이다. 웹 페이지에서 레이아웃을 구성할 때 꼭 필요한 태그들이다. 이 두 태그의 차이는 display 속성이 다르다는 것이다. <span>태그의 display 속성은 inline 이고 <div> 태그의 display 속성은 block 이다. 그럼 display 속성에 대해 알아보자.

 

display 속성은 요소를 어떻게 보여줄지를 결정한다. 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다르다.

 

• none : 보이지 않음
• inline : 인라인 박스
• block : 블록 박스
• inline-block : block과 inline의 중간 형태

 

none

  요소를 렌더링하지 않도록 설정한다. visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않는다.

 

 

inline

  span 태그, b 태그, i 태그, a 태그 등이 이에 해당된다.

block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시된다. margin 과 padding의 left, right는 조절이 가능하지만 top 과 bottom 을 조절할 수 없다. 또한 line-hedignt를 원하는데로 적용 불가능 하다.

 

 

block

  div 태그, p 태그, h 태그, li 태그 등이 이에 해당된다.

기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보인다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락이다.

  width, height 속성을 지정 할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링된다. margin 과 padding의 top 과 bottom 을 조절할 수 있다. 또한 line-hedignt를 원하는데로 적용 가능하다.

 

 

inline-block

  Internet Explorer 7 이하에서는 사용할 수 없다.

block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있다. 제일 중요한 성질 자체는 inline과 비슷하다. 동일 라인에 여러 태그를 붙일 때 쓸 수 있다. 다만 위 inline의 단점들을 커버하는 것이 inline-block 이다. width, height 속성을 지정 할 수 있으며, margin 과 padding의 top 과 bottom 을 조절할 수 있다. 또한 line-hedignt를 원하는데로 적용 가능하다.

고려해야 할 점

- inline-block 끼리 공백이 생기게 되는데, 이때는 상위 div에 { font-size: 0; } 를 적용하면 해결된다.
- inline-block 끼리 높이가 안맞을시 상위 공백이 생기는데, 이때는 { vertical-align: ---; } 값으로 top 등을 줘서 맞춰주면 된다.