Display 속성
요소를 어떻게 보여줄지 레이아웃을 결정하는 속성
- block
div, p, h, li, form 등이 해당
가로 영역을 모두 차지하며 항상 줄 바꿈이 되어 새로운 라인에서 시작
width와 height 속성 지정 가능
- inline
span, a, b, i, img 등이 해당
block과 달리 줄 바꿈이 되지 않고 width, height, 여백을 지정할 수 없음
- inline-block
요소 자체는 inline요소처럼 동작하지만 (줄바꿈 x)
해당 요소 내부에서는 블록 요소처럼 동작 (크기나 여백 지정 가능)
- none
요소를 렌더링 하지 않도록 설정하고 영역도 차지하지 않게 함
- flex
아이템들을 가로 방향 혹은 세로 방향으로 배치할 수 있는 방식
- grid
flex와는 다르게 2차원으로 배치하는 방식으로 column과 row의 비율이나 크기를 지정
grid-template-rows : 가로에 배치할 셀들의 비율이나 크기를 지정
grid-template-columns : 세로로 배치할 셀들의 비율이나 크기를 나타냄
<style>
.wrapper {
display: grid;
grid-template-rows: 20px 40px;
grid-template-columns: 30px 35px;
}
.item {
border: 1px solid blue;
}
</style>
<body>
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
개발과 지식의 성장을 즐기는 개발자