display: 요소가 레이아웃 상에서 자리를 차지하는 방식을 정하는 속성
display 속성
- 엘리먼트가 block, inline 등 어떤 형태를 가질 것인지 정한다.
block inline inline-block 형태(너비) 라인 전체 콘텐츠 크기 콘텐츠 크기 크기 속성 적용(width, height) 가능 불가능 가능 마진(margin) 상,하,좌,우 좌,우 상,하,좌,우
block
- 상자로 취급, 한 줄에 하나만 배치 가능(기본 너비; width: 100%), 레이아웃을 구분하기 위해 사용(header, footer ..)
div,header,nav,section,article,footer,table(th,td),p,ul,ol,form,h1~h6등 .. → 블록 태그, 레이아웃을 잡는 데 사용
inline
- 텍스트처럼 취급, 한 줄에 여러 개 배치 가능(기본 너비: 들어있는 콘텐츠의 너비), 크기 값을 가질 수 없음
span,a,small,big,u,s,del,br,strong등 .. → 인라인 태그, 텍스트 서식을 만드는 데 사용
inline-block
- 한 줄에 여러 개 배치가 가능하며(inline), 크기 값, 상하좌우 마진을 가질 수 있음(block)
- img, input, button 등 ..
