display

요소의 화면(보여짐) 특성

• 각 요소에 지정되어 있는 값
  block : 상자(레이아웃) 요소
  inline : 글자 요소
  inline-block : 글자 + 상자 요소
  기타 table, tale-row, table-cell , table-cell 등...
• 따로 지정해서 사용하는 값
  flex : 플렉스 박스 (1차원 레이아웃)
  grid : 그리드 (2차원 레이아웃)
  none : 보여짐 특성 없음, 화면에서 사라짐

HTML

<span>Hello world!</span>

CSS

body {
  margin: 20px;
}

span {
  width: 120px;
  height: 30px;
  background-color: royalblue;
  color: white;
  display: block;
}

span 태그는 인라인 요소라서 width, height를 조정할 수 없지만, display속성의 block값으로 값을 조정할 수 있게 했다
=> 인라인 요소를 크기를 조정하려면 아래 속성, 값을 사용
display: block;
(인라인 요소는 글자크기에 맞춰서 크기가 결정)