테스트 사이트 - 개발 중인 베타 버전입니다
SIR

[반응형웹] - 미디어쿼리 (media Query) 간단한 예제

컴프
프로필 보기이 회원 글보기
 · 9년 전 · 7617 · 1

[반응형웹] - 미디어쿼리 (media Query) 간단한 예제  

 

1. 미디어 쿼리 웹 사이트 예제

    http://mediaqueri.es/

2. 미디어 쿼리 웹 사이트 하나

    http://stuffandnonsense.co.uk/

 

 

예제 1

  1. <!DOCTYPE HTML>
  2. <html lang="ko">
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale1.0,user-scalable=no">
  6.  
  7. <title>반응형 웹 </title>
  8. <link rel="stylesheet" href="style.css">
  9. </head>
  10.  
  12.     <div id="layer1" class="cLayer" style="background-color:#ff6666">메뉴1</div>
  13.     <div id="layer2" class="cLayer" style="background-color:#ffcc33">메뉴2</div>
  14.     <div id="layer3" class="cLayer" style="background-color:#ffff00">메뉴3</div>
  15.     <div id="layer4" class="cLayer" style="background-color:#33ff66">메뉴4</div>
  16.  
  17.    
  18. </body>




예제 2
  1. @charset "utf-8"
  2.  
  3. /* 모든 Device를 위한 공통 로드 */
  4.  
  5. .cLayer{
  6.     floot: left;
  7.     padding : 1.0em;
  8. }
  9. /* 모바일 Device : 0 ~ 640 */
  10. @media screen and (max-width: 640px){
  11.  
  12.     html{
  13.         background: red;
  14.  
  15.     }
  16.     .cLayer{
  17.         padding: 1.0em;
  18.     }
  19.  
  20. }
  21.  
  22. /* Tablet Device : 641 ~ 768 */
  23. @media screen and (min-width:641px){
  24.  
  25.     html{
  26.         background: green;
  27.  
  28.     }
  29.     .cLayer{
  30.         padding: 3.0em;
  31.     }
  32.  
  33. }
  34.  
  35. /* Desktop Device : 1024 이상 */
  36. @media screen and (min-width:1024px){
  37.  
  38.     html{
  39.         background: blue;
  40.  
  41.     }
  42.     .cLayer{
  43.         padding: 6.0em;
  44.     }
  45.  

  47.  


아래 출처 사이트를 방문하시면 미디어쿼리에 대한 예제를 확인 하실 수 있습니다.

출처 : http://blog.naver.com/PostView.nhn?blogId=javaking75&logNo=140184403044

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

Bsori
프로필 보기이 회원 글보기
 4년 전
감사합니다.

게시글 목록

번호 제목
2718
CSS 모바일웹 폰트사이즈? px? em?
2714
HTML html5 멋진 사이트 1곳 2
2713
CSS overflow 속성
2712
CSS border 속성에도 기본값이라는게 있습니다.
2711
CSS position:fixed 에 대한 것입니다. 1
2709
HTML DNS 미리 뚫고 페이지 속도 빠르게 하기 1
2708
CSS CSS : box-shadow, 박스 쉐도우(그림자) [펌]
2707
기타 목적에 따른 웹페이지 이동 설명
2706
HTML 디바이스별 해상도 확인 1
2695
기타 호환성모드 오류(?)처리 (X-UA-Compatible) 5
2692
기타 jQuery로 동작하는 페이지 로딩바 7
2688
기타 dpi 환산표(?)
2683
기타 px to em 또는 em to px
2679
CSS 서버에 등록되어 있는 폰트 사용하기 1
2678
CSS [1원짜리팁] div나 span 등 에서 수직 정렬 두번째이야기 5
2677
CSS [1원짜리팁] div 나 span 등에 tag에서 수직 정렬하기 2
2676
CSS 에디터(cheditor) 외부의 css 적용 1
2656
기타 에딧플러스에서 HOME 키 설정 2
2588
기타 X-UA-Compatible 서버에서 설정하기 4
2579
CSS LESS 사용 시 에디트플러스에서 CSS 설정 및 구문강조 사용하기 9
2578
반응형 N스크린 개발에 유용한 framework enquire.js 3
2550
반응형 반응형 웹 작업 시 mouseover click 분기 팁 20
2539
기타 모바일, 반응형 웹 작업시 필요할듯... 17
2532
CSS CSS 자료 링크 4
2511
반응형 브라우저 가로사이즈에 반응하여 css로 균등한 간격으로 정렬하기~_~ 10
2448
기타 파이어폭스로 작업하는 분들에게 팁! 6
2437
HTML 네이버 지도를 이용해 만든 레이아웃입니다. 19
2426
CSS IE7에서 float:right 버그에 관한 초간단 팁. 10
2417
웹접근성 웹 표준과 접근성, 그리고 크로스브라우징2 6
2416
웹접근성 웹 표준과 접근성, 그리고 크로스브라우징1 2
이전 다음
전체 목록