HTML 기본3 - 블록레벨(block) 요소와 인라인(inline) 요소

1. 블록레벨 요소(Block-level Element)

-> 블록레벨 요소는 항상 새로운 라인에 시작(수직)되고 사용 가능한 너비를 full로 차지한다.

• 대표적인 블록레벨 요소로는 div 가 있고 div 외에도 address, article, aside, blockquote, canvas, dl, dt, h1, header, hr, li, p 등 다양한 태그들이 존재
• 일반적으로 페이지의 구조적 요소를 나타날 때 사용
• 블록레벨 요소는 인라인 요소에 중첩될 수 없으나, 블록레벨요소는 다른 블록레벨 요소에 중첩될수 있음
• 크기(width, height)를 지정할 수 있고 사용 가능한 너비를 최대로 차지한다.
• width:100%; height: 0; 으로 시작한다.
• Margin과 Padding의 위, 아래, 좌, 우가 사용 가능하므로 레이아웃 용도가 적당

2. 인라인 요소(Inline Element)

-> 인라인 요소는 새로운 라인에서 시작하지 않고 공백없이 오직 필요한 너비만큼 차지한다.

대표적인 인라인 요소로는 span이 있고 span 외에도 button, em, i, img, label, map, select, small, textarea 등 다양한 태그들이 존재한다.

• 크기(width, height)를 지정할 수 없다.
• width:0; height:0; 으로 시작한다.
• Magin과 Padding의 위, 아래는 사용할 수 없다.