본문 바로가기
  • purple-whale
반응형 웹사이트/Shilla Hotel

779px <width ≤1023px

by purple-whale purple-whale 2021. 1. 26.

@media screen and (max-width:1023px){
    // 변수 재선언
    .container {
        $w : 33.333%;
        article {
            width: $w;
            &:nth-child(1) { 
                width:$w*3;
                height: 400px;
            }
            &:nth-child(2) { 
                width:$w*2;
            }
            &:nth-child(4),
            &:nth-child(7),
            &:nth-child(10),
            &:nth-child(12) { 
                display: none;
            }
            &:nth-child(6) { 
                width:$w*2;
            }
            &:nth-child(8) { 
                width:$w;
            }
            &:nth-child(9) { 
                width:$w;
            }
        }
    }
}

가로 3칸 설정을 위해 변수 $w을 33.33%로 변경 합니다.

제거하고 싶은 아티클을 display:none; 으로 감춰줍니다.

댓글0