CSS의 display 속성에 대해 알아보도록 하자.
display 속성은 “HTML 요소(Element)들을 시각적으로 어떤 형식으로 보여줄지” 결정하는 속성이다. 모든 눈에 보이는 HTML 요소들은 display 속성을 기본으로 가지고 있다.
inline 요소는 텍스트처럼 쭉- 가로로 배치가 된다. inline 요소들은 기본적으로는 옆으로 쭉 나열 되다가, 공간이 모자라면 다음 줄로 넘어간다.
inline 요소 : <span>
, <a>
, <img>
, <strong>
block 요소는 “직사각형” 모양이다. 그래서 보통 박스라고 불린다.
nline-block 속성은 이름처럼, inline과 block의 특징을 모두 가지고 있다. inline처럼 텍스트 흐름대로 쭉 나열되고, block 처럼 박스 형태라 width, height로 크기 설정이 가능하다.
https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://studiomeal.com/archives/282