[HTML] 인라인(inline)요소와 블록(block)요소

HTML 요소는 인라인 요소와 블록 요소가 있다. 인라인 요소는 흐름을 끊지않고 태그에 할당된 공간만 차지한다면 블록 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만든다. 자세한 차이점은 다음과 같다.

• 인라인 요소: 글자를 만들기 위한 요소
• 블록 요소: 상자(레이아웃)를 만들기 위한 요소

인라인(inline) 요소

• 인라인 요소는 새로운 줄을 만들지 않으며 필요한 너비만 차지한다.
• 요소가 왼쪽에서 오른쪽으로 수평으로 쌓이고 줄바꿈해서 쓰는게 띄어쓰기하는 것임
• 크기를 지정해도 영향을 받지 않음 (글자를 취급하는 요소이기 때문에)
• 외부/내부 여백 모두 위/아래는 사용 불가하고 좌/우는 사용 가능함
• 인라인 요소안에는 블럭요소를 사용할 수 없음

대표적인 인라인 요소

<span> </span>: 본질적으로 아무 의미가 없으며 콘텐츠 영역을 설정하는 용도

블록(block) 요소

• 요소가 수직으로 쌓이는 특징
• 부모 요소의 크기만큼 자동으로 늘어남
• 가로는 최대한 늘어나고 세로는 최대한 줄어든다
• 가로너비, 세로너비 지정 가능하고 외부 여백(margin), 내부 여백(padding) 모두 지정 가능
• 자식으로 블록 요소를 넣을 수도있고 인라인 요소도 넣을 수 있다.

대표적인 블록 요소

<div> </div>: 본질적으로 아무 것도 나타내지 않고 콘텐츠 영역 설정하는 용도