HTML 4. 블록/인라인 요소

화면 영역을 차지하는 형태에 따라 Block과 Inline 형태로 나뉨

- Block

태그의 내용과 관계 없이 상위 요소의 너비에 맞게 너비를 차지함. 레이아웃 영역을 지정할 때 주로 사용됨(이 요소에 CSS 스타일을 적용해서 화면의 레이아웃을 완선함)

div : bolck요소의 대표적인 태그로 아무 의미를 담지 않는 블록 요소로 아래의 블록 요소들의 상위 개념

section : 서로 다른 내용 구성이 들어갈 영역을 구분하는 블록 요소

article : 동인한 내용 구성이 반복될때 구분하기 위한 블록 요소

header : 본문 내용의 머리말의 영역을 구성하기 위한 블록 요소

footer : 본문 내용의 바닥글의 영역을 구성하기 위한 블록 요소

- Inline

태그의 내용에 맞춰서 너비가 결정됨. 레이아웃에 영향을 주지 않고 일부 내용에만 스타일이나 내용의 구분을 주고 싶을때 사용. 앞에서 언급한 b, i 등의 요소가 이에 속하며 대표적인 태그로 span이 있음

span : 아무 의미도 내포하지 않은 대표적인 inline 요소. CSS스타일과 함께 특정 내용을 강조하거나 구분하고 싶을때 사용

Cf) 블록/인라인 요소의 사용이유

secton, header 등의 레이아웃 구성을 위한 태그들은 전부 div로 대체해서 사용은 가능하지만 스크린리더 등의 Accessibility를 고려해서 가능하면 의미를 내포하고 있는 태그를 사용할 것을 권장