7장
1분 퀴즈
1. ⑤
해설_ display 속성값은 flex나 inline-flex 중 어느 값이든 상관없습니다. 중요한 건 justify-content 속성값과 align-items 속성값을 center로 지정하는 것입니다.
2. ⑤
해설_ flex-grow 속성은 있지만 grid-grow 속성은 없습니다.
3. ①
해설_ 최소 기준을 적용하려면 min-width를 사용해야 합니다.
셀프체크
1. 플렉스 컨테이너의 크기는 (160px × 3) + (10px × 2) = 500px입니다. flex 속성값을 적용하면 플렉스 아이템이 플렉스 컨테이너를 넘치게 됩니다. 그래서 flex-wrap 속성으로 줄 바꿈하고 justify-content 속성을 사용해 주축 방향으로 균일하게 정렬합니다.
07/selfcheck/correct/self1_correct.html
<style>
.flex-container{
display:flex;
width:500px;
flex-wrap:wrap;
justify-content:space-between;
}
figure{
width:calc(33% - 5px);
font-size:0;
margin:0;
margin-bottom:10px;
}
</style>
2. 그리드 아이템을 원하는 곳에 배치할 때 그리드 넘버를 이용하는 방법이 가장 간단합니다.
07/selfcheck/correct/self2_correct.html
<style>
.grid-container{
display:grid;
width:500px;
margin:0 auto;
color:white;
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
grid-template-rows:100px 100px 100px 100px;
grid-gap:10px;
}
.grid-item{
width:100%;
background-color:red;
}
.grid-item:nth-child(2n){
background-color:#bd4242;
}
.item2{
grid-column:2/4;
grid-row:1/3;
}
.item3, .item5{
grid-column:4/6;
}
</style>
3. 미디어 쿼리를 이용해 해상도에 맞게 그리드 아이템을 다시 배치하면 됩니다.
07/selfcheck/correct/self3_correct.html
@media (max-width:500px){
.grid-container{
width:100%;
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:100px 100px 100px 100px 100px;
}
.item3,.item5{
grid-column:unset;
}
.item10{
grid-column:1/4;
}
}