[CSS] display 속성 block, inline-block, inline 차이점

Kyung_j99·2022년 10월 20일
0

CSS

목록 보기
1/1
post-thumbnail
Q: inline-block 성질이 뭐야?
A: inline이지만 block 성질을 가지고 있는..?
Q: block은 무슨 성질을 가지고 있는데?
A: 밑으로 쌓이는 덩어리..?

blockinline-block의 차이점에 대해 설명해 보라고 했을 때, 느낌적으로만 알지 정확한 대답을 하지 못했다. 😅
가장 기본적인 것인데 제대로 알지 못하고 CSS를 갈기는 것 같아 정리해 봤다.

block

영어의 단어처럼 박스, 덩어리이며 가로로 전체 영역을 가지기 때문에 콘텐츠가 아래로 쌓인다.
width, height 값을 가질 수 있어 사용자가 지정한 크기를 가진다.

<h1>, <div>, <p>, <ul>, <figure> 등등

inline

텍스트적인 성질을 가지고 있어 Html에 입력한 콘텐츠만큼의 영역을 갖기 때문에 옆으로 쌓인다.
width, height 값을 가질 수 없다.

<span>, <a>, <img> 등등

inline-block

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

profile
코드로 그림 그리는 사람 🎨

0개의 댓글