block

header, footer, p, li, table, div, h1 등이 모두 block 요소에 해당하는 태그.

block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다.

inline

span, a, img 태그 등이 inline 요소.

inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻

css 로 inline<->block

inline 성질을 갖도록 하는 CSS property는 display와 float이 있다..

`.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

해당 property에 위와 같은 값을 부여하면,
요소 옆에 요소가 위치하는 inline 성질로 변하게 됩니다.

원래는 inline 성질을 가진 태그를 block으로 바꾸게 할 수도 있다.

.block-span {
  display: block;
}

CSS로 span은 p 태그와 똑같은 성질을 갖게 된다.]

none

.hide {
  display: none;
}

display에 none 이라는 값을 주면, 해당 요소는 화면에서 보이지 않는다.

왜 사용? interactive한 웹을 구현할 수 있기 때문

원래는 해당 영역이 display: none; 으로 보이지 않다가,
텍스트를 입력하는 순간,
JavaScript가 검색 목록 요소에 다른 클래스로 교체할 것.
아마 그 새로운 클래스에는 display: block; 이라는 값이 있었을 것

이렇게 클래스 이름에 따라 요소에
display: none <-> block 가 있었다가 없었다가 하면서
요소를 보이게/안보이게 할 수 있는 것.