이 문서에서는 모바일 디바이스에서 적절하게 렌더링할 ASP.NET 웹 페이지(Razor) 사이트에서 페이지를 만드는 방법을 설명합니다.
학습할 내용:
- 명명 규칙을 사용하여 페이지가 모바일 디바이스용으로 특별히 디자인되도록 지정하는 방법입니다.
자습서에서 사용되는 소프트웨어 버전
- ASP.NET 웹 페이지(Razor) 3
이 자습서는 ASP.NET 웹 페이지 2에서도 작동합니다.
ASP.NET 웹 페이지 모바일 또는 다른 디바이스에서 콘텐츠를 렌더링하기 위한 사용자 지정 디스플레이를 만들 수 있습니다.
ASP.NET 웹 페이지 사이트에서 디바이스별 페이지를 만드는 가장 간단한 방법은 FileName.Mobile.cshtml과 같은 파일 명명 패턴을 사용하는 것입니다. 페이지의 두 가지 버전(예: MyFile.cshtml과 MyFile.Mobile.cshtml 이라는 버전)을 만들 수 있습니다. 런타임에 모바일 디바이스가 MyFile.cshtml을 요청하면 ASP.NET MyFile.Mobile.cshtml에서 콘텐츠를 렌더링합니다. 그렇지 않으면 MyFile.cshtml 이 렌더링됩니다.
다음 예제에서는 모바일 디바이스에 대한 콘텐츠 페이지를 추가하여 모바일 렌더링을 사용하도록 설정하는 방법을 보여 줍니다. Page1.cshtml 에는 콘텐츠와 탐색 사이드바가 포함되어 있습니다. Page1.Mobile.cshtml 은 동일한 콘텐츠를 포함하지만 사이드바를 생략합니다.
ASP.NET 웹 페이지 사이트에서 Page1.cshtml이라는 파일을 만들고 현재 콘텐츠를 다음 태그로 바꿉니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 13em; margin-right: 10em; } </style> </head> <body> <div id="navigation"> <h3>Related Sites</h3> <ul> <li><a href="http://www.adventure-works.com/">Adventure Works</a></li> <li><a href="http://www.contoso.com/">Contoso, Ltd</a></li> <li><a href="http://www.treyresearch.net/">Trey Research</a></li> </ul> </div> <div id="content"> <h1>Lorem ipsum dolor</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </body> </html>Page1.Mobile.cshtml이라는 파일을 만들고 기존 콘텐츠를 다음 태그로 바꿉니다. 페이지의 모바일 버전은 더 작은 화면에서 더 나은 렌더링을 위해 탐색 섹션을 생략합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #content { margin-left: 2em; margin-right: 5em; } </style> </head> <body> <div id="content"> <h1>Lorem ipsum dolor</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </body> </html>데스크톱 브라우저를 실행하고 Page1.cshtml로 이동합니다.
모바일 브라우저(또는 모바일 디바이스 에뮬레이터)를 실행하고 Page1.cshtml로 이동합니다. (URL의 일부로 .mobile. 을 포함하지 않습니다.) 요청이 Page1.cshtml에 있더라도 ASP.NET Page1.Mobile.cshtml을 렌더링합니다.
참고
모바일 페이지를 테스트하려면 데스크톱 컴퓨터에서 실행되는 모바일 디바이스 시뮬레이터를 사용할 수 있습니다. 이 도구를 사용하면 웹 페이지가 모바일 디바이스에서 보이는 것처럼 테스트할 수 있습니다(즉, 일반적으로 디스플레이 영역이 훨씬 작음). 시뮬레이터의 한 가지 예는 Mozilla Firefox 용 사용자 에이전트 전환기 추가 기능으로, 데스크톱 버전의 Firefox에서 다양한 모바일 브라우저를 에뮬레이트할 수 있습니다.