bootstrap - 브라우저 크기 별 요소 hidden, visible

Yuri Lee·2020년 10월 30일
0

How it works

부트스트랩에서 특정 디바이스의 가로 폭 크기에 대해 해당 클래스가 포함된 태그를 가리거나 보이도록 하는 방법이 있다.

Examples

<!DOCTYPE HTML>
<html>
    <head>
    ...
    </head>
    <body>
        <div class="container">
            <div class="row">
                <!-- sm 사이즈의 디바이스에서는 가려짐 -->
                <div class=".d-sm-none .d-md-block col-12">
                    콘텐츠
                </div>
            </div>
        </div>
    </body>
</html>**텍스트**

d--none, d--block 과 같이 사용되며 특정 디바이스 크기에 대해 두 클래스를 조합해서 사용해야 한다.

Hiding elements

Screen SizeClass
Hidden on all (모든 화면에서 숨기기).d-none
Hidden only on xs (xs 크기에서만 숨기기).d-none .d-sm-block
Hidden only on sm (sm 크기에서만 숨기기).d-sm-none .d-md-block
Hidden only on md (md 크기에서만 숨기기).d-md-none .d-lg-block
Hidden only on lg (lg 크기에서만 숨기기).d-lg-none .d-xl-block
Hidden only on xl (xl 크기에서만 숨기기)).d-xl-none
Visible on all (모든 화면에서 보이기).d-block
Visible only on xs (xs 크기에서만 보이기).d-block .d-sm-none
Visible only on sm (sm 크기에서만 보이기).d-none .d-sm-block .d-md-none
Visible only on md (md 크기에서만 보이기).d-none .d-md-block .d-lg-none
Visible only on lg (lg 크기에서만 보이기).d-none .d-lg-block .d-xl-none
Visible only on xl (xl 크기에서만 보이기).d-none .d-xl-block

Reference:
https://jootc.com/p/201809291831
https://getbootstrap.com/docs/4.1/utilities/display/

profile
Step by step goes a long way ✨

0개의 댓글