제가 오늘 사이쪽의 배너를 모바일에서는 나타나면 안되서 아래와 같은 css를 추가했는데요.

 

@media (min-width: 1000px) {
  .pcad {
    display: none;
  }
}

 

위와 같이 하니 반대 현상이 나타나서..

 

@media (max-width: 1000px) {
  .pcad {
    display: none;
  }
}

 

이렇게 해주니 모바일에서는 안나오고 컴에서만 나오게 처리가 되었습니다.

 

궁금한게 저는 이런 조건에서는 안보이게 하고 싶다라고 해석하고 1000px 보다 작으면 아래 가 적용되라~ 라고 이해했는데 그게 아닌가 봅니다.

 

1000px 이하에서는 보이지 않게 한다의 의미는 정확히 어떻게 작성하는 것인가요? 결과적으로는 지금 아래쪽으로 하고 동작은 합니다.

 

 

  • profile
    지금 현상을 보고 구문을 재해석 해보니....
    0부터 최대 1000px 까지는 숨겨라 이게 맞는거군요.
  • profile
    보통은 screen 기준으로 코딩하지 않나요?
    device랑 print랑 미묘한 차이가 있어서..
    @media screen and (max-width: 1000px)

    근데 이런 경우는 저도 가끔 헷갈려요ㅋㅋ
    매번 스타일링할 때마다 바로바로 코딩을 못하고,
    max-width: 1000px면 '최대 1000이니까 1000 이하지!', min-width면 '최소 1000이니까 1000 이상이지!', 이렇게 머릿속으로 한번씩 더 프로세스를 거칩니다;;;
    게다가 display 속성이 none이면 이중부정도 아니고 뭔가 삼중부정 같아서 뇌내 CPU가 버벅거려요ㅜ
  • profile

    mobile first!!

    .pcad {display:none}
    @media (min-width: 1000px) {
    .pcad{display:block}
    }

  • profile ?
    모바일용 CSS를 먼저 쓰시면.. media 쿼리를 제대로 해석하지 않는 PC 브라우저에서 (모바일은 대부분 제대로 해석하지요..) 안 좋은 결과가 나타날걸요..?
  • ? profile
    css3 media query는 ie8이하만 제외하고 모두 지원하지요.
    css3 media query를 지원하지 않는 브라우저에서는 어떤 방식으로 쓰던 문제가 발생합니다.

    하지만 xe에는 기본으로 respond.js가 적용되어 있어 ie8 이하에서도 문제가 없는 것으로 알고 있습니다.

    media query는 여러방법으로 기술할 수 있는데
    mobile first라는 것은 media query를 기술하는 하나의 트랜드이고, 부트스트랩등 대부분의 프레임웍이 채택하고 있는 방법입니다.
    현실적으로 이렇게 작성하는 것이 가장 합리적이고 간결하다고 생각됩니다.