XHTML - 08. XHTML 블록 요소와 인라인 요소

블록 요소와 인라인 요소

---

1. 블록 요소

• 블록 요소 (Block element)

    – 독립적인 형태의 상자

    – H1~h6, p, div

    – 인라인 요소, 텍스트, 또 다른 블록 레벨 요소를 포함

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

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

    – 그리고 블룍 요소 다음에는 줄바꿈이 가능.

    – display:inline CSS명령어로 블록 요소를 인라인 요소의 속성으로 변경 가능.

    – div {display:inline}

• HTML5의 블록요소 종류

    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

---

2. 인라인 요소

• 인라인 요소 (inline element)

    – 블록 상자 안의 일부

    – a, img, em, strong, span

    – 블록 요소를 포함할 수 없다

    – 반드시 블록 레벨 요소에 포함시켜 표현

• HTML5의 인라인 요소 종류

    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

---

주의점

–인라인 요소는 height가 적용되지 않는다.

–인라인 요소는 width가 적용되지 않는다.

–블록 요소는 vertical-align 이 적용되지 않는다.

–블록 요소는 text-align이 적용되지 않는다.