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

컴프

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

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
887	HTML	SVG Star	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2231
886	HTML	SVG Rounded Rectangle	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1777
885	HTML	SVG Rectangle	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2203
884	HTML	SVG Circle	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2257
883	HTML	HTML5 Canvas Draw Image	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2420
882	HTML	HTML5 Canvas Draw Circular Gradient	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2171
881	HTML	HTML5 Canvas Draw Linear Gradient	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2299
880	HTML	HTML5 Canvas Stroke Text [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2616
879	HTML	HTML5 Canvas Draw a Text	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1714
878	HTML	HTML5 Canvas Draw a Circle	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1943
877	HTML	HTML5 Canvas Draw a Line	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1957
876	HTML	HTML5 Canvas	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2147
875	HTML	HTML5 <footer> 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1687
874	HTML	HTML5 <header> 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2715
873	HTML	html5 태그 정의	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2561
872	HTML	HTML5 <figure> 및 <figcaption> 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2610
871	HTML	HTML5 <aside> 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2919
870	HTML	HTML5 <nav> 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2194
869	HTML	HTML5의 새로운 시맨틱 요소 article	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2631
868	HTML	HTML5의 새로운 시맨틱 요소 section	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2148
867	HTML	Syntax For HTML5Shiv(구문 HTML5Shiv의 경우)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1922
866	HTML	The min and max Attributes(최소 및 최대 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1658
865	HTML	The list Attribute(list 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1911
864	HTML	The height and width Attributes(높이 및 너비 특성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2041
863	HTML	The formtarget Attribute(formtarget 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1339
862	HTML	The formnovalidate Attribute(formnovalidate 특성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1644
861	HTML	The formmethod Attribute(formmethod 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1609
860	HTML	The formenctype Attribute(formenctype 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1876
859	HTML	The step Attribute(step 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1534
858	HTML	The required Attribute(필수 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1826