12. CSS _ Block & Inline

1. Block

• 대부분 HTML element는 block 요소.
• block 요소 : header, footer, p, li, table, div, h1
• block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻.
• 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.

-예)

2. Inline

• span, a, img 태그 등이 inline 요소
• inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻
• 기본적으로 block 레벨 요소는 새로운 줄에서 시작하지만, inline 요소는 줄의 어느 곳에서나 시작할 수 있다.

3. diplay / float property

• inline 성질을 갖도록 하는 CSS property
• 예)
  .inline-p {
  display: inline-block;
  }
  .float-left {
  float: left;
  }
  .block-span {
  display: block;
  }

3. diplay / float의 none 값

• diplay : none 하면 해당 태그 안보여짐.
• interactive한 웹을 구현하기 위함
• 특정 조건을 이용하여 none을 block으로 바꾸어 화면에 나오게 할 수 있음.