HTML 블록,인라인 요소란?

HTML 블록, 인라인 요소란 무엇인가?

HTML에서 크게 블록요소 (block element)와 인라인 요소(inline element)로 구분할 수있다. 이부분 부터 명확하게 이해하고 있어야지 추후에 CSS를 학습할때 어려움이 없다.

* 블록요소 (block element)

• 사용 가능한 최대 가로너비를 사용함 ( 기본 너비값은 100% )
• 전체를 차지하기 때문에 각 요소들이 수직으로 쌓인다.
• 크기값을 가질수 있음
• 상하좌우 마진& 패딩을 가질 수 있음.

- 주요 블록요소

div　p　ul　ol　li　h1~h6 form header nav footer section article aside table th td figure figcaption caption blockquote

* 인라인 요소(inline element)

• 사용 가능한 필요한 만큼의 영역을 사용함
• 요소들이 수평으로 쌓임 한줄에 여러개 배치
• 크기값 가질 수 없음
• 상하 마진 적용 불가능 ( 좌우 마진은 가능 / 상하좌우 패딩도 가능 )

- 주요 인라인 요소

span　a　em b strong video audio

인라인-블록 요소 (inline-block element)
기본 특성은 인라인이라 요소가 수평으로 쌓인다.
블록요소처럼 사이즈를 적용할 수 있다.
크기값 가질수 있음
상하좌우 마진&패딩을 가질수 있음.
사용 가능한 필요한 만큼의 영역을 사용함

* 블록,인라인 요소 가운데 정렬방법

-블록 요소 - margin: auto;
-인라인 / 인라인 블록 요소 - 부모 요소에 text-align: center;