Block level & Inline level

기본적으로 태그들은 크게 Block level 과 Inline level로 나뉜다.
쉽게 말하면 Block level은 크기가 어떻든 화면에 한 줄에 하나씩 보여지는 태그들을 말하고,
inline level은 자기 자신만의 크기만큼 화면에 보여진다.
태그들은 각각 둘 중 하나의 기본값을 갖지만, CSS의 display를 속성을 이용해서 변경 가능하다.

Block level element

Inline level element

Display 속성

display 속성은 크게

• block
• inline
• inline-block
  으로 나눠서 볼 수 있다.

block

✔️ display가 block일때, 각 요소들은 한 줄에 하나씩 위치하게 된다.
✔️ 안에 내용이 없더라도 width와 height를 정할 수 있다.

inline

✔️ display가 inline일때, 각 요소들은 자기 자신의 크기만큼 한 줄에 여러개가 들어가 위치하게 된다.
✔️ 안의 content를 입력해주지 않으면 화면에 보이지 않는다.
✔️ width와 height를 지정해 주어도 적용되지 않고 content의 크기만큼만 화면에 표시된다.

inline-block

✔️ display가 inline-block 일때, 안의 content가 없어도 width와 height를 지정한만큼 화면에 표시된다.
✔️ 한 줄에 여러개가 들어갈 수 있다.