layout - inline, inline-block, block

레이아웃(layout)이란 배치라는 뜻으로 제한된 웹 페이지에서 효과적으로 요소들을 배치하는 것이다.
여러 요소들을 배치를 하며 서로 이어지거나 떨어지게 만드는 기능을 가진
inline, inline-block, block을 알아보자.

inline 요소를 사용하면 단락의 흐름에 방해되지 않게 텍스트가 어울려진다.
inline의 대표적인 요소로 span, a 가 있다.

예)

<span>동해물과</span><span>백두산이</span>
<span>마르고</span><span>닳도록</span>

>> 동해물과백두산이 마르고닳도록

반대로 block 요소는 새로운 열을 만들며 내용을 입력한다.
그리고 요소의 크기

예)

<div>동해물과</div><div>백두산이</div>
<div>마르고</div><div>닳도록</div>

>> 동해물과
   백두산이
   마르고
   닳도록

block의 대표적인 요소로 div,p 등이 있다.

그런데 inline-block은 무엇이냐.
inline의 단락의 어울림과 block의 크기 지정 및 박스(ex: margin, padding...)의 크기를 지정할 수 있다.
inline-block의 대표적인 요소로 button, input 등이 있다.