[CSS] 미디어 쿼리에서 기존 display 속성을 없애기

기본 스타일에서 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 속성에 대한 더 자세한 내용은 다음 블로그를 참고해주세요.

 

---

읽어주셔서 감사합니다:)