[CSS] 모바일에서 div 숨기기 (미디어 쿼리)

개요

블로그에 TOC달아뒀었는데, 이게 모바일에서 위치가 이상하게 잡힌다는걸 지금알았다. (달아놓은지 n년인거같은데;)

• 부트스트랩 css가 적용되어있다면 div class='visible-md' 만 기술해도 효과를 볼 수 있다. (상세보기)
• 아니면 미디어 쿼리를 사용

상세

 #media-320, #media-768, #media-1024, #media-1025 {
    display: none;
    height: 0px;
    overflow: hidden;
}
@media all and (max-width: 320px) {
    #media-320 { display: block; }
}
@media all and (min-width: 321px) and (max-width: 768px) {
    #media-768 { display: block; }
}
@media all and (min-width: 769px) and (max-width: 1024px) {
    #media-1024 { display: block; }
}
@media all and (min-width: 1025px) {
    #media-1025 { display: block; }
}

<!-- HTML -->
...
<div id='media-1024'>
...

참고자료

• https://log.designichthus.com/11