HTML 글자(인라인)와 상자(블록)의 개념

 

요소가 화면에 출력되는 특성(2가지)

 

인라인(Inline) 요소

 

- 글자를 만들기 위한 요소

- 가로 세로 너비 모두 포함한 콘텐츠(내용)의 크기만큼 자동으로 줄어듬

- 인라인 요소는 가로 세로 사이즈를 지정할 수 없다

- 자식 요소로 블록 요소를 사용할 수 없다

<span>내용</span>

<!--
<span> 태그는 대표적인 인라인 요소
본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도

요소가 수평으로 쌓임 (왼쪽 -> 오른쪽)
-->

<span>내용1</span>
<span>내용2</span>

<!--
내용1 내용2 (줄바꿈이 이루어지지 않고 띄어쓰기가 적용)
-->

 

블록(Block) 요소

 

- 상자(레이아웃)를 만들기 위한 요소

- 가로 너비는 부모 요소의 크기만큼 자동으로 늘어남

- 세로 너비는 포함한 콘텐츠의 크기만큼 자동으로 줄어듬

- 자식 요소로 인라인 요소와 블록 요소 모두 사용 가능하다

<div>내용</div>

<!--
<div> 태그는 대표적인 블록 요소
본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도

요소가 수직으로 쌓임 (위 -> 아래)
-->

<div>내용1</div>
<div>내용2</div>

<!--
내용1
내용2 (줄바꿈이 이루어짐)
-->