인라인, 인라인-블록, 블록 이 3가지 요소는 HTML을 다룰 때 꼭 알아야 자신이 생각한 대로 요소들을 배치할 수 있습니다.

우선은 이 요소들이 각각 어떤 의미를 지니는 지 알아보겠습니다.

많은 내용은 이 분의 블로그를 참고 했습니다.

inline

inline: 한 요소가 한 줄에 배치 (다음 연속된 요소가 같이 붙어 나온다)

위 설명대로 inline 요소는 한 줄에 여러 요소가 들어갈 수 있는 속성입니다. 용어대로 한 라인(line) 안에(in) 다 들어갈 수 있습니다. (정확한 어원은 아닙니다)

대표적인 inline 요소의 태그들은 span, a, input 등이 있습니다.

❗️또한 이 요소들은 width와 height 속성을 지정해도 적용이 되지 않습니다. 그 이유는 면 해당 태그가 차지하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다.
더욱이 margin padding의 경우에 상하 간격은 부여를 할 수 없습니다.

block

block: 한 요소가 한 줄의 공간을 다 차지

block은 한 요소가 한 줄의 공간을 다 차지합니다. 예를 들어 한 줄에 '.' 한글자만 있더라도 그요소가 div안에 들어있다면 한 줄을 차지하여(div는 대표적인 block요소) 다음 요소는 . 다음 줄에 나타납니다.
대표적으로 div, p, h1등의 태그가 있습니다.

inline-block

inline-block: 한 줄에 여러 요소가 들어갈 수 있지만 block 요소 처럼 width , height / margin padding 의 상하 간격 지정 가능

위 설명 그대로 inline 성격을 가지지만 block의 성격을 같이 가지고 있어 특별히
width , height / margin padding 의 상하 간격 지정이 가능합니다.
대표적인 태그는 button, select 등이 있습니다.

각 요소별 대표 태그

inline : a / i / img /label /span
block : aside / header / footer / form / li / ol / ul / p
inline-block: button / select

필요성 느낀 사건(?)

기존에는 각각 요소에 대해서 정확히 알고 있어야 한다고 생각은 하고 있었지만 크게 의식을 하고 있지는 않았습니다.

다만 실제 화면을 구성하는 과정에서 한 요소가 아무리 margin을 부여해도 조정이 되지 않았습니다.

'weegle 제공 서비스' 뒤에 있는 'English' 링크가 여러 속성을 조정해도 평행하게 배치가 되지 않았습니다.
그래서 여러가지 시도를 하던 중

a링크 앞에 div링크가 있는 것을 발견했습니다. div링크는 블록 성격을 가지기 때문에 이 것을 조정하려면 div의 css속성을 inline으로 바꿔주거나 div 대신에 inline요소를 쓰면 되는 것입니다.

저 같은 경우 div가 특별히 필요한 상황은 아니라 div를 제거해주자 위치가 제대로 자리잡았습니다.

물론 이 같은 경우는 기존에 적어놓은 div를 지우지 않아서 발생한 문제지만 이 문제가 발생한 것도 속성에 대해서 익숙치 않아서 발생했습니다.

CSS뿐만 아니라 뼈대가 되는 HTML에도 조금 더 신경을 써야한다고 느끼게 해주는 사건이었습니다