CSS Block, Inline
## block요소 = 한 줄 전체를 혼자 차지하는 요소
## inline요소 = 자기 사이즈만큼만? 자리를 차지해서 바로 옆에 다른 inline요소가 올 수 있다.
나는 처음에 많이 헷갈리던 건데 block요소와 inline요소들에 뭐가 있는지 잘 몰라서 구분하기 힘들었다.
- block요소의 예 = header, footer, p, li, table, div, h1 등의 태그들
- inline요소의 예 = span, a, img 등의 태그들
위 예시들은 태그를 그냥 생으로 쓸 때 block 혹은 inline 요소가 되는 거고 CSS를 이용하면 태그 성질 신경 안쓰고 쓸 수 있다.
예를 들면..
- p{ display: inline-block; }
- p{ float: left }
이런 식으로 display나 float을 사용해서 원래 block요소인 태그들을 inline요소로 디자인할수도 있고
- display: block
- display: none
이런 식으로 inline요소들을 block요소로 바꾸거나 화면에서 안보이게 만들 수도 있다. 화면에서 안보이게 하는건 왜 있나 싶었는데 어떤 이미지나 텍스트를 안보이게 해놨다가 사용자가 어떤 행동을 할 때 보이게 하는 데 쓰인다고 한다. 검색창 클릭했을 떄 검색 기록 뜨게 하는 게 하나의 예시라고 한다.