HTML 글자와 상자

내용(컨텐츠, 요소)이 화면에 출력되는 특성 2가지

 

1. 인라인(inline) 요소 : 글자를 만들기 위한 요소들

2. 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들

 

1번의 인라인(inlone)의 대표적인 태그는

<span></span>이 있음.

본질적으로 아무 것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도임.

인라인 요소는 보통 수평으로 쌓인다. 줄어들려는 성질을 가짐.

 

<span>hi<span>

<span>bob<span>

 

출력 화면은

hi bob

으로 띄어쓰기가 된 상태로 나옴. 

단을 내리는 것 자체가 띄어쓰기로 확인되기 때문이며,

단을 안내리면 띄어쓰기가 안된다.  

 

<span><div></div></span> - 불가

<span><span></span></span> - 가능

이유는 span은 인라인(글자) 요소인데, div는 상자(블록) 요소이기 때문이다. 

 

2번 블록(Block)의 대표적인 태그는

<div></div> 이 있음.

본질적으로 아무 것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도임.

블록 요소는 보통 수직으로 쌓인다. 가로 너비는 늘어나려하나, 세로 너비는 줄어들려함.

가로와 세로, 마진과 패딩 여백 좌우, 위아래 등 사용 가능

 

<div><div></div></div> - 가능

<div><span></span></div> - 가능

이유는 div는 상자(블록) 요소로서 제약 사항이 적다.