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

컴프

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

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
797	HTML	HTML 단락 <p> 태그	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1706
796	HTML	<h1> ~ <h6> 사용	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1519
795	HTML	html5 기본 구조	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3301
794	기타	HTML5 Canvas 태그 예제	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2246
793	HTML	[HTML] 탭메뉴 dl dt dd	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3752
792	HTML	[HTML] 1원) html5 품검증 무력화시키기?	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1850
791	반응형	media query 제거한 bootstrap css	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	2555
790	HTML	css @page 속성. print 용지설정이 css 로~	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	10035
789	HTML	폼 전송할 때 알아야 할 팁	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	5740
788	CSS	outline 속성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	2488
787	반응형	모바일과 데스크탑 화면을 동시에 확인가능한 브라우져 blisk.io [1]	하호호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	3263
786	웹접근성	[웹접근성] ol과 ul 에 대해 [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	3453
785	웹접근성	웹 접근성에 대한 이해	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	2379
784	기타	구글·MS·모질라·애플, 내년 3월 '웹어셈블리' 실험 지원	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	2386
783	CSS	레이아웃 없는 이미지 롤오버 테두리	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	2239
782	CSS	css 팁	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	2409
781	CSS	css 툴팁 만들기 [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	3944
780	반응형	반응형웹 구축시 css calc() 활용팁 [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4299
779	CSS	CSS EM REM VW VH VMIN VMA	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	3145
778	반응형	미디어쿼리 예제	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	3280
777	반응형	[반응형웹] - 미디어쿼리 (media Query) 간단한 예제 [1] 현재 보는 글	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	7635
776	CSS	CSS3를 이용한 아코디언 메뉴 만들기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4776
775	CSS	CSS3를 이용한 12달 달력 코딩하기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	5386
774	CSS	css3 와 제이쿼리를 이용한 이미지 슬라이드입니다.	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4608
773	반응형	미디어쿼리 기초	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	3596
772	CSS	CSS 기초강좌 - 링크(Link)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	2985
771	웹접근성	실무에서 웹접근성 마크 획득시 주의사항	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	3527
770	HTML	html 구조를 css로 자동 컨버팅 해주는 사이트	ES7 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	3738
769	HTML	html관련 자료 사이트	덕서리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	2372
768		씨멘틱 마크업 - 이거 머냐 씹어먹는거냐? [2]	자루스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	2399