CSS에서 올바른 여백을 가진 타일 레이아웃
마진을 사용하여 문제 없이 실제로 작동하는 여백을 가진 타일 레이아웃을 만들어 봅시다. 처음에는 여백이 없는 다음과 같은 타일 레이아웃이 있다고 가정합니다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
width: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
margin을 사용하여 요소들 사이에
수평 여백을 만들어 봅시다.
이를 위해 모든 자식 요소에
margin-right를 10px 값으로 설정하고,
세 번째 자식마다 이 margin을 제거합니다.
세 번째 요소마다 선택하기 위해 매개변수를 설정한
nth-child 의사 클래스를 사용합니다.
여백을 위한 공간을 마련하기 위해 부모의 너비를
320px로 늘리고, 결과가 어떻게 나오는지
살펴봅시다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
width: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
margin-right: 10px;
border: 1px solid green;
}
.child:nth-child(3n) {
margin-right: 0;
}
:
자, 모든 것이 작동합니다. 마지막 행에 요소가 더 적도록 마지막 요소를 제거하고, 이 마지막 행에 문제가 없는지 확인해 봅시다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
width: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
margin-right: 10px;
border: 1px solid green;
}
.child:nth-child(3n) {
margin-right: 0;
}
:
한 줄에 두 개의 요소와 요소 사이
20px 간격을 가진 타일 레이아웃을 만드세요.
