부트스트랩 기초 브레이크포인트 이해하기 7편

때로는 수동으로 브레이크포인트를 사용하고 뷰포트 폭에 따라 레이아웃/스타일을 조정해야 할 때가 있습니다.

일관성을 유지하기 위해 Bootstrap 브레이크포인트를 따라야 합니다.

<style>
    /*  X-Small devices (portrait phones, less than 576px) */
    body {
        background: white;
    }

    /* `sm` applies to small devices (portrait phones, more than 575px) */
    @media (min-width: 576px) {
        body {
          background: red;
        }
    }

    /* `md` applies to medium devices (tablets, more than 767px) */
    @media (min-width: 768px) {
        body {
          background: blue;
        }
    }

    /* `lg` applies to large devices (desktops, more than 991px) */
    @media (min-width: 992px) {
        body {
          background: green;
        }
    }

    /* `xl` applies to extra large devices (large desktops, more than 1199px) */
    @media (min-width: 1200px) {
        body {
          background: yellow;
        }
    }

    /* `xxl` applies to extra extra large devices (larger desktops, more than 1399px) */
    @media (min-width: 1400px) {
        body {
          background: purple;
        }
    }
</style>

뷰포트를 작게 만들어 보세요. 그러면 색깔이 어떻게 바뀌는지 확인할 수 있어요.