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