JooTC부트스트랩 4 화면 표시 속성
부트스트랩에서 특정 디바이스의 가로 폭 크기에 대해 해당 클래스가 포함된 태그를 가리거나 보이도록 하는 방법이 있습니다.
부트스트랩 3 이전 버전을 사용했다면 .xs-hidden, .sm-hidden, .lg-visible과 같은 클래스를 아실 것입니다. 그러나 최근 업데이트 된 부트스트랩 4 버전 부터는 해당 클래스를 더 이상 지원하지 않게 되었습니다.
그렇다면 어떤 식으로 원하는 요소를 특정 크기에 따라 숨기거나 나타나게 할 수 있을까요?
부트스트랩 4.x부터의 디스플레이 속성 표시 방법은 아래 예시와 같이 변경되었습니다.
<!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과 같이 사용되며 특정 디바이스 크기에 대해 두 클래스를 조합해서 사용해야 합니다. 자세한 사용 방법은 아래 표를 참고해주시면 됩니다.
| 화면 크기 | Class |
|---|---|
| 모든 화면에서 숨기기 | .d-none |
| xs 크기에서만 숨기기 | .d-none .d-sm-block |
| sm 크기에서만 숨기기 | .d-sm-none .d-md-block |
| md 크기에서만 숨기기 | .d-md-none .d-lg-block |
| lg 크기에서만 숨기기 | .d-lg-none .d-xl-block |
| xl 크기에서만 숨기기 | .d-xl-none |
| 모든 화면에서 보이기 | .d-block |
| xs 크기에서만 보이기 | .d-block .d-sm-none |
| sm 크기에서만 보이기 | .d-block .d-sm-none .d-md-none |
| md 크기에서만 보이기 | .d-block .d-md-none .d-lg-none |
| lg 크기에서만 보이기 | .d-block .d-lg-none .d-xl-none |
| xl 크기에서만 보이기 | .d-none .d-xl-block |
관련 문서
- BootStrap 4 Display property – http://getbootstrap.com/docs/4.1/utilities/display
.d-none.d-md-none 클래스는 어떤 경우에 사용하나요?