모든 요소는 딱 한 개의 display 값을 갖고 있습니다. 가질수 있는 display의 종류는 아래와 같습니다.
- inline
- block
- inline-block
- flex
- list-item
- none
display 속성에서 block & inline 에 대해 알아봅시다.
block display
- 새로운 줄에서 시작하려는 경향이 있다.
- 가로 길이는 최대한 많이 차지하려고 하는 성향.
- ex)
<div>,<h1>,<p>,<nav>,<ul>,<li>
inline display
- 가로 길이는 필요한 만큼만 차지하는 성향
- 다른 요소들과 같은 줄에 머무르려고 하는 성향
- ex)
<i>,<b>,<img>,<span>,<a>,<button>
inline-block
- 다른 요소들과 같은 줄에 머무를 수 있으면서
- width, height를 지정할 수 있다.
참고로 inline 요소는 가로 세로가 자동으로 설정됩니다.
