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

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

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

게시글 목록

번호 제목
1720
HTML 또 다시 기초적인 css (div) 질문드려요.. 18
1718
HTML 가운데 정렬 상관없이 레이어 고정 하는 방법이요ㅜㅜ 1
1716
HTML 아이프레임과 css 질문입니다., 1
1711
HTML 기초적인 css 질문요.. 4
1710
HTML 사각map을 이용해서 파일 링크를 걸었는데요
1707
HTML 인터넷익스플로러 6 에서 깨지네요 2
1704
HTML 레이어 질문 드립니다. 2
1700
HTML 웹표준에 대해서^^;; 3
1693
HTML 모든 익스에서 똑같이작동할려면??어떤식으로해야되나요? 6
1689
HTML WebKit 이게 무엇인가요? 3
1687
HTML css 질문드립니다. 1
1686
HTML 메인페이지 최근사진 엑박 뜨는데요
1683
HTML 페이지 최적화 분석 사이트 (Page Speed Online) 2
1680
HTML aequum 님의 웹표준 내용을 보고 공부를 하려는데요... 2
1676
HTML 간단한 대문 코딩이 익스8에서만 나타납니다. 도와주세요~ 3
1675
HTML 한글 포함한 문자열에서 문자열의 길이를 반환
1674
HTML css3 질문인데요..
1671
HTML background 반복질문 ㅠㅠ 2
1667
HTML 플래시를 수정해서 넣었는데 3
1655
HTML 지적 부탁드립니다. 11
1649
HTML CSS The Definitive Guide E-BOOK 입니다. 5
1646
HTML 한번은 넘어야 하는 css conflict 2
1641
HTML [도와주세요!] 'HTML table 만들기' 관련 질문입니다.' 4
1638
HTML [도와주세요!] '텍스트 서식'에 대한 'HTML태그' 질문입니다. 2
1636
HTML 스크롤바 관련 질문드려요.. 1
1633
HTML [질문]윈더우7시스템에서 익플러스9버전에서 css 실행 안대요 2
1631
HTML 웹표준 질문이요^^ 1
1627
HTML .Xem 과 px로 조절하는 차이가 궁금합니다. 3
1624
HTML css 특정 객체 스타일 지정 질문~ 2
1623
HTML Cross-Browser CSS Gradient
이전 다음
전체 목록