🗒 Display 속성

요소를 어떻게 보여줄지를 결정

block : 블록 박스
inline : 인라인 박스
inline-block : block과 inline의 중간 형태

📌 Block

기본적으로 가로 영역을 모두 채움
block 요소 다음 태그는 다음 줄로 변경됨
ex) header, footer, p, li, table, div, h1 ...

• block 특징을 가진 태그들은 width, height, margin, padding 줄 수 있음

📌 Inline

block과 달리 줄 바꿈이 되지 않음
inline 특징을 가진 태그들끼리는 같은 라인에 다음 요소를 연이어 위치 가능
ex) span, a, strong, img, br, input, select, textarea , button ...

• content 너비만큼 가로폭을 가지고 width, height 속성 설정이 불가능
• margin, padding은 좌우값만 적용시킬 수 있음

📌 Inline-block

block과 inline의 중간 형태
줄 바꿈이 되지 않지만 크기 지정 가능

• inline-block은 가로로 요소를 배치하며 나열하는 inline 요소의 특성과 width, height, margin, padding 등의 속성 설정이 가능한 block 요소의 특성을 모두 갖음