[HTML] 블록레벨(Block level) 요소와 인라인(Inline) 요소

1.블록요소 [DIV, H1, P, ...]

-사용 가능한 최대 가로너비를 사용한다. (크기지정 가능)- 기본값이 width:100%; height:0;

-수직으로 쌓인다.

<div>안녕?</div> 를 다섯개 작성 시 수직으로 '안녕' 5개가 출력된다.

-여백 개념(마진, 패딩)을 모두 자유롭게 사용 가능.

 

 

2.인라인 요소 [SPAN, IMG, ...]

-필요한 만큼의 가로너비를 사용한다.(크기지정할 수 없음) ex) #<span> 이만큼 </span># 이라고 하면 '이만큼'이라는 문자를 감싸는 만큼의 너비를 가진다.

-수평으로 쌓인다

<span>안녕?</span> 을 다섯개 작성 시 수평으로 '안녕' 5개가 출력된다.

 

-margin, padding의 top, bottom의 기능의 작동이 완벽하지 않다.

 

 

블록 요소와 인라인 요소를 서로 변경하는 방법                                                                                            display: inline/block;