미디어쿼리
- CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용 (if문과 비슷한 개념)
@media (조건) {
스타일
}스타일부분에는 일반적인 CSS코드가 들어가는데, 조건이 만족될 때는 스타일이 적용되고, 만족하지 않으면 스타일이 무시된다.
1단계 : 탑바와 모바일 탑바가 스위치, 미디어쿼리
방법1
-css-
// 768px 이상에서만 '탑바'가 보임
@media (max-width: 767px) {
.visible-on-md-up {
display: none;
}
}
// 767 이하에서만 '모바일 탑바'가 보임
@media (min-width: 768px) {
.visible-on-sm-down {
display: none;
}
}방법2
-html-
<header class="top-bar hidden md:block">탑바</header>
<header class="mobile-top-bar md:hidden">모바일 탑바</header>2단계 : 탑바와 모바일 탑바 구현
1배 - 모바일 탑바
0.5배 - 탑바
3단계 : 클릭시 모바일 사이드바의 배경 노출
4,5단계 : 사이드바 노출시 콘텐트가 화면 우측에서 등장, 닫기 버튼, pc화면에서 사이드바 숨기기
