block요소 ,inline요소

🔶 block

1. 높이,너비가 있음.
   1) 너비는 한 줄을 100% 다 차지함
   2) 따라서 블록 레벨 요소는 언제나 새로운 줄에서 시작하게 됨.
2. margin,padding 적용됨.

🔶 inline

1. 높이와 너비가 없음.
   1) 높이,너비 지정한게 안먹음(content 길이만큼만 차지함)
   2) 따라서 콘텐츠가 줄바꿈이 뒤지 않음.
2. "좌,우의 margin"과 "사방에 padding"은 적용ㅇ / 위,아래 margin만 적용x

※ 대부분 block box이므로, inline을 외우는거로 초첨두기!
ex) block 예제 - <h2> (h2는 블록요소 이기때문에 자동으로 줄바꿈이 됨)
ex) inline 예제 - <span> <a> <img>

🔶 inline-block

1. block이 inline속성을 가지게해줌. 그래서 가로정렬 되고, 높이와 너비를 가질 수 있음.
2. 하지만 많은 문제가 있고, 오래됐기 때문에 잘 사용하지 않음.
   -문제1) block 사이에 공간이 지멋대로 생기는 둥 정해진 형식이 없음.
   -문제2) 반응형 디자인을 지원하지 않음(각 기기마다 만족하는 최적값을 일일히 찾아야 함)
   → 이 문제를 해결할 수 있는게 flex임
   

---

🔶 텍스트 정렬 text-align : left ,center ,right

• "블록요소" 안에있는 인라인 요소를 정렬할 때 사용함.
  : 블록은 너비가 가로 한줄을 다 차지하므로, 가로에 영역이 있어서 정렬가능함.

• 인라인요소 자체에는 안먹음.
  : 영역이 컨텐츠요소 크기만큼만 있으므로 너비에 공간이 없어서 가운데 정렬이 안됨.
  <span>글자</span> ←이건 글자를 가운데정렬 못함.