[CSS] 블록/인라인 요소

블록 요소는 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함 할 수 있습니다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 내용물에 상관없이 너비는 100%, 높이값은 내용물의 크기에 맞춰서 변화가 되며, 내용물이 없다면 높이값은 0이 됩니다. 임의의 라인이 새로 추가가 됩니다. width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다. 그리고 블록 요소 다음에는 줄바꿈이 이루어 집니다. 주로 레이아웃(구조)를 구성하는 용도로 사용된다.

※ 블록(Block)요소 종류
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

인라인 요소는 항상 블록 요소안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수 있습니다. 그리고 기본적으로 컨텐츠의 영역만큼 넓이를 가지며, 폰트의 크기만큼 높이를 가지게 됩니다. 그래서 임의로 width, height로 변형을 줄 수가 없습니다. line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 종앙, 좌,우측 정렬을 할 수 있습니다. 그리고 인라인 요소 다음에는 줄바꿈이 없고 우측으로 바로 이어서 표시가 된다. 내용물의 크기가 태그의 영역이 되며 구성요소의 역할을 하며 주로 내용을 출력할 때 사용된다.

※ 인라인(Inline) 요소 종류
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

※ 태그 중첩 규칙

1. 블럭 태그는 자식으로 또다른 블럭 태그 or 인라인 태그를 가질 수 있다.

2. 인라인태그는 자식으로 또다른 인라인태그만 올 수 있다.(블럭태그는 안됨)

3. 예외] 블럭 태그 중 <p>태그는 자식으로 인라인 태그만 가질 수 있다.