XETOWN

질문/답변

웹에 관련된 질문과 답변을 나눌 수 있습니다.
조회 수 67 댓글 5

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

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

    mobile first!!

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

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

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

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

List of Articles
번호 제목 글쓴이 날짜
공지 답변을 확실히 받기위한 질문자 지침서 4 람보 2017.05.04
3024 네이버 웹문서 미노출 질문 10 메비우스의닭 2016.10.15
3023 사이트 메뉴 클릭하면 팝업 가능하게 되나요? 2 BlackTeddyBear 2016.10.15
3022 스케치북 게시판 목록 글자 크기 와 폰트를 바꾸고 싶어요 5 pjk 2016.10.15
3021 아래 네이버웍스 메일 사용 문의 30 웹지기 2016.10.15
3020 파일캐시의 램디스크 설정 5 고라자 2016.10.15
3019 관리자 메인에 업데이트가 지워지질 않아요.. 2 file 구름이 2016.10.14
3018 게시판 검색이 너무 느립니다. 이성민 2016.10.14
3017 file 캐시 궁금점 1 날아라 2016.10.14
3016 admin@홈페이지주소.com 17 낙타 2016.10.14
3015 다음글 이전글을 플로팅으로? 띄우고 싶습니다. 1 file 낙타 2016.10.14
3014 라이믹스 알림센터의 쪽지 알림 닉네임을 익명으로 설정할 수 있나요? 고라자 2016.10.14
3013 네이버 소유확인이 안되는경우는? 2 마신 2016.10.13
3012 언어파일을 사용자 정의로 불러 올 수 있을까요? 5 고수군 2016.10.13
3011 제가 백업본을 9월말꺼로 이전했는데! 2 낙타 2016.10.13
3010 XE의 페이지들은 article이 아닌 website로 분류를 하는데요. 맞는걸까요? 16 웹지기 2016.10.13
3009 리눅스 쉘 스크립트 잘 아시는분 이거 하나만 만들어 주세요 3 윤설 2016.10.13
3008 문서 기본설정 > 조회수 증가 방법변경이 왜 자꾸 혼자서 바뀔까요;; 5 고수군 2016.10.12
3007 출석부 구버전에서 총 출석일수와 연속 출석일수가 어긋났습니다. 다이오니 2016.10.12
3006 혹시 보안 자문을 구할만한 곳이 있을까요? 2 bowon 2016.10.12
» 반응형 css 질문입니다. 5 웹지기 2016.10.12
Board Pagination Prev 1 ... 98 99 100 101 102 103 104 105 106 107 ... 254 Next
/ 254
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...