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

컴프

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

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
647	HTML	도대체 이 그라데이션 효과는 어떻게 주는걸까요? ㅠㅠ [6]	프릭스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4785
646	HTML	오늘은 뭐 짜달라, 고쳐달라는 분도 안 계시고, [1]	cshop 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4487
645	HTML	zurb의 foundation (반응형 프레임워크) [12]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	7369
644	HTML	스크롤에 따라 변하는 메뉴... [1]	빌딩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4712
643	HTML	로고 크기에 제한이 있나요? [21]	다평정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	5387
642	HTML	이거 진짜 ㅂ ㅅ 같은건데... ctrl+ 0 ...OTL [1]	cshop 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3612
641	HTML	html5 책 좀 추천 해주세요. ^^ [3]	웹어드민 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3230
640	HTML	IE에서 CSS3 메뉴 적용이 되지 않습니다. [7]	돌맹나래 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	6424
639	HTML	웹 표준화 관련 사이트들 [4]	꼼꼼이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4006
638	HTML	IE 때문에 고생하시는 분들께 드리는 팁 하나 [1]	cshop 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3062
637	HTML	브라우저별 개별 css 적용 [1]	cshop 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3601
636	HTML	안녕하세요~ for문과 CSS 질문입니다. [2]	로날듀우 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2746
635	HTML	background-size:cover [1]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4240
634	HTML	css 간단한 질문 하나만 드릴께요 [4]	띠리링 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2581
633	HTML	주소 검색 소스~ 부탁드려요 ^^	basketball 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3135
632	HTML	CSS 게시판 위치별 제어 [5]	빌딩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3278
631	HTML	홈페이지 카테고리 수정 도움 요청 [2]	덕수다아 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4354
630	HTML	너무 멋진 사이트 발견! 그런데! 질문 [3]	빌딩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3390
629	HTML	이미지 부드럽게 확대 하기 간단css [1]	크라이스트 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	10195
628	HTML	접기/펼치기 소스 질문입니다. 도와주세요~~ [5]	실바 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	9047
627	HTML	크로스 브라우징..시 CSS를 잘 못부르네요. [2]	빌딩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3272
626	HTML	웹 표준으로 했는데 블랭크가...또 쌩기는데 이번엔.. [2]	빌딩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2286
625	HTML	css...왜 위에 블랭크가 생길까요? [3]	빌딩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2878
624	HTML	jQuery 이미지 체크박스 [3]	웹군 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	7741
623	HTML	엄한 질문 하나 드립니다. ㅎㅎㅎ [3]	오십원 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2554
622	HTML	html5와 플래시로 제작된 기능이 동일하게 구현이 되는 예 [2]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3299
621	HTML	아이프레임으로 불러온 문서 내 특정영역 이동 [2]	웹어스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3368
620	HTML	메뉴 테두리를 둥글게 하고싶은데 안되네요... [2]	마이피씨 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4617
619	HTML	zen코딩 치트문서~ [8]	there007 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3182
618	HTML	젠코딩 동영상 [2]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3582