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

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

컴프
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 9년 전 · 7621 · 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개

게시글 목록

번호 제목
1921
HTML CSS Font-Size Comparative Table 4
1918
HTML IE 5,6,7,8 대응해주는 .js 2
1911
HTML 하단에 딱붙어있는 레이어는 어떻게 만들어야 할지? 6
1905
HTML (소스)마우스오버시 힌트창 css만으로 작동 6
1904
HTML 드림위버에서 특정 파일들의 코드 검색이 안됩니다.ㅜㅜ
1896
HTML 반응형 레이아웃 와이어프레임 7
1881
HTML 실전 HTML5 GUIDE PDF 14
1877
HTML 가변형 레이아웃 관련 3
1868
HTML 익스플로러에서만 깨지는 이유가 도무지... 8
1860
HTML 반응형 이미지 기법들 8
1856
HTML UI 관련 유용한 사이트 추천 3
1853
HTML 또 질문드립니다. 2
1850
HTML HTML5 CSS3 애니메이션 롤오버메뉴 2
1844
HTML HTML5를 지원하지 않는 웹브라우저에 비디오,오디오 재생해주는 html5media 5
1837
HTML css 표그리는법좀 문의 드립니다. 아무리 찾아도..ㅠㅜ 6
1829
HTML ie6 이게 더블 마진이면 해결을 어떻게 해야하나요? 7
1827
HTML 드림위버 롤오버요~ 1
1819
HTML 요걸우째설명해야될지;;; 7
1815
HTML li 가로정렬 3
1799
HTML 반응형 웹 디자인 (Responsive Web Design) 15
1797
HTML HTML5의 요소들에 대한 여러 웹브라우저의 지원여부를 확인할 수 있는 사이트 1
1791
HTML 님들은 html5공부 어떻게 하셨나요? 5
1777
HTML CSS를 이용한 DIV 레이아웃 문의드립니다. 13
1775
HTML HTML5 API Vocabulary 1
1765
HTML css 로 레이아웃 컨트롤 9
1759
HTML 백그라운드 이미지위에 swf파일이 안겹쳐져요. 5
1757
HTML HTML5 기능들을 테스트해볼수 있는 데모 사이트 1
1747
HTML 웹표준 권고사항에 CSS 작성시, 대소문자 구분도 있나요? 9
1746
HTML submit 버튼 안 보이게 하면 이상할까요? 2
1739
HTML 이미지에 들어가는 여백없애는 방법.. 이거 고민이네요;; 6
이전 다음
전체 목록