6강에서 index 페이지를 간단하게 작성해 봤다. index는 그 홈페이지의 얼굴이기 때문에 사실은 훨씬 많은 복잡한 과정과 기법들이 요구 된다. 레이아웃을 이렇게 잡는다는 채험 정도로 생각 할 수 있다. 이번에 해야 될 건 모바일 페이지 작성이다.
모바일과 PC 브라우저에서 가장 큰 차이는 화면 크기다. 모바일은 화면이 훨씬 작지만 상대적으로 높은 해상도를 갖고 있다. 최근 출시되고 있는 5인치 남짓의 디스플레이는 과거 17인치 모니터와 해상도가 비슷하다. 만약 별다른 설정 없이 PC용 페이지를 모바일에서 봤다면 훨씬 작아진 이미지와 글씨를 볼 수 있다. 12px로 작성한 글이 모바일에서는 더 작게 보이지만 해상도를 기준으로 봤을 때는 같은 12px가 맞다. 그렇다면 모바일 페이지에서 폰트는 디스플레이 비율에 맞춰서 이미지와 폰트 크기를 모두 변경 해 줘야 할까?
모바일(스마트폰) 디바이스의 해상도는 종류마다 모두 다르다. 국내외에서 생산되고 있는 스마트폰의 해상도가 모두 다르기 때문에 어느 정도 비율로 크기를 작성해야 하는지 결정하기 어렵다. 그래서 모바일용 브라우저에서는 디바이스 환경을 검사해서 단말기의 해상도에 맞춰 폰트나 이미지의 크기를 일정 비율로 확대, 축소 할 수 있는 기능을 제공하고 있다. 이 문제는 간단한 선언문 하나로 해결 할 수 있다.
6강에서 작성한 HTML 문서를 모바일에서 봤다면 매우 작은 글씨와 이미지로 바뀌어 있는 걸 확인 할 수 있다. 그 화면을 모바일로 작업 할 때는 메뉴나 콘텐츠의 위치와 크기들을 바꿔줘야 작은 모바일 화면에서도 제대로 볼 수 있다.
작아진 화면을 손가락으로 두 번 톡톡 쳐보자. (더블 클릭)
작아진 화면이 정상적인 크기로 변했다. 하지만 화면 해상도를 벗어났기 때문에 페이지를 이용하는데 불편하다. 모바일 페이지 작성은 이렇게 화면을 더블클릭 했을 때의 상태에서 작업을 해야 하는데 그 상태 전환은 아래 소스를 보면 알 수 있다.
파일명 index.php
</html>
<html>
<head>
<meta charset="UTF-8">
<title>멀티미디어공학</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="title_box">
멀티미디어공학과
</div>
<nav>
<ul>
<li>Home</li>
<li>Project</li>
<li>Service</li>
</ul>
<ul>
<li>Download</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="visual_box"><img src="/image.jpg"></div>
<div class="product_box">
<div class="subject">Marketing stuff!</div>
<div class="docu">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</div>
<div class="btn"><input type="button" value="DOWNLOAD"></div>
</div>
<div class="content">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
</body>
</html>파일명 style.css
.content .span4 { clear:both; text-align:left; }
.title_box { width:100%; text-align:left; padding:20px; font-weight:bold; font-size:20px; }
nav { height:60px; }
nav ul { clear:both; width:100%; padding:0; }
nav ul li { float:left; list-style:none; height:30px; line-height:180%; margin-right:-1px; width:33%; text-align:center; border:1px solid #D3D3D3; background:#F8F8F8; }
nav ul li:hover { background:#FFFFFF; cursor:pointer; }
.visual_box { clear:both; 100%; overflow:hidden; }
.product_box { 100%; padding:20px; }
.product_box .subject { font-size:40px; }
.product_box .docu { font-size:20px; }
.product_box .btn input { border:1px solid #82C682; border-radius:2px; padding:10px 20px 10px 20px; background:#59B359; font-size:15px; font-weight:bold; color:#ffffff; }
.product_box .btn input:hover { cursor:pointer; background:#C0E2C0; color:#59B359; }
.content { width:100%; border-top:1px solid #EFEFEF; border-bottom:1px solid #EFEFEF; }
.content .span4 { clear:both; text-align:left; }
모바일 환경에서 접속 했다면 이런 화면을 만나게 된다. 보고 있는 화면을 오페라 모바일 에뮬레이터라는 프로그램으로 PC에서 모바일 환경을 적용해 보고 싶을 때 유용하다.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
모바일 페이지에서 이 메타 태그가 가장 중요하다고 할 수 있다.
meta name="viewport" : 뷰포트 선언
content="width=device-width" : 콘텐츠를 표현할 넓이. 디바이스의 크기게 맞추겠다는 것.
initial-scale=1 : 초기 크기 설정(기본 꽉찬 화면)
minimum-scale=1 : 최소 크기 설정 (기본값 : 0.25, 범위 : 0~10.0)
maximum-scale=1 : 최대 크기 설정(최대 배율 범위 : 0~10.0)
user-scalable=no : 사용자 단말의 확대기능 사용 유무 선언(yes/no)
이 선언문은 페이지 전체에 콘텐츠의 크기를 디바이스 크게 맞추겠다는 것으로 viewport를 정의하지 않으면 모바일에서도 PC 화면을 기준으로 폰트 크기를 출력한다.
'프로그래밍 > 홈페이지 제작 기초' 카테고리의 다른 글
| 8강. jquery.easydrag.js 이용해 이미지 드래그하기 (0) | 2019.09.21 |
|---|---|
| 6강. HTML 태그, CSS 등을 이용하여 홈페이지의 레이아웃 구성하기 (0) | 2019.09.21 |
| 5강. MySQL 데이터베이스에 저장(Insert) 된 레코드를 수정(Update)하기 (0) | 2019.09.21 |