블럭(block), 인라인(inline) 요소

블록 요소와 인라인 요소란 무엇일까?

블럭요소 (block element) : 하나의 태그가 브라우저에서 독립적인 행(좌우공간 모두)의 공간을 차지하는 요소

인라인요소 (inline element) : 하나의 태그가 브라우저에서 실제로 코딩된 해당 영역만 차지하여 다른 태그가 좌우에 나란히 위치할 수 있는 요소 ==텍스트레벨 요소

블럭요소

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

블럭요소 예시들

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

인라인요소

• 항상 블록 요소안에 포함되어 있으며, 인라인 요소안에 다른 인라인 요소가 포함될 수 있음
• 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가짐 (컨텐츠 너비 만큼)
• 임의로 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