inline, inline-block, block이란!

display속성

웹피이지에서 요소들이 어떻게 보여지고 다른 요소들과 어떻게 배치되는지를 결정
css를 이용하여 inline을 block으로, block을 inline으로 바꿀 수 있다

• inline
  해당 요소의 길이만큼 크기를 갖는 요소
  width, height를 설정할 수 없다
  

    🖥 대표적인 inline 엘리먼트
    -span
    -br
    -img
    -input
    -select

• inline-block
  inline요소처럼 다른요소들과 나란히 배치되며,
  block요소처럼 width, height를 설정할 수 있다
  

    🖥 selector를 기준으로 왼쪽과 위에서 10px만큼 떨어지게 하고 싶을땐,
       아래 코드처럼 작성!
       selector {
          position: relative; //secector의 일반적인 위치를 기준으로 지정
          top: 10px; //secector의 일반적인 위치를 기준으로 위에서 10px만큼 띄움
          left: 10px; //secector의 일반적인 위치를 기준으로 왼쪽에서10px만큼 띄움
        }

• block
  좌우 최대로 늘어나며, 자동 줄바꿈이 됨
  width, height 값을 가지며 여백을 설정할 수 있다
  width를 설정하지 않으면 브라우저의 넓이가 자동으로 설정된다

    🖥 대표적인 block 엘리먼트
      -div
      -p
      -form
      -footer
      -section
      -header