[CSS] display 속성의 가장 기본, inline/block/inline-block 요소 2-5

Yumin Jung·2023년 1월 19일
0

inline 요소

어떠한 내용물을 포장지로 꽁꽁 싸매어 그 공간만을 차지하는 것. 일정한 바깥 형태나 껍데기가 없고 페이지의 흐름에 따라 다른 텍스트나 컨텐츠와 어우러져 배치된다.
width/height 속성을 무시한다. -> margin과 padding 속성의 좌우 간격만 반영이 되고, 상하 간격은 반영이 안된다.

block 요소

딱딱한 상자와도 같이 사각형의 형태를 갖고 있으며 너비와 높이, 안팎의 간격을 부여받을 수 있다. inline 요소와 달리 width/height/margin/padding 속성이 모두 반영된다.

inline-block 요소

마치 하이브리드 모드처럼 동작한다. 기본적으로 inline 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치되면서도, block 요소처럼 width/height/margin/padding 속성의 간격 지정이 가능하다.
내부적으로는 block 요소를 따르면서 외부적으로 inline 요소를 따르는 것이다.

profile
문과를 정말로 존중해

0개의 댓글