Inline vs. Block vs. Inline Block

저번시간에는 margin, padding에 대해 배웠고, 이번시간에는 display, 디스플레이에 대해 배우도록 하겠습니다
(다음시간에는 position, 포지션에 대해 배우겠습니다.)

 

 

디스플레이하는 방법 3가지, 1> block, 블록, 2> inline-block, 인라인-블록, 3> inline, 인라인에 대해 알아보겠습니다.

1> 먼저, block, 블록이 어떻게 생겼는지 살펴 보겠습니다.
박스 3개를 만든 후, 

 

 

상자들의 배경색은 빨간색, 폭은 200px, 높이도 200px로 값을 주도록 하겠습니다.

 

 

여기에 border는 두께는 2px, 실선, 검은색으로 값을 주겠습니다.

 

 

그럼 이제 block, 블록 형태를 확인할 수 있습니다.
즉, block, 블록이란 바로 옆에 아무 것도 없는 디스플레이 형태입니다.

 

 

검사(N)를 누르면, 첫 div를 누르면, 상단에 길게 큰 상자로 선택되는 것을 확인할 수 있습니다.
그 이유는 상단의 박스가 크기 때문에 이렇게 보이는 것이 아니라,
block, 블록형태의 디스플레이는 이 박스 외에는 다른 것이 옆에 있는 것을 허용하지 않기 때문입니다. 

옆에 위치하지 않는 이러한 디스플레이를 block, 블록이라고 부릅니다. 
즉, block, 블록은 옆에 나란히 상자, 박스를 두는 것이 아니라, 무엇이든 간에 하나씩 밑에 위치하게 합니다. 

다시 정리하면, block은 element의 크기와 상관없이, 옆에 다른 element가 위치하는 것을 허용하지 않습니다.

 

2> 이번에는 디스플레이를 inline-block, 인라인-블록으로 설정하면 어떻게 되는지 살펴 보도록 하겠습니다.

 

 

박스들이 나란히 옆으로 붙어 있는 것을 확인할 수 있습니다.
이것이 바로, inline-block, 인라인 블록과 block, 블록의 차이점입니다.

즉, 박스는 inline-block, 인라인-블록이나 block, 블록 중 하나의 형태로 디스플레이 됩니다.

다시 정리하면, inline-block, 인라인 블록은 박스들이 서로 서로 바로 옆에 위치한 형태를 말하고,
block, 블록은 박스들이 옆에 위치할 수 없을 때, 즉, 박스가 밑에 위치한 형태를 말합니다.

display, 디스플레이 inline-block, 인라인-블록을 지우면,

 

 

디폴트 값 설정에 따라 block, 블록 형태로 위치하는 것을 확인할 수 있습니다.

 

 

여기서, div의 디스플레이 디폴트 값은 block, 블록형태임을 알 수 있습니다.

3> block, 블록은 옆에 아무 것도 없는 것이고, inline-block, 인라인-블록은 바로 옆으로 나란히 위치하는 것이라면, inline,인라인은 어떠한 형태일까요?

디스플레이를 인라인으로 설정해 보도록 하겠습니다.

 

 

이처럼, inline, 인라인은 박스의 모든 property 설정값을 지웁니다.

그렇다면, div대신 span으로 바꾸고, 각 span 안에 숫자 1을 모두 입력한 후, style을 잠시 지워 보겠습니다.

 

 

그럼 페이지에서 1 1 1을 확인할 수 있습니다.

이번에는 스타일을 다시 적용해 보면, span에서 작성한 컨텐츠의 폭, 높이만큼의 스타일만 적용되고,
이전에 작성한 박스의 폭, 높이는 전혀 적용 되지 않는 것을 확인할 수 있습니다. 

 

 

이러한 이유는, inline, 인라인으로 디스플레이를 설정하면,
box는 더이상 박스가 아니고, 텍스트처럼 적용이 되기 때문입니다.
즉, inline, 인라인은 텍스트에서만 적용이 되고, 텍스트는 높이와 폭은 없고, 컨텐츠의 길이만 존재합니다. 

block, 블록은 박스의 폭, 높이가 존재하지만, 옆으로 어떤 element를 놓을 수 없었습니다.
반면, inline-block, 인라인-블록은 박스의 폭, 높이도 전재하고, 옆으로 나란히 놓을 수 있습니다.

 

 

따라서 inline-block, 인라인-블록을 쓰면, inline, 인라인과 같은 설정값에다가, 박스 형태를 동시에 유지할 수 있습니다. 

즉, inline, 인라인만 쓰면 박스가 사라지고,
block, 블록이라고 쓰면 밑으로 박스가 붙고,
inline-blcok, 인라인-블록이라고 쓰면, 옆으로 나란히 박스가 붙습니다.

마지막으로, 디스플레이 이론을 다시 정리하면,
inline, 인라인은 옆으로 나란히 붙는 형태이지만, 박스의 폭과 높이가 없고,
inline-block, 인라인-블록은 박스들이 옆으로 나란히 붙는 형태고,
block은 박스들이 밑으로 붙는 형태를 말합니다.