HTML 블록(Block) / 인라인(Inlin) / div, span 요소

Block 

항상 새 행에서 시작되며 요소 앞 뒤에 일부 공간을 자동으로 추가

블록 요소는 사용 가능한 전체 너비를 차지

일반적으로 블록 요소는 <p>와 <div> 사용

<p>는 문단을 정의

<div>는 분할, 섹션을 정의

<div style = "background-color: cadetblue;"> Block 요소</div>

 

너비가 웹 페이지 끝까지 차지한다.

* 블록 요소는 p, div 외에도 h1~h6, table, nav, video 등 많다.

 

 

Inline

인라인 요소는 새 행에서 시작하지 않는다.

필요한 만큼만 너비를 차지

 

<span style="background-color : blue">Inline 요소</span>

 

딱 사용한 글자만큼만 공간을 차지한다.

 

* 인라인 요소로는 span, label, br, button 등이 있다.

 

<div>

HTML 요소의 컨테이너

div는 필수 속성은 없으나 style, class, id를 주로 사용

div에 CSS를 사용하여 스타일링 한다.

 

<span>

텍스트의 일부 또는 문서위 일부를 표시하기 위해 사용되는 인라인 컨테이너

span 요소도 필수 속성은 없으나 style, class, id를 사용