Block / Inline / Inline-block

엘리먼트의 유형에 따라 나뉘는 Block / Inline / Inline-block에 대해서 알아보겠습니다.

Block level elements

Block 표준 블록 엘리먼트에는 div 가 있으며, 그 밖에 p 와 form이 있습니다.
HTML5에서 새로 추가 된 header / footer / section 등이 있습니다.

Block의 특징에는 새 줄에서 시작해 좌우로 최대한 늘어난다는 점입니다.
이런 특징 때문에 다른태그가 인접할 수 없게 됩니다.
아래 그림을 통해 Block 레벨의 범위를 확인 할 수 있습니다.

Inline level elements

Inline 표준 블록 엘리먼트에는 span 이 있으며,
그 밖에 링크에 사용하는 a 엘리먼트가 있습니다.
Inline 엘리먼트는 단락안에서 해당 단락의 흐름을 방해하지 않은 채로
텍스트를 감쌀 수 있습니다.

아래 그림의 Inline 색범위를 보게되면 1번과 달리 text가 끝남과 동시에
진행이 멈추는 것을 볼 수 있습니다.

Inline-block level elements

Inline-block이란 block 엘리먼트 처럼 width와 height 값 등의 조정이 가능하면서
동시에 줄바꿈 없이 한 줄에 나란히 배치 될 수 있는 엘리먼트를 말합니다.
대표적으로는 button 이나 select 등이 있습니다.

Inline-block 레벨은 css상에서 block 레벨의 엘리먼트에게 속성을 부여해줄 수 있는데
display: inline-block; 와 같이 진행 해 주면 됩니다.

위에서 말했던 div 엘리먼트에 inline-block 속성을 부여해주면 아래와 같이 범위 조정이 가능하며,
한 줄에 나란히 사용할 수 있는 상태로 변경되게 됩니다.

그림-block/inline/inline-block 색으로 보는 범위차이
출처-https://velog.io/@tngusl5

-위 그림에 대한 코드 진행-
<style>
  .block{
  background-color:lightpink
  }
  .inline{
  background-color:lightblue
  }
  .IB{
  display:inline-block;
  background-color:lightgray;
  }
</style>

<div class="block">1. Block(div)</div>
<span class="inline">2. Inline(span)</span>
<div class="IB">3. Inline-block(div)</div>

끝!