아이디/비번 기억
  • 봉하마을 방문후기
  • 미디어협동조합 국민TV국민TV의 조합원이 되어주세요!
  • 한국탐사저널리즘센터
현재위치 : HOME > 구구자료실

가로세로모드 다른CSS적용하기

관리자 | 2012.06.08 21:28 | 조회 9281
모바일 웹페이지 작성시 가로로 볼때와 세로로 볼때 처럼 보여지는 방향에 따라 문서에 다른 css 파일을 적용시키고 싶은 경우가 있죠?

※ 아이패드2와 안드로이드폰에서 테스트 해봤는데 훅훅 화면이 돌아갈때 마다 다른 css 파일로 적용이 잘된다. 
※ pc 에서 해당 페이지를 로딩할 경우 기본적으로  가로모드 css 파일이 적용된다.

(- 본문영역)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>박하율 돌잔치!</title>

<style type="text/css">
/* body 공통 속성 */
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form {margin:0;padding:0}
body {font:15px 굴림,Arial; background:#fff url('') repeat-x;}
ul,ol,dl {list-style:none}
img {border:0;}
ul {list-style:none;}

#wrap {width:100%; height:auto; background: url('/dj/images/phy01.jpg') no-repeat center top; border:solid 0px red; text-align:center;}

</style>

<!-- 세로모드일때 적용될 CSS -->
<link rel="stylesheet" media="all and (orientation: portrait)" href="hmode.css" />

<!-- 가로모드일때 적용될 CSS -->
<link rel="stylesheet" media="all and (orientation: landscape)" href="wmode.css" />
</head>
<body>

<div id="wrap">
    <img src="/dj/images/phy02.png" class="design01">
</div>

</body>
</html>


(-첫번째CSS : hmode.css 파일내용)
@charset "euc-kr";
.design01 {width:320px;}


(-두번째CSS : wmode.css 파일내용)
@charset "euc-kr";
.design01 {width:480px;}

테스트 미리보기 : www.99v.kr/dj/phy.html

출처 : http://stove99.tistory.com/77
twitter facebook me2day 요즘
98개(5/5페이지)
소스자료실
번호 제목 글쓴이 조회 날짜
18 [Java] 경고창/경고메세지 띄우기 관리자 9574 2012.06.12 18:45
17 [Java] 레이어 숨기고보이고 관리자 4775 2012.06.12 18:40
16 [etc] 메타태그 모음! 관리자 5424 2012.06.12 18:30
15 [etc] 웹폰트 적용하기 첨부파일 관리자 4433 2012.06.12 18:27
14 [etc] 프린트소스 (IE8,크롬,사파리,파폭 테스트완료) 관리자 7725 2012.06.12 17:49
13 [html/css] CSS초보를 위한 또는! 오랜만에 코딩하는 분을위한! 간단한 CSS모음 관리자 6016 2012.06.12 17:34
12 [html/css] 아이프레임 (iframe) 옵션을 알아보아용~ 관리자 7717 2012.06.12 17:32
11 [html/css] 마우스 오버 소스 (드림위버에서 만들기귀찮아서 ㅋ 복사해둠) 관리자 7811 2012.06.12 17:31
10 [html/css] 우클릭,드래그,선택방지 모음 관리자 9053 2012.06.12 17:30
9 [Java] 주소복사스크랩 관리자 3549 2012.06.12 17:28
8 [html/css] 기초적인 언어별 인클루드 방식 관리자 4814 2012.06.12 17:16
7 [모바일] 스마트폰으로 홈페이지 접속시 자동 모바일홈피로 이동 소스 관리자 9186 2012.06.12 17:15
6 [etc] 실시간검색위젯 첨부파일 관리자 5425 2012.06.12 17:13
5 [Java] 퀵메뉴스크롤기능켜기끄기 관리자 4604 2012.06.12 17:11
4 [모바일] 페이스북식 모바일팝업 관리자 8689 2012.06.08 21:29
>> [모바일] 가로세로모드 다른CSS적용하기 사진 관리자 9282 2012.06.08 21:28
2 [모바일] 모바일 홈페이지 SMS문자,전화,메일 연결하기! 관리자 8272 2012.06.08 21:27
1 [etc] 환율 노출 소스! 외환은행 제공 사진 첨부파일 관리자 6600 2012.06.08 21:23