반응형일때 줄바꿈 적용하는 방법

원인

반응형으로 뷰포트의 너비가 줄어들때마다 원하는 뷰포트 구간에서 줄바꿈을 적용하고 싶었다.

처음에는 react-responsive 라이브러리를 이용해서 1200px 이상일때 , 768 ~ 1199px 일때 , 375 ~ 767px 일때의 코드를 모두 작성했고 특정 뷰포트에 도달 했을때 해당 코드를 보여주게 하였다.

하지만 줄바꿈 때문에 라이브러리를 사용하는게 맞을까 고민하게 되었다.

 

해결

미디어쿼리를 이용해서 특정 뷰포트에서 className에 따라 줄바꿈을 하도록 했다.

ex) .show-on-desktop-and-mobile은 375 ~ 1199px 에서 display: block 이고 1200px ~ 부터는 display : none 이 적용된다.

따라서 원하는 구간에 따라 줄바꿈을 적용 시킬 수 있게 된다.

@media (min-width: '1200px') {
        .show-on-desktop{
            display: block;
        }
        .show-on-desktop-and-tablet{
            display: block;
        }
        .show-on-desktop-and-mobile{
            display: block;
        }
        .show-on-tablet-and-mobile{
            display: none;
        }
        .show-on-tablet{
            display: none;
        }
        .show-on-mobile{
            display: none;
        }
    
    }
    
    @media (max-width: '1199.9px') {
        .show-on-desktop{
            display: none;
        }
        .show-on-desktop-and-tablet{
            display: block;
        }
        .show-on-desktop-and-mobile{
            display: none;
        }
        .show-on-tablet-and-mobile{
            display: block;
        }
        .show-on-tablet{
            display: block;
        }
        .show-on-mobile{
            display: none;
        }
    
    }
    @media (max-width: '767.9px') {
        .show-on-desktop{
            display: none;
        }
        .show-on-desktop-and-tablet{
            display: none;
        }
        .show-on-desktop-and-mobile{
            display: block;
        }
        .show-on-tablet{
            display: none;
        }
        .show-on-tablet-and-mobile{
            display: block;
        }
        .show-on-mobile{
            display: block;
        }
    
    }