Q: inline-block 성질이 뭐야?
A: inline이지만 block 성질을 가지고 있는..?
Q: block은 무슨 성질을 가지고 있는데?
A: 밑으로 쌓이는 덩어리..?
block과 inline-block의 차이점에 대해 설명해 보라고 했을 때, 느낌적으로만 알지 정확한 대답을 하지 못했다. 😅
가장 기본적인 것인데 제대로 알지 못하고 CSS를 갈기는 것 같아 정리해 봤다.
영어의 단어처럼 박스, 덩어리이며 가로로 전체 영역을 가지기 때문에 콘텐츠가 아래로 쌓인다.
width, height 값을 가질 수 있어 사용자가 지정한 크기를 가진다.
<h1>, <div>, <p>, <ul>, <figure> 등등
텍스트적인 성질을 가지고 있어 Html에 입력한 콘텐츠만큼의 영역을 갖기 때문에 옆으로 쌓인다.
width, height 값을 가질 수 없다.
<span>, <a>, <img> 등등
block과 inline 성질을 모두 가지고 있다.(?)
inline의 텍스트적인 성질로 html에 입력한 콘텐츠만큼의 영역을 갖지만 width와 height 값을 가질 수 있다.
자신의 크기(width, height)를 가질 수 있는지에 대한 점이 inline과 가장 큰 차이점이다.
참고 사이트
https://developer.mozilla.org/ko/docs/Web/CSS/display
http://www.tcpschool.com/css/css_position_display