사이드바

[미니 프로젝트] 레이아웃

+ 결과물

이 페이지의 사이드바는 브라우저의 min-width가 769px 이상일 때 등장한다.

1-1 CSS

HTML에 두 개의 class를 부여하고 CSS 미디어 쿼리로 각 class에 속성을 선언했다.

<div class="sidebar1 mobile-hidden">사이드바</div>

<style>
    /* 데스크탑 전용 sticky */
    @media (min-width: 769px) {
        .sidebar1 {
            position: sticky;
            top: 5rem;
        }
    }

    /* 모바일에서 숨기기 */
    @media (max-width: 768px) {
        .mobile-hidden {
            display: none !important;
            /* 워드프레스 기본 스타일 덮어쓰기 */
        }
    }
</style>

+ 정리

이번 글에서는 모바일에서 숨겨지는 사이드바를 만드는 법을 알아봤다.