1) 학습한 내용

헤더의 h1태그와 nav를 1, 2단으로 나누도록 media 쿼리설정

• 1
• 2
• 3

반응형웹 공부하기

@media (min-width:768px){ .intro{ height: 160px; flex-direction: column; position: static; } .intro h1, .intro nav{ width: 100%; } .main{ padding-top: 0; background-color: antiquewhite; } p{ font-size: 24px; } } grid layout

#wrapper{
display:grid; /grid, gird-inline /
grid-template-columns: repeat(2, 200px);
grid-template-rows: minmax(220px auto);
grid-gap: 10px 10px;
justify-content: center;
}
/ 900px 이상 /
@media (min-width:900px){
#wrapper{
justify-content: center;
grid-template-columns: repeat(3, 200px);
}
}
/ 1100px 이상 /
@media (min-width:1100px){
#wrapper{
justify-content: center;
grid-template-columns: repeat(4, 200px);
}
}
어려웠던 점, 해결하지 못한 것
grid layout 부분에서 막힘

해결 방법
연습,반복,과제

4.학습소감

복습을 열심히