[CSS] display에 대해서

display의 속성

1. block (태그별 기본값) : 상자 요소
2. inline (태그별 기본값) : 글자 요소
3. inline-block(태그별 기본값) : 글자 + 상자 요소
4. flex : 플렉스 박스 (1차원 레이아웃) 수평정렬, 수직정렬중 하나를 사용합니다
5. grid : 그리드 (2차원 레이아웃) 행과 열 두가지를 사용합니다.
6. none : 화면에서 사라짐
7. table, table-row, table-cell 등등..

See the Pen display by J-Plum (@J-Plum) on CodePen.

display : block 추가전

span 태그는 기본적으로 inline입니다. inline의 특성상 width와 height를 가질 수 없습니다.

하지만 display: block를 사용하면서, width와 height를 가질 수 있게 되었습니다.