inline, inline-block, block
inline, inline-block, block 은 display 속성의 값이다.
태그마다 display 속성은 다르며 하나씩 설명을 하겠다.
block
블럭 태그
<div>, <header>, <article>, <section>, <aside>, <footer>, <h1>~<h6>, <ol>, <ul>, <p> 등등
화면의 width를 100% 사용하는 태그를 block element 라고 한다. 줄여서 블럭이라 부르겠다.
블럭은 width를 100% 사용하기 때문에 한 라인에 한가지 태그만 화면에 표시할 수 있고 다음 태그는
밑에 줄로 내려가서 표현되어 독립적인 라인을 가지게 된다.
inline
인라인 태그
<span>, <a>, <button>, <img>, <input>, <script>, <strong>, <textarea> 등등
inline element 는 콘텐츠의 크기만큼 width를 차지하기 때문에 한 라인에 여러 인라인 태그들이 들어 올 수 있다.
인라인도 블럭처럼 콘텐츠 크기를 조절할 수 있는데 <span> 태그의 경우는 불가능하다. 그래서 width, heigh, background-color 를 주어도 화면에는 표시 되지 않는다.
그래서 이를 해결할 display 속성값이 존재하는데 그것은 밑에 inline-block에서 설명할 것이다.
inline-block
위에서 말 했듯이 태그의 경우는 콘텐츠의 크기를 조절할 수 없기 때문에 어떠한 속성을 주더라도 화면에 표시가 되지 않는다. 그래서 display:inline-block 이라는 속성을 <span> 에게 주면 <span> 의 인라인의 특징인 콘텐츠 크기만큼 width를 가져가면서 콘텐츠 크기도 조절할 수 있게 된다.
<span> 에 width, heigh 를 줬는데 화면에 표시가 안된다면 inline-block 을 이용해서 문제를 간단하게 해결하면 될 것이다.
