CSS - inline, inline-block, block

• display 프로퍼티
• 모든 HTML 요소는 아무런 CSS를 적용하지 않아도 기본적으로 브라우저에 표현되는 디폴트 값을 가짐
• HTML 요소는 block 또는 inline 특성을 갖고 있음

1. inline

• 새로운 라인에서 시작하지 않으며, 문장의 중간에 들어갈 수 있음.
  즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치함
• content의 너비만큼 가로폭을 차지
• 상,하 여백은 line-height로 지정
  **width, height, margin-top, magin-bottom 프로퍼티 지정 불가
• inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없음
  inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용
• inline 태그 예)
  -span
  -a
  -strong
  -img
  -br
  -input
  -select
  -textarea
  -button

2. inline-block

• block 과 inline 레벨 요소의 특징을 모두 갖고 있음
• inline 레벨 요소와 같이 한 줄에 표현되면서,
  **width, height, margin, padding 프로퍼티를 모두 지정 가능
• 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있음
• content의 너비만큼 가로폭을 차지

3. block

• 항상 새로운 라인에서 시작
• 화면 크기 전체의 가로폭을 차지 (width: 100%)
• width, height, margin, padding 프로퍼티 모두 지정 가능
• block 레벨 요소 내에 inline 레벨 요소 포함 가능
• block 태그 예)
  -div
  -h1 ~ h6
  -p
  -ol / ul
  -li
  -hr
  -table