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

컴프

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

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
557	HTML	[질문] HTML5 를 익스에서 문제없이 사용하게 하려면? [5]	늘푸른세상 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3102
556	HTML	메뉴네비게이션 소스가 잘못되었나요? [4]	ReeJang 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3538
555	HTML	css3 이미지 원형만들기 등등 참고자료 [3]	헌이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	8462
554	HTML	말씀듣고.. [10]	航海 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2776
553	HTML	쉬우나 쉽지않은, 오래되었으나 그리 오래되지 않았던... [2]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2821
552	HTML	웹표준.... [2]	航海 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2728
551	HTML	html 익스에서는 가운데 정렬이 안되네요.. [5]	도토리과자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2926
550	HTML	대인배 님들 재발봐주세요 진짜 부탁드립니다 [5]	우리까미 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2591
549	HTML	레이어팝업 제어 질문좀드려도 될까요?? [6]	航海 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3580
548	HTML	날나리 강좌. ㅋ 레이아웃 짜기, 완성 예제	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3368
547	HTML	날나리 강좌. ㅋ 레이아웃 짜기, 광고 영역(?) [1]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2957
546	HTML	[질문] absolute 또는 relative 자식div 투명처리 [4]	샤이니아 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4291
545	HTML	날나리 강좌. ㅋ 레이아웃 짜기, 열과 height	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2971
544	HTML	CSS 속성 적용의 우선 순위 [7]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	10671
543	HTML	ㅋㅋㅋ죄송합니다;;; [6]	우리까미 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3167
542	HTML	연습 TABLE vs DIV	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3196
541	HTML	날나리 강좌. ㅋ 레이아웃 짜기, 열(column) 그리고 clear (부록포함)	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2999
540	HTML	중국어 일본어 홈페이지 만들때 글자 들쑥날쑥한거요... [1]	soing 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3706
539	HTML	날나리 강좌. ㅋ 레이아웃 짜기, float의 이해 [1]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2834
538	HTML	날나리 강좌. ㅋ 레이아웃 짜기 footer 밑에 놓기 [4]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4167
537	HTML	[질문이 있습니다.] css코드 앞에~ [5]	2번호랑이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2197
536	HTML	날나리 강좌. ㅋ 레이아웃 짜기, height 연습	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3535
535	HTML	고수님들께 도움좀.. 메인로고와 탑메뉴의 가로크기가 안맞아서요.. [4]	메탈포스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2958
534	HTML	날나리 강좌. ㅋ 레이아웃 짜기 Row편 [3]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3156
533	HTML	날나리 강좌. ㅋ 기본 속성? display	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3090
532	HTML	날나리 강좌. ㅋ HTML DTD [1]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2740
531	HTML	SGML에서 HTML까지 마크업언어에 관한 간략한 이해	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4019
530	HTML	[css] width, height의 이해	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4541
529	HTML	[css] 마진 병합 [2]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3878
528	HTML	[css] z-index 초기값 auto 사용 주의	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4452