CSS 디스플레이 속성 정리

HTML 요소들은 기본적으로 블록 또는 인라인 디스플레이 속성을 갖습니다. 크게 네 가지의 디스플레이 속성이 존재합니다.

• block
• inline
• inline-block
• none

block

디스플레이 속성 값이 블록(block)인 요소의 너비는 가로 전체에 해당하며, 새로운 라인에 표시됩니다.

대표적인 태그로는 <div>, <h>, <p>가 있으며, width, height, margin 등의 속성을 적용할 수 있습니다.

 

See the Pen display: block; by 11292021 (@11292021) on CodePen.

inline

디스플레이 속성 값이 인라인(inline)인 요소의 너비는 해당 요소의 내용에 해당하며, 새로운 라인에서 시작되지 않습니다.

대표적인 태그로는 <span>, <a>, <em>등이 있으며, 너비나 높이는 지정할 수 없습니다. 마진과 패딩의 경우에는 상하의 값은 무시되고 좌우의 값만 적용됩니다.

 

See the Pen display: inline; by 11292021 (@11292021) on CodePen.

inline-block

디스플레이 속성 값이 인라인블록(inline-block)인 경우 해당 요소는 인라인 요소처럼 기능하며, 요소 내부에서는 블록처럼 작동합니다.

배치는 inline 속성을 따라 되지만 block 요소에서처럼 너비와 높이, 마진과 패딩을 적용할 수 있습니다.

 

See the Pen display: inline-block; by 11292021 (@11292021) on CodePen.

none

디스플레이 속성에 none이 적용된 요소는 웹페이지에서 보이지 않는 동시에 레이아웃에서도 사라집니다.

디스플레이 속성 값은 태그에 따라 기본적으로 부여되지만 CSS를 통해 변경할 수도 있습니다. 다음은 block 요소에 none 속성을 적용하는 예시입니다.

 

See the Pen display: none; by 11292021 (@11292021) on CodePen.