display

모든 요소는 딱 한 개의 display 값을 갖고 있다.

display 종류

1.inline  2. block  3. inline-block 4. flex  5. list-item 6.none

 

 

inline display

inline 요소들은 다른요소들과 같은 줄에 머무르려고 하는 성형과, 필요한 만큼의 가로 길이만 차지하는 성향이 있다.

inline 요소 종류

<span>, <a>, <b>, <i>, <img>, <button>

 

block display

block 요소들은 다른 요소들과 독단적인 줄에 가려고 하는 성향과, 최대한 많은 가로 길이를 차지하는 성향이 있다.

block 요소 종류

<div>, <h1>~<h6>, <p>, <nav>, <ul>, <li>

 

block요소들은 가로길이와 세로 길이를 직접 설정가능하다. 하지만 inlin요소들은 자동으로 설정된다.(inline 요소들은 가로,세로 길이의 개념이 없는 것이다.)

 

inline-block : inline 요소처럼 같은 줄에 머무르면서 block 요소처럼 가로, 세로 길이 설정 가능하다.

 

vertical-align

vertical-align: middle; 속성은 인라인 또는 인라인블록 요소에 적용된다.