1. 개요

- display 속성은 그 엘리먼트가 주변 엘리먼트와의 관계에서 어떻게 배치될지를 결정하는 속성이다. 대표적으로 block 속성과 inline 속성이 있는데, inline 속성은 ‘앞 엘리먼트와 같은 줄에 공간이 있다면 무조건 그 줄에 그 엘리먼트를 배치할 것’을 뜻하며 block 속성은 ‘앞 엘리먼트와 같은 줄에 공간이 있더라도 무조건 줄바꿈을 해 새로운 줄에 그 엘리먼트를 배치할 것’을 뜻한다.

- 태그의 종류마다 기본으로 설정돼있는 display 속성값이 다르다. 예를 들어 <div>, <p>, <ul>, <li>, <form>은 기본적으로 block으로 설정돼있다. <a>, <b>, <span>, <img>는 기본적으로 inline으로 설정돼있다.

2. block과 inline

- 태그 내부에 다른 태그를 포함하여 화면에 배치시킬 수 있는 태그는 기본 설정이 block인 태그들뿐이며, inline 태그들은 display 속성을 block으로 일부러 지정한다 하더라도 그 안에 다른 태그를 배치시킬 수는 없다.

- 내부에 텍스트를 쓸 수 있는 inline 태그(a, span 등)에는 padding-left, padding-right 속성을 쓸 수는 있으나 padding-top, padding-bottom, margin, width, height 속성을 쓸 수는 없다. 이 경우에는 display 속성을 block 또는 inline-block (줄바꿈이 되지 않는다는 것은 inline과 같으나 그 외 사항은 모두 block과 같은 속성) 으로 변경하면 사용할 수 있다.

3. none

- display 속성을 none으로 변경하면 그 엘리먼트를 화면에서 보이지 않게 할 수 있다. 이 경우, 그 엘리먼트가 그 자리에 아예 없는 것으로 여겨진다. (한편 visibility 속성을 hidden으로 설정하면 이와 유사하게 그 엘리먼트가 화면에서 보이지는 않으나, 이 경우에는 화면에 보이지 않을뿐 그 위치에 그 크기만큼 그 영역을 차지하는 상태는 여전하다는 점에서 display:none과 차이가 있다.)

4. 자식 엘리먼트들에게 영향을 줄 수 있는 속성들

1) flex

- block 엘리먼트의 display 속성을 flex로 변경하면 그 엘리먼트의 자식 엘리먼트들을 inline화 할 수 있다.

- flex 속성을 사용하면 추가로 flex-direction, flex-wrap, justify-content, align-items, align-content 같은 속성들을 사용할 수 있다.

2) table

- block 엘리먼트의 display 속성을 table로 변경 후 자식과 자손 엘리먼트들의 display 속성을 table-row 또는 table-cell로 변경하면 각 엘리먼트들을 table, tr 또는 td 태그처럼 작동하게 할 수 있다. 예를 들어, table로 변경한 엘리먼트에 table-layout:fixed를 추가한 후 그 엘리먼트의 자식 엘리먼트들의 display 속성을 table-cell로 변경하면 그 자식 엘리먼트들이 그 부모 엘리먼트의 폭 내에서 모두 동등한 너비를 갖게 된다.