css display 속성에는 inline, inline-block, block, none, flex 등이 있음
inline
- 콘텐츠 크기 만큼만 해당 콘텐츠를 감싸는 박스의 크기가 연동되어 결정됨
- horizontally 정렬하는 경우 주로 사용
- 전체적인 배치 flow에 영향을 최소화 하면서, 전체 구조(문장) 내에서 일부 문장(단어)에 대한 효과를 주고자 하는 경우 자주 사용
- default 값이 inline인 element는 아래와 같음
<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>
block
- 기본적으로 해당 element가 존재하는 가로폭을 모두 차지하고, width를 줄여 조절하더라도 다음 element는 다음 줄에 추가됨
- defalut 값이 block인 element는 아래와 같음
<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>
inline-block
- block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있음
- Internet Explorer 7 이하에서는 사용할 수 없음
https://seungwoohong.tistory.com/23
https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1
21c Carpenter