[CSS] inline, block, inline-block 🔴

각 요소에 특성을 이해하고 필요없는 코드를 작성하지 말 것.
ex) div 스타일에 width: 100% 적용하는 짓은 절대하지 말 것.

inline 요소

• 한줄에 여러개 배치
• 기본 너비값은 컨텐츠의 너비값
• 크기값을 가질수 없음
• 상하 마진을 가질 수 없음
• span, a, small, bing, em, u ,s, del, br, q, b, strong, mark, sub, sup, video, audio
  - a는 부모의 속성을 물려받지 않는다.

  🔴 가상선택자 before, after 요소도 기본적으로 inline이다.

block 요소

• 한줄에 한개만 배치
• 기본 너비 값은 100%
• 크기값을 가질 수 있음
• 상하좌우 마진을 가질 수 있음
• div, table, figure, figcaptioin, caption, header, nav, footer, section, article, aside, p, blockquote, ul, ol, li, td, th, form ,hr, h1~h6

inline-block 요소

• 한줄에 여러개 배치
• 기본 너비 값은 컨텐츠의 너비값
• 크기값을 가질 수 있음
• 마진 모두 허용
• img, input태그들, button, fontawesome

  🔴 position: absolute 또는 fixed가 적용되면 묵시적으로 inline-block이 된다.
  🔴 float 속성이 부여된 요소는 묵시적으로 inline-block 요소가 된다.
  🔴 정확하게는 BFC가 되는 것이다.
  참고: [CSS] float 와 overflow의 관계 그리고 BFC(Block Formatting Context)

display : 태그 속성 변경

• value: block, inline-block, inline, none, flex 등
• ex) a { display: block} : a의 태생은 inline