[HTML + CSS] display의 종류

1. inline

2. block

3. inline-block

4. flex 

5. list-item

6. none

 

1. inline :

   ①  앞, 뒤 텍스트와 같은 줄에 머물고(줄바꿈을 하지 않고), 가로 길이는 필요한 만큼만 차지

   ②  width, height 값을 설정할 수 없다. (※ img 제외)

       (width=auto, height=auto)

• <span>

• <a>
• <b>
• <i>
• <img>
• <button>             ... 등

2. block : 

     ① 단독의 줄을 차지. 최대한 많은 가로 길이를 가지려 함

     ② width, height 값을 가지지만, 그 줄 안에는 다른 요소가 올 수 없다. 

 

• <div>
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• <p>
• <nav>
• <ul>
• <li>                        ... 등

3. inline-block:

     ① inline 요소처럼 같은 줄에 머무름

     ② block 요소처럼 width, height 값을 가짐

 

4. display 바꾸기

 

      i {

          display: block;  

      }

 

     div {

          display: inline; 

       }

   

      i  {

           display: inline-block; 

           width: 200px; 

           height : 100px ; 

       }