웹[기술|표준|접근]/작은 팁2011/03/17 11:47

CSS for iPad Orientation (화면회전)

CSS for Retina Display 에 이어 이번엔 IPad 화면 회전에 따른 CSS 적용법에 대해 간략하게 적어보겠다.
사실 화면회전에 따라 CSS를 구별해서 적용하는 경우는 드물것이나, IPad에 맞춤 웹페이지를 제작하다보면 어느순간 필요해지는 부분이다.

1. Media Query
iPad Orientation의 Media Query는
all and (orientation:portrait)
all and (orientation:landscape)
이다.
portrait는 세로화면,
landscpae는 가로화면이다.


2. 불러오기
CSS for Retina Display와 동일하다

2-1. 별도의 CSS File을 만든경우
<link rel="stylesheet" media="all and (orientation:portrait)" href="/stylesheets/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="/stylesheets/landscape.css">

2-2. style을 구분하여 불러올 경우
<style type="text/css" media="all and (orientation:portrait)">
<style type="text/css" media="all and (orientation:landscape)">
2-3. 일반적인 style 안에서 불러올 경우
@media all and (orientation:portrait) {
     #for portrait style codes..
}
@media all and (orientation:landscape) {
    #for landscape style codes..
}


3. 예제
세로용에는 portrait, 가로용에는 landscape를 부여하고, CSS를 통해 제어해보겠다.
<style type="text/css" media="screen">
@media all and (orientation:portrait) {
    .portrait { display: block; }
    .landscape { display: none; }
}
@media all and (orientation:landscape) {
    .portrait { display: none; }
    .landscape { display: block; }
}
</style>

...

Orientation:
<div class="portrait">Portrait</div>
<div class="landscape">Landscape</div>


4. 확인
4-1. Portrait(세로모드)


4-2. Landscpae(가로모드)






크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS for iPad Orientation (화면회전)  (0) 2011/03/17
CSS for Retina Display (background)  (1) 2011/03/14
헤딩 제대로 사용하기. - 후편(완)-  (3) 2010/01/09
헤딩 제대로 사용하기(시멘틱 마크업하기). -전편-  (2) 2010/01/06
IE7에서 text-decoration이 이상하게 나올때.  (0) 2009/02/02
Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
Posted by Johan Kim hiphapis
TAG , , , , , , , ,
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/186 관련글 쓰기

댓글을 달아 주세요