inline-block(centering)에 관한 고찰

🎨오늘 block, inline-block, inline에 대해서 배워보다가,

inline 요소에 display : block;을 주게 되면 div처럼 옆으로 영역을 전부 차지하는 block요소가 되지않을까?

라는 마음에, 몇 개를 테스트 해보게 되었다.

강쥐 사진은 우리 강아지 귀여운 망고다..아무튼
이상하게 img태그에 display : block;을 줘도 위의 h1의 block 속성처럼 영역을 다 차지하지 않는것이다..
그래서 궁금함에 구글링해본 결과

h태그 안에 있는 텍스트 자체가 inline요소이고 텍스트를 감싸고 있는 h태그가 block속성이라서 text-align : center을 쓰면 정렬이 된다.
하지만 img 태그는 태그 자체가 컨텐츠를 포함하고 있으니 다른 경우라서,
이경우에는 img 상위 div 요소를 넣고 div에 text-align : center를 쓰면 정렬이 되는것이다!
(text-align은 부모요소에 넣는다는거 잊지말자)
(그래서 div요소를 넣을 때 img는 block이 아니라 다시 inline요소로 바꿔줘야한다.)
그리고 또 하나! 외부 div를 씌우고 div와 img 너비가 정해져 있는 상태에서는
(img 태그가 display : block 상태임) margin : 0 auto를 줘도 가운데로 정렬이 가능하다!

🎈줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

잊지말자!