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

컴프

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 9년 전 · 조회 7635 7635 · 댓글 1 1

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

http://mediaqueri.es/

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

http://stuffandnonsense.co.uk/

예제 1

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale1.0,user-scalable=no">
<title>반응형 웹 </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="layer1" class="cLayer" style="background-color:#ff6666">메뉴1</div>
<div id="layer2" class="cLayer" style="background-color:#ffcc33">메뉴2</div>
<div id="layer3" class="cLayer" style="background-color:#ffff00">메뉴3</div>
<div id="layer4" class="cLayer" style="background-color:#33ff66">메뉴4</div>
</body>
</html>
[출처] [반응형웹] - 미디어쿼리 (media Query) 간단한 예제|작성자 자바킹

예제 2

@charset "utf-8"
/* 모든 Device를 위한 공통 로드 */
.cLayer{
floot: left;
padding : 1.0em;
}
/* 모바일 Device : 0 ~ 640 */
@media screen and (max-width: 640px){
html{
background: red;
}
.cLayer{
padding: 1.0em;
}
}
/* Tablet Device : 641 ~ 768 */
@media screen and (min-width:641px){
html{
background: green;
}
.cLayer{
padding: 3.0em;
}
}
/* Desktop Device : 1024 이상 */
@media screen and (min-width:1024px){
html{
background: blue;
}
.cLayer{
padding: 6.0em;
}
}
[출처] [반응형웹] - 미디어쿼리 (media Query) 간단한 예제|작성자 자바킹

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

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

댓글 작성

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

로그인하기

댓글 1개

Bsori

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전

감사합니다.

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
107	HTML	cart클래스1	홀로남은자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3335
106	HTML	비교 복사 [1]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3219
105	HTML	싸이월드 둥근 테두리 만드는 방법 [2]	그레이스웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4949
104	HTML	페인트 브러시 툴(Paintbrush Tool, 단축키 - B)	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6288
103	HTML	올가미 툴(Lasso Tool, 단축키 - L)	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5267
102	HTML	포토샵 레이어의 이해 [2]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4624
101	HTML	점선 그리는 법... [2]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3437
100	HTML	일러스트 단축키2	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6192
99	HTML	스타일 시트로 마우스 오버와 아웃시 바뀌는 색깔	강강술냄세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5025
98	HTML	XP서비스팩2 무시하고 새창 띄우기	강강술냄세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3448
97	HTML	개행문자 없애기[펌] [1]	드렁크수달스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4439
96	HTML	우체국- 해외발송 구역 및 나라구분 (우편번호와 비슷)	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6878
95	HTML	이미지(img)를 이용한 백그라운드 통신	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4332
94	HTML	[JavaScript] 익스플로러,네츠케이프 모두에서 iframe 과 비슷하게 해보자!	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3217
93	HTML	웹 폰트 적용 시키기 - 초보자용 -	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5760
92	HTML	페이지 자동 이동 방법 3가지!!!	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4153
91	HTML	body옆의 스크롤바흔적없애기 [1]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5182
90	HTML	마우스 오른쪽 버튼 사용금지	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3242
89	HTML	마우스 룰오버시 여러가지 효과내기	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3163
88	HTML	포토샾 팁 72가지 [1]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3630
87	HTML	업로드시 중복 파일명 체크및 새로운 이름 생성 [6]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5165
86	HTML	디렉토리 이미지 뷰어 [18]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4810
85	HTML	GD와 GifSicle을 이용한 animationGIF 생성하기 [4]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4140
84	HTML	PHP 한글 메뉴얼[Professional HTML Preprocessor]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3494
83	HTML	register_global=off 일때 파일 업로드 방법	빨간망토의비밀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3153
82	HTML	디렉토리 용량 체크 (윈도우 리눅스 공용) [6]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4918
81	HTML	password() 의 함수로 암호화한 스크립트를 복호화 할수 없습니다.!! [1]	damoa.biz 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4132
80	HTML	insertRow,insertCell,createElement,innerHTML [2]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4454
79	HTML	디렉토리별 용량체크 (Linux server) [3]	가을 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3583
78	HTML	[영문] Ajax 사이트 한곳 더 소개 합니다~! [1]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4920