inline, block에 대해서

inline, block이란?

레이아웃을 제어하기 위해 CSS의 inline, block 속성에 대해서 잘 알아야 할 것 같다.
html에서 자주 쓰이면 요소들은 대부분 기본값으로 block 또는 inline을 가진다.

위에 있는 그림은 div태그와 span태그에 검은색 배경을 넣어 비교한 것이다.

div태그 같이 한 줄을 다 차지해서 옆(좌우측)에 다른 요소를 붙여넣을 수 없는 것을 block요소라고 한다.

반대로 span태그 같이 inline요소끼리 서로 한 줄에, 바로 옆에서 위치할 수 있는 것을 inline요소라고 한다.

block요소에 해당하는 태그들의 예(p, li, table, h1)
inline요소에 해당하는 태그들의 예(span, a, img)

css에서 display속성을 이용하면 block요소를 inline요소로 바꿀 수 있다.

<style>
div{
display: inline;
}
</style>