CSS display 프로퍼티 안에 다양한 값이 들어가지만, 이번 블로그에는 block, inline, inline-block 대해서만 다룰 것이다.
모든 HTML 요소는 CSS로
display프로퍼티를 지정해주지 않아도 브라우저가 자동으로 default 값을 부여한다.
1. Block
디폴트 값이 block인 요소 : p, form, h1~h6, table, ul, ol, li, div, 등
block 요소들은 새 줄에서 시작하고 좌우로 최대한 늘어난다. 늘어나는 것을 멈추기 위해서는 width 설정해주면 된다.
block 요소를 inline으로 변경하려면 CSS에서 display 프로퍼티를 inline로 설정하면 된다.
2. Inline
디폴트 값이 Inline인 요소 : span, a, img, input, button, 등
inline 요소들은 같은 줄에 나란히 존재한다.
inline 요소를 block 요소로 변경하려면 CSS에서 display: block을 설정하면 된다.
위 예시에 "무계획이야." 만 inline 요소인 <span> 안에 넣어 두고 CSS에서 display 값으로 block을 설정하면 이렇게 다음 줄로 혼자 내려가게 된다.
3. Inline-block
inline과 block 요소들의 특징을 나눠가진 display 프로퍼티의 또 다른 값.
inline답게 새로운 줄로 넘어가지 않고 다른 요소들과 나란히 한 줄에 위치한다.block답게width,height,padding,margin을 적용해서 크기를 조절할 수 있다.
