css 정리 4 - display

< display >

1. inline display

2. block

3. inline-block

4. flex

5. list-item

6. none

=> 정해진 display 요소 바꿀 수 있음.

대부분의 요소들은 inline과 block 에 해당함.

 

1. inline display: 같은 줄에 머무르려함/ 필요한 만큼의 가로길이만 사용

 해당 태그 : <span>, <a>, <b>, <i>, <img>, <button>

 

2. block display: 독단적인 줄에 가려함/ 최대한 많은 가로길이 차지

 해당 태그 : <div>, <h1>~<h6>, <p>, <nav>, <ul>, <li>

 

3. inline-block: 

 - inline display는 내용에 따라서만 width, height 를 갖기 때문에 바꿀 수 없음 => inline - block 사용해야함

 - css

  i{

   display: inline-block;

   width: 200px; /* inline-block 요소가 있기 때문에 적용됨. */

  } 

 

+ <img> 태그 => inline 요소이기 때문에 상위요소에서 text-align 으로 인식함.