부트스트랩에서 특정 디바이스의 가로 폭 크기에 대해 해당 클래스가 포함된 태그를 가리거나 보이도록 하는 방법이 있습니다.
부트스트랩 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 |
리눅스 명령어 - kill, killall 리눅스 kill 명령어는 특정 프로세스를 종료해주는 명령어입니다. 백그라운드에서 실행되고 있는…
JavaScript는 역사가 긴 스크립트 프로그래밍 언어입니다. 세월이 흐르면서 많은 자바스크립트 표준이 만들어졌고, 현재는 많은 문법적…
NodeJS 테스트 프레임워크인 Mocha는 비동기 테스트를 지원합니다. 간혹 특정 테스트 스크립트를 작성하고 실행하면 아래와 같이…
언제부턴가 윈도우 11을 처음 설치할 때 마이크로소프트(Microsoft) 계정 로그인을 강제로 요구하게 되었습니다. 물론 마이크로소프트 계정이…
애플 에어팟 프로 2 (AirPods Pro 2) 케이스에는 스피커가 내장되어 있습니다. 그런데 간혹 아무 것도…
View Comments
.d-none.d-md-none 클래스는 어떤 경우에 사용하나요?