display 속성에서 가장 많이 쓰이는 기본 속성: inline, inline-block, block

display : inline

HTML 요소를 줄바꿈 하지 않고 한 줄에 나란히 배치되도록 만드는 속성이다.
이 속성을 쓰면 기본 block 레벨의 요소도 inline 속성이 된다. 즉, block 레벨 요소가 가지고 있던 기본 높이 값이 무시되고 그 요소가 가지고 있는 컨텐츠의 높이에 맞춰진다.
그래서 고정으로 width, height, margin-top.. 을 지정한다 하더라도 무시된다.
이 때 높이 값을 조절하기 위해서 자주 사용하는 속성이 line-height 속성이다.

display : block

한 줄에 하나 배치된다. 그렇기 때문에, 한 줄에 들어가 있는 요소의 width 값이 작더라도 자동으로 margin 이 채워져서 한 줄의 공간을 전부 차지하게 된다.

display : inline-block

inline 과 block 의 속성을 둘 다 가지게 하는 값이다.
HTML 요소를 한 줄에 여러개 배치할 수 있지만, 정해진 공간이 넘어가면 줄바꿈하여 배치한다.

display : none

none 을 쓰기 되면 해당하는 HTML 요소가 화면에서 사라지고, 모든 속성을 잃게 된다.
주로 자바스크립트와 같이 써서, 특정 조건에서 HTML 요소를 보이게 하거나 사라지게 하거나 할 때 사용한다.

최근에 HTML&CSS에서 레이아웃을 잡을 때 자주쓰이는 flex, grid 는 별도의 포스트로 다룰 예정인데, 특히 flex는 한 번 써보고 신세계를 경험했었다.
예전에 레이아웃 공부할 때 float이 주던 스트레스 때문에 매번 CSS는 포기했었는데, flex 하나면 모든걸 해결할 수 있을 정도라고 생각된다.