오늘은 요소의 성격을 변경시킬 수 있는 display 속성에 대해 정리를 해보려고 한다.

display 속성 이란?

• 요소가 가지고 있는 박스의 성격을 변경할 때 사용
• none : 화면에서 사라짐, 스크린 리더등에서 접근이 안될 수 있음
• inline : block 요소 -> inline 요소로 변경
• block : inline 요소 -> block 요소로 변경
• inline-block : inline 요소처럼 배치되면서 block요소의 속성(width, height, padding, margin)을 사용할 수 있는 속성
• 그외 flex(1차원 레이아웃), grid(2차원 레이아웃)

---

아래는 inline/block 요소 간략하게 정리한 내용

글자와 상자

요소가 화면에 출력되는 특성으로 크게 2가지로 구분됨

1. 인라인(inline)요소 : 글자를 만들기 위한 요소들
   • 요소가 수평으로 쌓임
   • width와 height값을 지정해도 적용되지 않음
   • margin 위/아래 사용불가, 좌/우만 가능
   • padding 위/아래 사용불가, 좌/우만 가능

2. 블록(block)요소 : 상자(레이아웃)를 만들기 위한 요소들
   • 요소가 수직으로 쌓임
   • width, height, margin, padding 모두 적용 가능