XETOWN

질문/답변

웹에 관련된 질문과 답변을 나눌 수 있습니다.
질문/답변
2016.10.12 17:42

반응형 css 질문입니다.

조회 수 55 댓글 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가 버벅거려요ㅜ
  • ?
    휘즈 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 브라우저에서 (모바일은 대부분 제대로 해석하지요..) 안 좋은 결과가 나타날걸요..?
  • ?
    휘즈 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
번호 분류 제목 날짜
공지 질문/답변 답변을 확실히 받기위한 질문자 지침서 20 2015.12.31
3019 질문/답변 다음글 이전글을 플로팅으로? 띄우고 싶습니다. 1 file 2016.10.14
3018 질문/답변 라이믹스 알림센터의 쪽지 알림 닉네임을 익명으로 설정할 수 있나요? 2016.10.14
3017 질문/답변 네이버 소유확인이 안되는경우는? 2 2016.10.13
3016 질문/답변 언어파일을 사용자 정의로 불러 올 수 있을까요? 5 2016.10.13
3015 질문/답변 제가 백업본을 9월말꺼로 이전했는데! 2 2016.10.13
3014 질문/답변 XE의 페이지들은 article이 아닌 website로 분류를 하는데요. 맞는걸까요? 16 2016.10.13
3013 질문/답변 리눅스 쉘 스크립트 잘 아시는분 이거 하나만 만들어 주세요 3 2016.10.13
3012 질문/답변 문서 기본설정 > 조회수 증가 방법변경이 왜 자꾸 혼자서 바뀔까요;; 5 2016.10.12
3011 질문/답변 출석부 구버전에서 총 출석일수와 연속 출석일수가 어긋났습니다. 2016.10.12
3010 질문/답변 혹시 보안 자문을 구할만한 곳이 있을까요? 2 2016.10.12
» 질문/답변 반응형 css 질문입니다. 5 2016.10.12
3008 질문/답변 게시글 등록시 자동 복사 기능 간단한가요? 7 2016.10.12
3007 질문/답변 라이믹스의 '시스템설정'-'고급설정'에서 '기본URL'입력에서 '한글도메인'을 입력할 수 없습니다... ㅠㅠ 3 2016.10.12
3006 질문/답변 이거는 진짜 무슨 문제일까요? ㅠㅠ 4 2016.10.12
3005 질문/답변 리캡챠 2.0 적용후 기존 안내 문구 수정 어디서 해야할가요? 7 file 2016.10.12
3004 질문/답변 확장변수 여러줄입력칸(textarea) 줄바꿈시 2016.10.12
3003 질문/답변 라이믹스 버전 변경된 파일만 패치하려면 어떻게 하나요? 1 2016.10.12
3002 질문/답변 라이믹스에서 최근에 링크가 새창이 아닌 현재창으로 열리네요 7 2016.10.12
3001 질문/답변 회원제 모듈 유료말고 무료로 배포된것은 없나요? 2016.10.12
3000 질문/답변 웹뷰를 제작해보려고 하는데요. 애드센스/애드몹 어찌해야할까요? 3 2016.10.11
Board Pagination Prev 1 ... 14 15 16 17 18 19 20 21 22 23 ... 169 Next
/ 169
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...