부트스트랩에서 특정 디바이스의 가로 폭 크기에 대해 해당 클래스가 포함된 태그를 가리거나 보이도록 하는 방법이 있습니다.
부트스트랩 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 |
Xcode에서 iOS 애플리케이션을 빌드(Archive)하고 App Store Connect에 앱을 업로드하는 도중, 아래와 같은 에러가 발생하면서 더…
INSTALL_FAILED_INSUFFICIENT_STORAGE 문제 안드로이드 스튜디오에서 에뮬레이터를 실행하고 개발중인 애플리케이션을 실행하려 하면 로그 창에 아래와 같이 표시되면서…
리눅스 명령어 - kill, killall 리눅스 kill 명령어는 특정 프로세스를 종료해주는 명령어입니다. 백그라운드에서 실행되고 있는…
JavaScript는 역사가 긴 스크립트 프로그래밍 언어입니다. 세월이 흐르면서 많은 자바스크립트 표준이 만들어졌고, 현재는 많은 문법적…
NodeJS 테스트 프레임워크인 Mocha는 비동기 테스트를 지원합니다. 간혹 특정 테스트 스크립트를 작성하고 실행하면 아래와 같이…
View Comments
.d-none.d-md-none 클래스는 어떤 경우에 사용하나요?