inline, inline-block, block에 대해서..
1. inline
inline 속성의 기본적인 특징은 새로운 수직 라인을 생성하지 않고 오직 입력한 정보에 필요한 만큼의 width 공간만 차지합니다.
여러가지 inline html 태그들이 있지만 흔히 쓰는 것으로는 span, a, input, img 가 inline 속성을가진 태그입니다.
inline 속성의 태그의 경우 css를 통해 width와 height 값을 지정해도 변하지 않고, margin과 padding 는 x-axis 만 적용이 되고 y-axis 는 적용이 되지 않습니다.
2. inline-block
inline-block은 이름대로 inline과 block이 합쳐진 느낌입니다. inline과 같이 줄의 변화 없이 같은줄에 등장하지만, inline 에서 변화를 줄수 없던 width와 height 이나 margin, padding의 y-axis 값 적용이 가능합니다.
3. block
block 속성의 경우 기본적으로 앞뒤 다른 요소를 밀어내고 자신이 혼자 가로 줄을 차지합니다. block 기본속성의 태그로는 <div> 가 있습니다. 자신이 한 줄의 자리를 차지하는 만큼 inline과 다르게 기본적으로 width height 값을 지정받는대로 변화하며, margin과 padding의 값 지정도 가능합니다.
^ 위 사진에서 Aliquam 과 venenatis 는 html에서 <span> 태그이며 inline, inline-block, block 순으로 div 텍스트 내에서 어떻게 적용되는지 보여줍니다.
