이 포스트에서는 모바일의 가로화면 또는 세로화면에 따라 다른 모양으로 표현되는 웹 페이지를 만들기 위한 CSS에 대해 서술합니다.
반응형 CSS 만들기 포스트에서도 설명한 바와 같이 CSS에 미디어쿼리 기능이 있습니다. 반응형 CSS에는 브라우저의 최소폭에 따라 다른 CSS 코드를 지정해 줄 수 있었습니다. 미디어쿼리에서는 최소폭 뿐만 아니라 다른 여러 조건을 지정할 수 있는데 그 중 웹 페이지를 표시할 화면의 가로세로를 조건으로 지정할 수도 있습니다. 이를 이용하면 모바일 기기의 화면을 가로화면(landscape)으로 했느냐 세로화면(portrait)으로 했느냐에 따른 반응형 페이지를 만들 수도 있습니다.
다음 HTML 코드를 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Orientation CSS Sample</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* Landscape mode */
@media only screen and (orientation: landscape) {
body { background-color: #aad4ff; }
.portrait_only { display: none; }
}
/* Portrait mode */
@media only screen and (orientation: portrait) {
body { background-color: #aaffd4; }
.landscape_only { display: none; }
}
</style>
</head>
<body>
<h1>Orientation CSS Sample</h1>
<p class="landscape_only">Landscape mode</p>
<p class="portrait_only">Portrait mode</p>
</body>
</html>
화면 최소폭에 따른 반응형 페이지를 만들 때와 비슷합니다.
다만 다른 점이 있다면 10번 줄과 16번 줄입니다. 옵션이 min-width 대신 orientation으로 되어 있을 것입니다. 이 조건이 landscape로 되어 있다면 가로로 긴 화면일 때 적용되고 portrait로 되어 있다면 세로로 긴 화면일 때 적용됩니다. 참고로 가로와 세로가 같을 경우는 portrait 조건을 적용하게 됩니다.
이 예제에서는 가로화면에 대해서는 배경색이 연두색이고 landscape_only 클래스만 표시, 세로화면에 대해서는 배경색이 하늘색이고 portrait_only 클래스만 표시되게끔 되어 있습니다.
샘플 링크는 다음과 같습니다. 모바일에서는 화면 회전 기능을 활성화시킨 후 화면을 이리저리 회전하면서 실험해 보시면 되고, 데스크톱에서는 모바일 테스트 기능을 이용하거나 브라우저의 창 폭을 조절해 가면서 실험해 보시면 됩니다.
https://pjw48.net/samp/orientation_css_sample.html
단, 모바일의 경우 세로화면에서 키보드 레이아웃 때문에 가로화면으로 인식되는 경우가 있을 수 있습니다.
1개의 댓글이 있습니다.