블록요소와 인라인요소

HTML 의 element는 크게 block-level 과 inline-level 로 구분 할 수 있습니다.

이 두가지 element level 에 대하여 알아보겠습니다.

block-level

 : 줄바꿈이 되지 않으며, 기본적으로 width 값을 100%로 설정합니다.  block-level 은 vertical-align 속성을 적용 되지 않고, height, margin, padding, line-height 속성이 적용될 수 있습니다.

inline-level

 : 줄바꿈이 되며, 수평으로 정렬이 가능한 요소들입니다. inline-level은 height속성은 적용 되지 않고, vertical-align, line-height값이 적용 됩니다.

inline-block

 : inline-block은 block 의 영역을 가지고 있지만 inline형태로 정렬이 가능한 속성입니다.

element level 에 의한 태그 정리

block-level

 : p, h1~h6, ul, ol, dl, table, div, noscript, blockquote, form, hr, table, fieldset, adress

inline-level

 : samp, kbd, var, cite, abbr, acronym, a, img, object, br, script, map, q, sub, sup, span, bdo, input, select, textarea, label, button

block 요소는 inline요소보다 상위에 있는 개념이므로 inline요소 안에 block 요소가 들어가면 문법 오류가 납니다.

ex) <a href=""><div>내용</div></a>

해당 예제대로 쓴다면 a 태그의 속성을 display:block or display:inline-block 으로 변경해 주셔도 되지만 가능하다면 inline요소 밑에 block 요소를 넣지 않는것을 권장합니다.