HTML 태그 - 블록 요소, 인라인 요소

HTML의 태그는 크게 블록 요소(block element)와 인라인 요소(inline element)로 나누어 진다.

각각의 요소에 적용되는 CSS가 별도로 존재하기 때문에 이 부분을 명확히 알고 있어야 CSS를 

올바르게 사용이 가능하다. 

 

블록요소 (block element)

블록 요소는 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함 할 수 있다.

기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있다.

블록 요소 다음에는 줄바꿈이 이루어 진다. 

 

블록 요소 종류

address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video

 

 

인라인 요쇼 (inline element)

인라인 요소는 항상 블록 요소안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수 있다. 
기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 된다.
그래서 임의로 width, height로 변형을 줄 수가 없다. 
인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 종앙, 좌,우측 정렬을 할 수 있다. 
인라인 요소 다음에는 줄바꿈이 없고 우측으로 바로 이어서 표시가 된다. 

 

인라인 요소 종류 

 

a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var