CSS display

Display

요소가 가지는 상자의 외부 레이아웃이 인라인인지 블록인지를 결정하고, 자식 요소들을 위한 내부 레이아웃을 결정한다.

 

외부 레이아웃

• block: 일반 흐름에 있을 때 요소 앞뒤에 줄바꿈 생성
  • width를 가지지만, 줄바꿈이 일어나기 때문에 나머지 영역을 margin으로 채움
  • height는 지정하지 않으면 자식 요소 크기의 합을 사용
  • WHPBM
• inline: 줄바꿈을 생성하지 않고 공간이 있으면 다음 요소는 같은 줄에 위치

 

내부 레이아웃

• flow: 블록 및 인라인 레이아웃을 통한 내부 요소 배치
• flow: 루트 요소에 대한 위치를 정의하는 새로운 BFC를 설정하는 블록 요소 상자 생성
• table: <table>처럼 동작하는 블록 요소 상자
• flex: flexbox model에 따라 요소를 배치하며 블록 요소처럼 동작
• grid: grid model에 따라 요소를 배치하며 블록 요소처럼 동작
• ruby: ruby formatting model에 따라 <ruby>처럼 요소를 배치하며 인라인 요소처럼 동작