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

컴프

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

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
77	HTML	Ajax의 표기와 발음에 관한 의견! [4]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5146
76	HTML	움직이는 gif도 썸네일을 만들수 있는 함수 [6]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6769
75	HTML	Ajax에서 [즐겨찾기]와 [뒤로가기]를 다루는 방법! [2]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6775
74	기타	CSS 사전입니다.(zip 압축파일) [13]	Photofly 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5930
73	HTML	간단한 디렉토리 인덱싱 시스템(규칙에 맞는것만 보여줌) [1]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3711
72	HTML	롤오버 이미지를 사용할 수 있는 심플한 드롭다운 메뉴	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6296
71	HTML	위에서 하나씩 떨어지는 메뉴 스크립트	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3194
70	HTML	사용자 브라우저에서 자바지원 여부에 따라 리다이렉트 시키기 [1]	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3505
69	HTML	사용자 브라우저의 자바 버전 알려주기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2426
68	HTML	윈,맥용 사이트를 운영할때 각각 다른 다운로드 사이트로 이동시키기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2727
67	HTML	사용자 웹브라우저의 이름 알려주기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2634
66	HTML	사용자 웹브라우저 정보 보여주기 해상도, 자바설치여부 등등	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3145
65	HTML	ctrl +j 와 ctrl + alt + shift + t 의 사용법(잔팁) [5]	사랑과우정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4740
64	HTML	curl 함수를 이용한 HTTP_REFERER 변경 [8]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	13645
63	HTML	if [23]	izen 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3499
62	HTML	iinclude와 조건문 [7]	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3906
61	HTML	국내 지도 선택(시, 도 별로 선택하기) [5]	수다쟁이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4350
60	HTML	페이지 이동중입니다 잠시만 기달려주세여	개발자관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3598
59	HTML	php실명인증 한번만하면 쭈우욱^^ [1]	개발자관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3789
58	HTML	http://홈주소/?mode=xxx 하는방법 :) [1]	개발자관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4103
57	HTML	포토샵 환경 설정 초기화 하기(1원짜리 팁) [2]	가을 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5648
56	HTML	[자바스크립트강좌] HTML로 글자 변환	스마일미디어 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4132
55	HTML	데이터베이스의 생성, 선택, 보기	스마일미디어 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4028
54	HTML	포토샵 CS 브러쉬 툴 강좌 [4]	스마일미디어 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3689
53	HTML	IE 패치 스크립트(상호 작용하는 ActiveX 컨트롤이 사용자 입력에 즉시 응답하도록 웹 페이지를 수정하는 방법) [2]	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3804
52	HTML	네이버 openapi 사용하여 쇼핑검색 만들기 [2]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5633
51	HTML	네이버 openapi 사용하여 실시간 인기검색어 보여주기 [4]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5643
50	HTML	특정 IP 차단하기... [1]	왕초보 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4107
49	HTML	window.showModalDialog 항상 위에 뜨는 창 열기	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5703
48	HTML	전화 번호 숫자만 빼오기 [5]	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3752