Block vs Inline

대부분의 HTML element(이하 요소)는 block 요소이다.

예를 들어, <header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등이 모두 block 요소에 해당하는 태그들이다.

block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻이다.


반대로  inline 요소도 있다.
<span>, <a>, <img> 태그 등이 inline 요소이다.

inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다.



<blockr과 inline의 특성>
block은 새 줄에서 시작하며 영역이 좌우로 최대한이다.
inline은 텍스트만큼이 영역이며 새로운 줄이 아닌, 바로 옆에서 시작한다.


<특성 바꾸는 법>
*block to inlone: 

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
  
  
  
*inline to block:

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;