[React] 당근마켓 클론코딩 - 미디어 쿼리 적용 맛보기

미디어쿼리를 작성해서 인터넷 창의 크기에 따라 다르게 화면 구성을 하도록 적용해봤다.

 

@media screen and (max-width: 1125px) {
    .area1 {
        display: block;
    }
 
    .text1 {
        margin-left: 100px;
        margin-bottom: 50px;
    }
 
    .image1 {
        margin-left: 100px;
    }
 
    .area2 {
        display: block;
        margin-bottom: 50px;
    }
 
    .image2 {
        margin-left: 50px;
    }
 
    .area3 {
        display: block;
    }
 
    .text3 {
        margin-left: 100px;
        margin-bottom: 50px;
    }
 
    .image3 {
        margin-left: 100px;
    }
 
    .area4 {
        display: block;
        margin-bottom: 50px;
    }
 
    .image4 {
        margin-left: 100px;
        margin-bottom: 50px;
    }
 
    .text4 {
        margin-left: 100px;
    }
}

먼저 Home 페이지에 적용된 미디어쿼리다.
1125px 이하라면 area 영역마다 display: block; 를 적용하면 요소들 앞 뒤로 줄바꿈해준다.
그리고 각각의 요소들의 margin 영역을 늘려서 적절한 위치로 적용시킨다.

 

@media screen and (max-width: 1090px) {
    .container {
        justify-content: space-between;
    }
 
    .gaji {
        margin-left: 30px;
        margin-right: 30px;
    }
    .menus {
        display: none;
    }
}

 

header에서 창 크기가 1090px 이하면 menu 요소들의 display를 none으로 적용해서 아예 안보이도록 한다.