CSS display : inline ; 과 display : block ;

 block 요소

HTML과 CSS에서 블록요소는 가로 공간 전부를 차지하며, 위 아래로 줄바꿈을 갖는 요소이다.

블록요소에는 <h1>, <p>, <li>, <div> 등이 있다.

 inline 요소

HTML과 CSS에서 인라인요소는 필요한 만큼의 가로 공간을 차지하며, 줄바꿈이 없는 요소이다.

인라인요소에는 <span>, <a> 등이 있다.

 display : inline ; → block 요소를 inline 요소로 바꾸기

가로로 쭈욱 펼쳐져 있고 줄바꿈이 있는 블록요소를 display 속성을 이용하여 인라인요소로 바꿀 수 있다. 변화를 줄 선택자를 지정하고 display : inline ;

 display : block ; → inline 요소를 block 요소로 바꾸기

가로 한 줄에 나열되어 있는 인라인요소를 display 속성을 이용하여 인라인 요소로 바꿀 수 있다. 변화를 줄 선택자를 지정하고 display : block ;