기본 스타일에서 display를 어떤 속성으로 설정하고, 미디어 쿼리에서 해당 속성을 제거하려면 display 속성을 초기값으로 설정해야 합니다.
display 속성의 초기값은 block입니다.
따라서, 특정 미디어 쿼리에서 display: block을 설정하면 기본 스타일이 적용되지 않게 됩니다.
예를 들어, display를 flex로 설정한 뒤에 미디어 쿼리에서 flex를 적용하고 싶지 않다면,
아래와 같이 display를 block으로 변경해주면 됩니다.
/* 기본 스타일 - 데스크탑 기준 */
nav {
display: flex; /* 기본을 flex 속성으로 지정 */
padding-left: 32px;
padding-right: 32px;
}
/* Tablet: 1199px 이하 */
@media screen and (max-width: 1199px) {
nav {
display: block; /* flex를 block으로 변경 */
padding-left: 24px;
padding-right: 24px;
}
}
/* Mobile: 767px 이하 */
@media screen and (max-width: 767px) {
nav {
display: block; /* flex를 block으로 변경 */
padding-left: 16px;
padding-right: 16px;
}
}속성을 없앤다고 생각하여 display: none; 이라고 쓰면 안됩니다.(제 얘깁니다)none은 해당 요소를 보이지 않게 하는 속성입니다.
display 속성에 대한 더 자세한 내용은 다음 블로그를 참고해주세요.
읽어주셔서 감사합니다:)
