HTML 태그는 크게 블록 요소(block element)와 인라인 요소(inline-element)로 나누어 진다. 이 부분을 명확히 이해하고 있어야 CSS 를 사용하는데 어려움이 없다.
각 두 요소 모두 적용되는 CSS가 별도로 존재한다.
예를 들어,
- 인라인 요소는
height가 적용되지 않는다. - 인라인 요소는
width가 적용되지 않는다. - 블록 요소는
vertical-align이 적용되지 않는다. - 블록 요소는
text-align이 적용되지 않는다.
블록 요소
블록 요소는 모든 인라인 요소를 포함할 수 있고, 다른 블록 요소도 일부 포함 할 수 있다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있다. 그리고 블록 요소 다음에는 줄바꿈이 이루어진다.
display: inline css 프로퍼티로 블록 요소를 인라인 요소의 속성으로 변경할 수 있다.
1
div {display:inline} // 모든 DIV태그를 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
인라인 요소
인라인 요소는 항상 블록 요소 안에 포함되어 있으며 인라인 요소 안에 다른 인라인 요소가 포함될 수 있다. 그리고 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 된다. 그래서 임의로 width, hegith 로 변형을 줄 수가 없다. 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 중앙, 좌우측 정렬을 할 수 있다. 그리고 인라인 요소 다음에는 줄바꿈이 없고 우측으로 바로 이어서 표시가 된다.
display: block CSS 프로퍼티로 인라인 요소를 블록 요소의 속성으로 변경 할 수 있습니다.
1
2
div {display:block} // 모든 DIV태그를 inline요소로 변경함
div {display:inline-block} // inline-block으로 인라인 요소와 블록요소의 속성을 모두 갖는 속성으로 변경이 가능함
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