블록/인라인 구조

블록 구조/ 인라인 구조

블록 구조

블록 요소는 기본적으로 줄 바꿈이 일어나는 형태로 영역의 너비가 상위 영역의 전체 너비만큼 만들어지는 형태입니다. 블록 요소에는 일부를 제외한 블록 요소를 포함하고, 인라인 요소까지 포함 가능합니다.

인라인 구조

인라인 요소는 글자와 같이 옆으로 나열되는 형태로 줄 바꿈이 일어나지 않는 요소입니다. 인라인은 안의 글자와 같은 내용 길이에 맞게 크기를 차지하는 성질이 있으며, width, height, margin(top,bottom) 등 box관련 속성이 적용이 안됩니다.

인라인-블록 구조

옆으로 나열되는 성격을 가진 인라인 속성과 폭을 가지는 스타일이 모두 적용되는 블록 속성 두 가지 모두의 성질을 가진 구조입니다.

▶ 블록 구조를 갖는 태그

div, p, h1~h6, ul, li, ol, table, form, section, footer 등

▶ 인라인 구조를 갖는 태그

span, a, em, i, strong, b, del, ins, sub, sup, textarea 등