display

맨날 헷갈리는 display 딱 정리하고 감

display: none;

화면에서 사라짐. 크기 자체도 차지하지 않음

 

display: block;

일반적으로 설정하지 않아도 div가 갖게되는 기본값

기본적으로 width가 자신의 컨테이너의 100%. 쉽게 말하자면, 가로 한 줄을 다 차지

 

display: inline;

컨텐츠를 딱 감쌀정도의 크기.

block 태그와 다르게 줄바꿈이 되지 않고, 반드시 컨텐츠를 감싸게 되고, 크기를 변화시킬 수 없다.

테스트에서 width를 임의로 500px 로 바꾸어줬지만 크기는 여전히 글의 길이 만큼인걸 확인 가능

 

display: inline-block;

inline과 block의 특성을 합쳐놓은 속성.

기본적으로는 inline의 속성을 지니고 있지만, 임의로 크기를 바꿔줄 수 있다. 

 

출처: https://programming119.tistory.com/97 [개발자 아저씨들 힘을모아:티스토리]