블럭 요소와 인라인 요소

---

html 요소는 block 요소와 inline 요소로 나뉜다

• block 요소는 1줄을 모두 사용하는 구조
  (크기지정가능, 상하마진가능)
• inline 요소는 1줄에 다음요소와 이어지는 구조이다
  (크기지정불가, 상하마진불가)
• inline-block요소는 1줄에 다음요소와 이어지는 구조
  (크기지정가능, 상하마진가능)
• block 요소의 종류 : h1~h6, p, ul, ol, li, table, tr, div, hr
• inline 요소의 종류 : th, td, img, span, br
• inline-block요소의 종류 : img, th/td(마진영역이 없음)

블럭 요소(Block-level Elements)

• 블럭요소는 항상 새로운 라인에서 시작하며, 브라우저는 자동으로 상하마진을 추가해준다.
• 블럭요소는 한 라인은 모두 사용한다.
• <p>와 <div>는 대표적인 블록요소이다.

<div>

<div id="div1" style="border:1px solid; height:300px;">
    first division 
</div>

<div>는 다른 HTML 요소들을 담는 컨테이너 역할을 한다. CSS와 같이 쓸 때 <div>는 스타일 블록으로 쓰인다.

<ol>

<ol style="border:1px solid; list-style-type: none;">

왼쪽 끝에서 오른쪽 끝까지 1줄을 차지함을 알 수 있다.

인라인 요소(Inline Elements)

• 인라인 요소는 새로운 라인에서 시작하지 않는다.
• 인라인 요소는 필요한 만큼의 넓이를 취한다.
• 인라인 요소는 블록 요소를 포함하지 못한다.

<span>

<span style="border:1px solid; width:100px; margin:30px;">SPAN1</span>

글자가 들어갈 만큼의 크기만을 가지는 것을 알 수가 있다.