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

컴프

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

· 9년 전 · 조회 7629 7629 · 댓글 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에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
1217	반응형	CSS 그리드 시스템 가이드 사이트 [6]	XIES 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	3105
1216	웹접근성	HTML5 의 의외성 [2탄] 표, 그리고 리스트 [2]	XIES 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2498
1215	CSS	div 내의 수직 수평 중앙 정렬 [19]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	4904
1214	기타	카페24 웹 호스팅에서 github 이용하는 방법 [20]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	8363
1213	CSS	CSS 그리드 관련 사이트 [9]	ango 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	3256
1212	웹접근성	HTML5 의 의외성 [1탄] 시멘틱 [8]	XIES 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	3644
1211	CSS	포토샵 드랍섀도우를 CSS방식으로 변환 [13]	Policia 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5년 전	4121
1210	기타	BBC "코로나19가 바꿀 사무실의 미래" -1분코딩 - 무료 강좌 [8]	하누☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5년 전	3346
1209	CSS	마진병합 현상 [6]	하누☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5년 전	3595
1208	기타	애플 스타일 스크롤링 [3]	하누☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5년 전	3152
1207	기타	제이쿼리 버전 [1]	하누☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5년 전	2894
1206	CSS	제가 사용하고 있는 scss library 파일 입니다.	moviepd 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5년 전	3722
1205	HTML	table 코딩 빨리 해주는 사이트 [3]	moviepd 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5년 전	4386
1204	기타	div+button으로 구현하는 select box [9]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	7837
1203	웹접근성	스킵 네비게이션 기능 ie에서 초점 튕김현상	하누☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	3014
1202	기타	Scroll-Then-Fix Content	마르코☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	2990
1201	기타	무료 HTML 및 CSS 책 [6]	마르코☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	4327
1200	기타	“Barba.js [1]	마르코☆ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	4124
1199	기타	vuejs 폼입력 바인딩 #3	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	4135
1198	기타	vuejs 폼입력 바인딩 #2	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	2616
1197	기타	vuejs 폼 입력 바인딩	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	2687
1196	기타	vue.js 인라인 메소드 핸들러	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	2471
1195	기타	vue.js 이벤트 핸들링	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	2460
1194	기타	vue.js v-for와 컴포넌트	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	3049
1193	기타	vue.js Range v-for 와 v-for 템플릿	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	9237
1192	기타	Vue.js 필터링/ 정렬 된 결과 표시하기	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	3886
1191	기타	Vue.js 배열변경감지	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	6226
1190	기타	vue.js v-for와 객체구문	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	2444
1189	기타	Vue.js 리스트 렌더링	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	2347
1188	기타	Vue.js #v-show	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	1825