display 속성
inline
block
inline-block
list-item
table
flex
none
모든 html요소는 이 중 한가지를(한가지만) 꼭 가지고 있다
inline - span b img 등
block- div h1 p 등
inline은
다른 요소들과 같은 줄에 머무르려고 하는 경향이 있고
가로 길이는 필요한 만큼만 차지하는 경향이 있다
block은
새로운 줄에 가려는 경향이 있다
가로길이는 필요한 만큼만 차지하는 경향이 있다
예를들어
display속성을 통해 inline속성인 i를 block으로 바꿔준다면
display를 통해서 속성을 인위적으로 바꿀수 있다
inline요소는 가로 세로의 길이 개념이 없다고 생각하면 편하당
width height가 auto로 설정됨
그럼 이 inline처럼 같은 줄에 머물면서 블록 요소처럼 가로 세로 길이도 가질 수 있을까?
이렇게 가로 세로 길이가 설정한대로 나온당
inline-block은 같은 줄에 머무르는 inline의 특징과 가로 세로 길이를 가질 수 있는 block의 특징을 같이 가진다