IT/HTML&CSS
[HTML/CSS] div와 div 사이 간격 조정하기
hi.anna
2025. 2. 28. 06:59
CSS로 <div>와 <div> 사이 간격 조정하기
div와 div 사이의 간격을 조정하는 방법은 여러 가지가 있습니다.
주로 CSS의 margin, gap(flexbox, grid) 속성을 사용합니다.
1. margin 사용하기
가장 일반적인 방법으로, margin을 사용하여 두 div 사이의 간격을 조정할 수 있습니다.
margin-bottom: 20px;
- 아래쪽 간격을 조정합니다.
- margin-top, margin-left, margin-right 등을 사용해 각각의 방향에 간격을 줄 수 있습니다.
2. flexbox에서 gap 사용하기
flexbox 레이아웃을 사용할 때는 gap 속성을 사용하면 더욱 깔끔하게 간격을 조정할 수 있습니다.
display: flex;
gap: 20px;
- flex와 gap을 사용하면 margin 없이도 자연스럽게 간격이 조정됩니다.
flex-direction: column;
- 세로 방향 정렬
3. grid에서 gap 사용하기
CSS Grid 레이아웃에서도 gap 속성을 사용하면 간격을 쉽게 조정할 수 있습니다.
Grid에서는 gap이 row-gap과 column-gap 모두에 적용됩니다.
반응형