BLOCK vs INLINE

BLOCK vs INLINE

• block level 요소 (Flow Contents : HTML5)

• inline 요소 (Phrasing Contents : HTML5)

블록(BLOCK) 박스

• 블록 박스는 다른 블록 박스에 포함되거나, 포함할 수 있고, 너비(width)/ 높이(height) 설정이 가능하다. 내부에 콘텐츠를 포함하지 않을 경우 높이는 0이다.

• 컨텐츠의 남은 여백까지 박스로 채워진다. 그래서 글자의 정렬(왼쪽, 가운데, 오른쪽)을 설정할 수 있다 (공간이 있기 때문이다.)

block 요소

• 기본적으로 width 값이 auto로 적용되어 자신을 포함하는 부모 영역의 너비만큼 늘어난다. 그러므로 마크업 상 나중에 작성된 다음 형제 요소는 해당 요소의 아래에 위치한다.

인라인(INLINE) 박스

• 인라인 박스는 인라인 박스에 포함되거나, 포함할 수 있지만, 블록 요소는 포함할 수 없다.(컨텐츠의 라인까지만 박스가 채워진다.)

• 너비(width)/ 높이(heght) 설정이 가능하지 않다. 내부에 포함한 콘텐츠만 높이와 너비를 가지게 된다.

inline 요소

• 자신이 포함하는 콘텐츠(예: 텍스트) 만큼만 너비를 가질 수 있다. 사용자가 임의로 width 속성을 부여해도 반영되지 않는다. 그러므로 마크업 상 다음 형제 요소는 기본 흐름 상에서 오른쪽 옆에 붙는다.

인라인(INLINE BLOCK) 블록 박스

• 인라인 블록 박스는 기본적으로 인라인처럼 화면에 렌더링되지만, 블록박스처럼 너비(width)/ 높이(heght) 설정이 가능하다. (<img>, <input>, <button> 등)

• 인라인 박스는 좌/우 방향으로 마진, 패딩 공간을 설정할 수 있으나, 상/하 방향으로는 공간이 설정되지 않는다.

• 패딩으로 공간을 설정하면 패딩이 적용된 것 처럼 보이나 패딩으로 인한 공간이 벌어지지 않는다.

inline block 요소

• 기본적으로 자신이 포함하는 콘텐츠 만큼만 너비를 가지지만 (inline 요소처럼) 사용자가 임의로 width 속성을 부여해 너비를 설정할 수 있다. 이 점이 inline 요소와의 차이점이다.

• 예를 들어 나란히 배치해야 하는 상황에서 각 요소에 width 속성을 적용해야 하는 상황이라고 생각해보자.

• 수평 내비게이션을 스타일링 할때, a 요소만 나열해도 수평 배치 되지만, width 속성은 적용되지 않는다. a 요소는 기본적으로 inline 이기 때문이다. 하지만 a 요소에 inline-block을 설정하면 block 설정과 달리 수평 배치를 유지한 상태에서 width 속성을 부여해 동일한 너비만큼 아이템들을 설정할 수 있다.

box {
  display: inline;
  display: block;
  display: inline-block;
}

block 요소들

공부 할 때 각 요소를 선택해서 display 값을 확인하면 된다.

[block 요소들]
  - address
  - article
  - aside
  - audio
  - blockquote
  - canvas
  - dd
  - **div**
  - dl
  - fieldset
  - figcaption
  - figure
  - footer
  - form
  - h1~6
  - header
  - hr
  - noscript
  - ol
  - output
  - p
  - pre
  - section
  - ㅇㅇtable
  - tfoot
  - ul
  - video