[HTML] 추석!! 블록 요소 vs 인라인 요

바로 전 태그 설명은 이정도 리마인드 하기로하였고, 

이번 포스팅에서는 inline 태그와 block 태그 이해와, 특징들을 다시한번 리마인드 하도록 하겠습니다.

블록 요소와 인라인 요소의 특징으로는 줄빠꿈 처리가 되느냐, 안되느냐의 차이가 있으며, 더 디테일한 특징은 아래 포스팅에서 확인 ~

1. 블록 요소

블록 요소는 또 다른 블록 요소와, 인라인 요소를 포함할 수 있으며, 기본속성으로 가로폭이 화면의 전체를 차지합니다.

또한 블록요소가 종료된 시점에서는 줄바꿈 처리가 되는것이 특징 ~ 

블록요소 종류

* div, dl, dd, dt, form, h1 ~ h6, ol, ul, pre, table

* html5 태그 

* section, header, footer 등

* 블록 요소엔 명시적으로 width, height 를 지정할 수 있으며, vertical-align, text-align 을 지정할 수 없다.

* 이모든것은  css를 통해 유저화면에 맞게 변경할 수 있다.

* p 태그는 블록요소이나 다른 태그를 포함할 수 없으며, 단독으로만 사용 가능하다.

2. 인라인 요소

인라인요소는 인라인 요소만 포함이 가능하며, 블록요소는 포함할 수 없다.

인라인 요소 종류

* a, button, em, i, img, input, label, span, strong, sub, sup, textarea

* 블록요소와 다르게 width, height 선언이 불가능하며, line-height 줄의 높낮이를 변경할수 있으며, text-align를 이용한 글자 정렬이 가능하다.

* 줄바꿈이 없으며, 우측으로 나열된다.

	블록	인라인	인라인-블록
영역	width : 가로 전체 or 지정값 height :  컨텐츠 크기 or 지정값	width, height 모두 컨텐츠 크기	지정값 or 컨텐츠 크기
정렬	margin, padding 값에 의한 정렬	text-align, line-height, vertical-align 을 이용한 정렬	text-align 의 영향을 받는다.
중첩요소	블록 및 인라인 요소 포함 가능(p x)	인라인 요소만 포함 가능	인라인만가능
특징	양 옆의 다른 요소를 포함할 수 없다.	다른 요소 포함 가능	다른요소 포함가능
대표요소	div, form, table, ol, ul, h1 ~ h6	input, span, a, button, textarea