[CSS] display

Intro

CSS의 display 속성에 대해 알아보도록 하자.

display

display 속성은 “HTML 요소(Element)들을 시각적으로 어떤 형식으로 보여줄지” 결정하는 속성이다. 모든 눈에 보이는 HTML 요소들은 display 속성을 기본으로 가지고 있다.

• display: inline; 은 텍스트처럼
• display: block; 은 쌓이는 상자처럼.

inline

inline 요소는 텍스트처럼 쭉- 가로로 배치가 된다. inline 요소들은 기본적으로는 옆으로 쭉 나열 되다가, 공간이 모자라면 다음 줄로 넘어간다.

inline 요소 : <span>, <a>, <img>, <strong>

block

block 요소는 “직사각형” 모양이다. 그래서 보통 박스라고 불린다.

• width는 옆으로 늘어날 수 있는 만큼 최대한(자기 부모 요소의 width 만큼),
• height는 내용물의 높이만큼

inline-block

nline-block 속성은 이름처럼, inline과 block의 특징을 모두 가지고 있다. inline처럼 텍스트 흐름대로 쭉 나열되고, block 처럼 박스 형태라 width, height로 크기 설정이 가능하다.

https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://studiomeal.com/archives/282