Display 속성

HTML Tag(Element)는 크게 2가지 속성(property)으로 구분된다.

1. block

2. inline

 

이 속성들 간의 대표적인 차이는 공간을 차지하는 기준이라고 볼 수 있다.

 

 

이러한 속성 값들을 display 프로퍼티로 지정할 수 있다.

 

display: block;

Block 속성을 가지고 있는 HTML Tag들은 전체 가로폭(width)을 100% 차지하기 때문에 항상 새로운 줄(line)부터 시작한다.

->Block은 주로 Tag들을 수직으로 쌓아올릴 때 사용

 

display: inline;

Inline 속성을 가지고 있는 HTML Tag들은 자신이 필요한 영역만큼만 공간을 차지하기 때문에 새로운 줄부터 시작하지 않음

-> Inline, 일렬로 늘어서있는

 

그 외에 inline-block, flex, grid emd 다양한 속성들이 존재하다.