모바일의 가로세로에 따라 달라지는 CSS 만들기

이 포스트에서는 모바일의 가로화면 또는 세로화면에 따라 다른 모양으로 표현되는 웹 페이지를 만들기 위한 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

단, 모바일의 경우 세로화면에서 키보드 레이아웃 때문에 가로화면으로 인식되는 경우가 있을 수 있습니다.

“모바일의 가로세로에 따라 달라지는 CSS 만들기”의 1개의 생각

답글 남기기

이메일 주소는 공개되지 않습니다.