display 프로퍼티는 어떤 요소의 렌더링 박스의 타입을 정해주는 속성이다.

내부 및 외부 디스플레이 유형

디스플레이 유형은 내부와 외부로 나뉜다.

• 외부 디스플레이 유형은 해당 요소의 박스가 외부의 다른 박스들과 어떻게 상호작용하는지를 정의하며 block,inline,inline-block 속성을 가질 수 있다.
• 내부 디스플레이 유형은 해당 요소의 박스 내부에 자식 요소들이 어떻게 배치되는지를 정의한다.
• 내부 디스플레이 유형을 아무것도 설정하지 않았을 때 요소 내부의 자식들은 기본적으로 normal flow^1를 따라 배치된다.
• display: flex;로 설정시 해당 요소의 외부 디스플레이 유형은 block이지만 내부 디스플레이 유형은 flex로 설정된다.

Block / Inline / Inline-Block

CSS에는 크게 두 가지 외부 디스플레이 박스 유형이 있다.

• 블록 박스
• 인라인 박스
• 인라인 블록

요소의 박스 유형에 따라 요소들의 페이지 배열 또는 다른 박스와의 작동 방식이 달라진다.

블록 박스 유형

동작 방식

요소의 박스가 block으로 정의되면 다음과 같은 방식으로 동작한다.
1. 박스의 너비가 라인 방향으로 연장되어서 요소의 상위 콘테이너에서 사용 가능한 공간을 채운다. 즉 요소의 width=100%로 설정된다.
2. 박스가 생성될때 새로운 라인으로 행갈이를 한다.
3. 블록 유형은 width와 height를 가질 수 있다.
4. 패딩, 마진, 테두리 속성의 설정으로 다른 요소들이 박스에서 밀려난다.

기본적으로 블록 박스 유형을 갖는 태그들

• 헤딩 요소들 (h1~h6)
• 단락 요소 <p>
• 기본 컨테이너 <div>
• 이외에 많은 요소들 (<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd> <dl>, <hr>, <header>, <form> <table>, <pre>, <ul>, <p>, <ol>, <video>)이 기본적으로 블록 박스 유형을 갖는다.

인라인 박스 유형

동작 방식

요소가 인라인 박스 유형을 갖도록 정의되면 다음과 같은 방식으로 동작한다.

• 박스가 새 줄로 행갈이를 하지 않는다.
• width, height 속성이 적용되지 않는다.
• 패딩, 마진, 테두리 속성은 다른 인라인 박스들이 해당 요소에서 멀어지게 하지 못 한다.

기본적으로 인라인 박스 유형을 갖는 태그들

• <a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>

인라인 블록 박스 유형

동작 방식

요소가 display: inline-block을 갖는 경우 인라인 요소와 블록 요소 중간의 방식으로 동작한다.

• 인라인 요소와 마찬가지로 인라인 블록 유형도 새 줄로 행갈이 하지 않는다.
• 블록 요소와 마찬가지로 width와 height를 적용시킬 수 있다. (높이, 너비를 적용하지 않을 시 인라인 요소와 마찬가지로 컨텐츠 만큼만 영역이 잡힌다.)
• 블록 요소와 마찬가지로 패딩과 마진 및 테두리 속성이 다른 요소들을 밀어낸다.