display
Last updated
Last updated
display 속성은 해당 요소가 표시되는 레이아웃을 설정한다. 다양한 종류의 레이아웃이 존재하며, 특정 태그만을 위한 레이아웃도 존재한다(e.g:table-cell, list-item). 크게 다음과 같이 분류할 수 있다.
inline 방식의 배치
block 방식의 배치
flex 방식의 배치
grid 방식의 배치
배치
flex와 grid는 해당 내용의 문서에서 다룬다.
flexboxinline 방식으로 설정하면 inline 방향으로 요소가 나열된다. 다음 속성들이 해당한다.
display : inline
display : inline-block
display : inline-flex
block 방식으로 설정하면 block 방향으로 요소가 나열된다. 다음 속성들이 해당한다.
display:block
block 속성은 폭을 지정할 수 있으므로 inline-block, block만 폭 설정이 적용되는 것을 확인할 수 있다.
none으로 설정된 항목은 존재하지만 화면에 배치되지 않는다.
