[CSS] display 속성 정리

display: inline-block

---

img태그

◻️ 너비: 너비가 설정되어 있지 않다면 최소한으로 줄어든다
◻️ 높이: 높이가 설정되어 있지 않다면 최소한으로 줄어든다
🎯 목적: 글자화
✒️ 라인: 한 줄에 최대한 많이
📶 정렬: 부모의 text-align에 의해 정렬

display: inline

---

a태그, span태그

◻️ 너비: 너비가 설정되어 있지 않다면 최소한으로 줄어든다
◻️ 높이: 높이가 설정되어 있지 않다면 최소한으로 줄어든다
🎯 목적: 글자화
✒️ 라인: 한 줄에 최대한 많이
📶 정렬: 부모의 text-align에 의해 정렬
⚠️ 주의: width, height, margin, padding 속성이 제대로 적용되지 않는다.

display: block

---

◻️ 너비: 너비가 설정되어 있지 않다면 최대한으로 넓어진다
◻️ 높이: 높이가 설정되어 있지 않다면 최대한으로 넓어진다
🎯 목적: 블록화
✒️ 라인: 한 줄은 무조건 혼자쓴다
📶 정렬: margin-auto를 사용해서 스스로 정렬

display: none

---

사라진다.