block level 요소

• 언제나 새로운 줄에서 시작, 가로로 최대한 늘어나 가능한 모든 너비를 차지한다.
• 가로의 크기가 부모 요소의 100% 차지, 가로 크기를 작게 설정할 수 있지만 줄바꿈 효과는 사라지지 않는다.
• body요소 안에서만 나타날 수 있다.

  address, article, aside, blockquote, details, dialog, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1~h6, header, hgroup, hr, li, main, nav, ol, p, pre, section, table, ul

inline level 요소

• 새로운 줄을 만들지 않으며 필요한 너비만 차지한다.
• 가로와 세로의 크기를 임의로 지정할 수 없다.

a, abbr, acronym(en-US), audio, b, bdi(en-US), bdo, big(en-US), br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, map, mark, meter, noscript, object, output, picture(en-US), progress, q, ruby, s, samp, script, select, slot, small, span, strong, sub, sup, svg, template, textarea, time, u, tt(en-US), var, video, wbr

display 속성

• 해당 요소의 기본값을 원하는 값으로 변경해준다.

display: block;
display: inline;
display: inline-block;
//block의 속성과 inline의 속성을 둘다 가진다. 
//block요소처럼 가로세로 크기를 설정할 수 있으며 inline요소처럼 양옆으로 나란히 나열된다.