HTML5 블록 요소와 인라인 요소

 

HTML의 요소는 크게 블록 요소( block element )와 인라인 요소( inline element )로 구분된다.
헷갈리는 개념이지만 차후에 CSS를 잘 적용하기 위해서는 명확이 이해를 하고 있어야한다.

 

이 각각의 요소에 적용되는 CSS가 별도로 존재하기 때문에 CSS를 적용해 놓고도 "왜 적용이 되지 않지?" 라는 상황이

발생할 수 있습니다.

예로는 밑에 예시들이 있습니다.

• 인라인 요소는 height가 적용되지 않는다.
• 인라인 요소는 width가 적용되지 않는다.
• 인라인 요소는 text-align이 적용되지 않는다.
• 블록 요소는 vertical-align 이 적용되지 않는다.

 

 

블럭요소(block element)와 인라인요소(inline element)란?

• 블럭요소 : 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소들입니다.
• 인라인요소 : 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들입니다. 행 안의 일부분이라고 보시면 됩니다. 텍스트레벨 요소라고도 합니다.

간략하게 핵심만 정리해보겠습니다.

블록 요소 (block element)

 

• 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함 할 수 있습니다. 
• 사용 가능한 최대 가로 너비를 사용합니다 ( 기본 너비값 100% )
• 전체를 차지하기 때문에 각 요소들이 수직으로 쌓임 ( 한 줄에 한개만 배치 )
• 크기값 가질 수 있음 ( 가로 너비 & 세로 길이 지정 가능 )
• 상하좌우 마진 & 패딩을 가질 수 있음
• 레이아웃을 작업하는 요소로 적합
• width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다. 
• 그리고 블록 요소 다음에는 줄바꿈이 이루어 집니다.

블록 요소들

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

 

인라인 요소 (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, video, audio