블록 구조 / 인라인 구조

블록구조 / 인라인구조

오늘은 웹 사이트 제작에 있어 가장 기본이 되는 블록 구조와 인라인 구조에 대해서 알려드리겠습니다.

---

블록구조

블록 요소는 일단 기본적으로 줄 바꿈이 일어나는 형태로 영역의 너비가 상위 영역의 전체 너비만큼 만들어지는 형태입니다. 블록 요소에는 일부를 제외한 블록 요소를 포함하고, 인라인 요소까지 포함 가능합니다. 기본 설정이 블럭인 자주 사용하는 태그들은 다음과 같습니다.

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

그림으로 설명 드리겠습니다.

인라인구조

인라인 요소는 글자와 같이 옆으로 나열되는 형태로 줄 바꿈이 일어나지 않는 요소들입니다. 인라인은 안의 글자와 같은 내용 길이에 맞게 크기를 차지하는 성질이 있습니다. 기본 설정이 인라인인 자주 사용하는 태그들은 다음과 같습니다.

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

같은 인라인요소를 포함하지만, 블록 요소는 포함 불가능합니다. 그리고 인라인요소는 box관련 속성이 적용이 안됩니다. ex) width, height, margin(top, bottom)(margin은 좌, 우만 적용이 된다) 등 적용 안됩니다. 참고로 padding 값은 적용이 됩니다.

그림으로 설명 드리겠습니다.