모바일용 웹사이트를 개발한다고 하자

제일 먼저 default.css (우리는 basic.css)를 정해야 할 것이다.

네이버 m.naver.com

  • http://m.news.naver.com/css/news/d.css
  • common css 설정부분
    /*common*/
    * {
     margin:0;
     padding:0;
     font-family:"나눔고딕", NanumGothic, "굴림", Gulim, Helvetica, AppleGothic, Sans-serif;
     -webkit-text-size-adjust:none;
    }
    body {
     position:relative;
     background-color:#f8f8f8;
     line-height:1.25em;
     color:#000;
     word-wrap:break-word;
     word-break:break-all;
    }
    body, input, select, textarea {
     font-size:14px;
    }
    .it, textarea {
     border:1px solid #bcbcbc;
    }
    li {
     list-style:none;
    }
    table {
     border-collapse:collapse;
    }
    img, fieldset {
     border:none;
    }
    a {
     color:#000;
     text-decoration:none;
     cursor:pointer;
    }
    label {
     cursor:pointer;
    }
    strong {
     font-weight:normal;
    }
    em, address {
     font-style:normal;
    }
    .hc {
     visibility:hidden;
     overflow:hidden;
     position:absolute;
     left:-1000em;
     width:0;
     height:0;
     font-size:0;
     line-height:0;
    }
    .nc, hr {
     display:none !important;
    }
    .is {
     width:19px;
     height:19px;
    }
    .fx {
     max-width:100%;
    }

     

다음 m.naver.com

  • 별도의 css를 만들지 않고 넣어버림
  • http://photo-media.daum-img.net/css/media3/style_IPN.css
  • common css 설정부분
    /* base */
    body {
     margin: 0;
     padding: 0;
     background-color: #fff;
     -webkit-text-size-adjust: none;
    }
    img, fieldset {
     border:0 none;
    }
    dl, ul, ol, li {
     list-style: none;
    }
    hr {
     display:none;
    }
    h1, h2, h3, h4, h5, dl, dt, dd, ul, li, ol, th, td, p, blockquote, form, fieldset, legend, body {
     margin: 0;
     padding: 0;
     font-family: '돋움', 'Dotum', '굴림', 'gulim', 'Helvetica', 'Apple-Gothic';
     font-size: 15px;
    } /* font-size는 달라짐 */
    a {
     text-decoration: none;
     text-overflow:ellipsis;
     -o-text-overflow:ellipsis;
     color:#333;
    }
    a:link, a:hover, a:active {
     text-decoration: none;
    }
    input, select, textarea {
     font-size: 100%;
     vertical-align: middle;
    }
    em {
     font-style:normal;
    }
    /* common */
    .border {
     border:1px #c00 solid;
    }
    .hidden {
     display:none;
    }
    .clr {
     clear: both;
    }
    /* layout */
    body {
     margin: 0;
     padding: 0;
     background-color: #fff;
     -webkit-text-size-adjust: none;
     letter-spacing:-1px;
    }


특징중 하나는 폰트 사이즈를 12px가 아닌 14px를 사용한다는 것이다.
모바일 웹브라우저가 많이 표현하기 위해 화면을 축소하기 때문에 보정차원에서 2px 정도 키워야 되나보다.

그래서 다음과 같이 basic.css를 우선 정해본다. 네이버 참고해서.

@charset "euc-kr";
/* euc-kr / utf-8 */

/* SPB3 Basic Style Beta1 10/04/18 by Sunmin Park(http://twitter.com/sitehis) */
* {
 margin:0;
 padding:0;
 font-family:"나눔고딕", NanumGothic, "굴림", Gulim, Helvetica, AppleGothic, Sans-serif;
 -webkit-text-size-adjust:none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
 /* margin: 0;
 padding: 0; */
 border: 0;
 outline: 0;
 font-size: 100%;
}
html, body {
 height:100%;
}
body {
 font-size:12px;
 color:#666;
 line-height:1.5;
 word-wrap:break-word;
 word-break:break-all;
}
img, fieldset {
 border:0 none;
}
input, select, textarea, h1, h2, h3, h4, h5, h6, table {
 font-weight:normal;
 font-size:12px;
 color:#666;
}
form, input, textarea, fieldset, ul, ol, dl, li, dt, dd, blockquote, p {
 margin:0;
 padding:0;
}
input, select, textarea {
 vertical-align:middle;
}
label {
 cursor:pointer;
}
ol, ul, li {
 list-style:none;
}
table {
 border-collapse:collapse;
 border-spacing:0;
}
a:link, a:visited {
 text-decoration:none;
 color:#666;
}
a:active, a:hover, a:focus {
 text-decoration:underline;
}
/* sitehis.com default tag */
input.basic {
 height:14px;
 border:1px solid #ccc;
 padding:2px 5px 0 5px;
}
select.basic {
 height:18px;
}
/* sitehis.com default class */
.hide {
 display:none;
}
.clear {
 clear: both;
}
.overflowtext { /* 오버플로우 */
 width:550px;
 overflow-x:hiddin;
 overflow-y:hiddin;
 clear:left;
}
/* 여백전용 */
.pd_l5 {
 padding-left:5px;
}
.pd_l10 {
 padding-left:10px;
}
.pd_l15 {
 padding-left:15px;
}
.pd_l20 {
 padding-left:20px;
}
.pd_r5 {
 padding-right:5px;
}
.pd_r10 {
 padding-right:10px;
}
.pd_r15 {
 padding-right:15px;
}
.pd_r20 {
 padding-right:20px;
}
.pd_r40 {
 padding-right:40px;
}
/* p tag for 모바일 */
.p14 {
 font-size: 14px;
}

  • 네이버를 따라 * {} 형식으로 margin, padding 추가
  • 네이버 배포 나눔고딕을 디폴트 폰트로 정함
  • 모바일용은 class p14를 이용하여 글자 확대함


조언을 부탁드립니다.
98년도부터 PHP 프로그램 개발로 시작하여 바로 웹분야 창업을 한 경영자라서,
요즘 중요하게 생각되는 웹표준 가이드에 대해서 세심하게 개발자 공부를 할 수가 없습니다.
작성한 내용에 대해서 오류나 수정할 부분이 있으면, 트위터(@sitehis)로 알려주시기 바랍니다.

저작자표시

'모바일웹 > Tip&Tech' 카테고리의 다른 글

모바일웹 관련 팁앤테크  (0) 2013.05.23
[펌]모바일 웹 환경 설정 하기  (0) 2012.09.18
추천 웹 사이트  (0) 2011.03.27
[서블릿기초] 5. 초간단 MVC 만들어보기 JSP기초정리 / JSP  (0) 2010.12.15
출처 : http://cafe.naver.com/domfam/4738
         웹디들의커뮤니티카페 
 
 

1. meta & link

 

[Viewport] - 기본설정

모바일 웹브라우저의 기본 화면크기 및 확대/축소 배율등을 정하는 모바일 웹사이트 및 웹앱을 만들시 제일 중요한 Meta 태그입니다.
기본적으로 아이폰의 사파리 웹브라우저는 넓이가 980px인 해상도로 보여주기 때문에 아이폰에서 아이폰3G(S)에 맞춰 디자인 한 웹페이지(320x480)를 본다고 가정한 경우 뷰포트를 설정하지 않는다면 가로 좌우 여백이 330px의 여백이 남는 아주 작은 화면을 보게 됩니다.

다음처럼 뷰포트를 사용하면 1:1 비율로 아이폰의 해상도에 맞게 최적화 할 수 있습니다.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

width : 넓이 - device-width | N px (200~10000 px, default 980 px)
height : 높이 - device-height | N px (223~10000 px)
initial-scale : 초기 확대/축소 배율
minimum-scale : 최소 축소 배율 - N (0~10, default 0.25)
maximum-scale : 최대 확대 배율 - N (0~10, default 1.6)
user-scalable : 확대/축소 가능 여부 - yes | no (default yes)

 

각각의 설정 값과 기본 값은 위와 같으며, 사용자에 따라 최적화된 환경을 제공할 수 있도록 각각의 속성을 설정하는것이 중요합니다.

 

 

[자동 전화걸기 태그 방지] - 기본설정 

<meta name="format-detection" content="telephone=no" />

전화번호형식의 경우 자동으로 전화걸기로 연결되는데 no로 할 경우 불가능하도록 한다.

// [전체화면 모드]가 적용된 경우는 자동 전화걸기 태그 방지가 먹지 않습니다.;;

 

 

[홈 화면 아이콘] - 기본설정

아이폰의 경우 웹 페이지를 앱처럼처럼 홈 화면에 바로가기를 추가할 수 있습니다.
단순히 아이콘만 설정 가능한 것이 아니라 아이폰의 홈 화면 아이콘들의 공통점인 라운드 박스 효과는
기본적으로 적용되고, 반사광 효과의 적용 유무를 추가로 선택이 가능합니다.


// 반사광 효과를 주는 경우
<link rel="apple-touch-icon" href="../images/icon.png" />
// 반사광 효과가 없는 경우
<link rel="apple-touch-icon-precomposed" href="../images/icon.png" />

apple-touch-icon.png / apple-touch-icon-precomposed.png 의 파일명으로 도메인의 최상위 경로에 올려두면
위의 link 태그를 적용하지 않아도 홈 화면에 추가시 아이콘이 적용됩니다.

기기별 홈 아이콘 이미지 사이즈
: 아이폰3G, 아이폰3GS [ 사이즈: 57*57 ]
: 아이패드 [ 사이즈: 72*72 ]
: 아이폰 4 [ 사이즈: 114*114 ]

홈 아이콘 작업시 주의사항!!
- 이미지는 네모 : 사파리 브라우저에서 홈 아이콘 등록시 기본으로 라운드 박스 효과 적용됩니다.
- 라운드 박스 작업 No : 이미지를 라운드 박스로 작업할 경우 홈아이콘 추가시 깨져보임니다.
- 반사광 없이 작업 : 기본으로 반사광이 들어가며, 반사광 여부를 설정할 수 있습니다.
- 이미지는 png로 저장!!

 

 

[파비콘] - 기본설정 추천

안드로이드 스마트폰은 버전에 따라 홈화면 아이콘 및 파비콘을 홈화면 아이콘으로 사용합니다.

일부 낮은 버전에는 책갈피 모양만 나오는 경우가 있습니다.

파비콘 *.ico
포토샵 & 아래 사이트를 이용해 이미지를 만들수 있다.
http://www.favicon.cc/ 그림판 같은.. 도트로 파비콘을 만들 수 있는 사이트
http://www.degraeve.com/favicon/ 직접그려서 만들수도 있고, 기존 이미지 변환도 시켜준다

<link href="/favicon.ico" rel="shortcut icon">

홈 아이콘 & 파비콘 등록 방법 : link & root & js (아이폰vs안드로이드 & 버전에따라 넣을경우는 js을 이용합니다.)

 


[툴바감추기] - 기본설정  (세트)

자바 스크립트로 웹 페이지에 접속시 자동으로 스크롤을 상단의 주소 표시줄만큼 내려 상단의 주소표시줄이 사라진 것 처럼 만들수 있습니다.
<script type="text/javascript">

window.addEventListener('load', function(){
setTimeout(scrollTo, 0, 0, 1);
}, false);
</script>

 


[전체화면 모드] 아이폰용  (툴바감추기도 적용되어 있어야 적용됩니다.) (세트)

웹 페이지를 홈 화면으로 추가하면 특정 Meta 태그를 통해 웹 브라우저의 상단의 주소 표시줄과 하단의 버튼 Bar를 없앨 수 있습니다.
단 홈 화면에 추가한 후 홈 화면의 아이콘을 통해 접속 했을 경우에만 적용이 됩니다.

<meta name="apple-mobile-web-app-capable" content="yes">
자바스크립트의 window.navigator.standalone의 결과값(true/false)으로 전체화면 모드 유무를 알 수 있습니다.

 

 
[스플래시 스크린] 아이폰용  (세트)

스플래시 스크린이란 웹 페이지를 홈 화면에 추가한 후 실행할때 잠깐동안 로고나 이미지를 보여주고 사라지는 화면입니다.
<link rel="apple-touch-startup-image" href="/images/startup.png">

전체화면 모드에서 설명한 apple-mobile-web-app-capable Meta 태그를 적용해야 스플래시 스크린도 적용됩니다.
<meta name="apple-mobile-web-app-capable" content="yes" />

덧. 빠르게 화면이 열릴때는 안보이거나 잠시 보여진 후 화면이 메인으로 넘어감니다.

 

  스플래시 스크린 이미지 사이즈
  - iPhone3 320 * 480 => 320 * 460
  - iPhone4 640 * 960 => 640 * 940
  - 아이패드 768 * 1024 =>768 * 1004

 


[상태바 색상 설정] (bar에 style 입히기) 아이폰용 (세트)

아이폰 상단의 상태 Bar의 경우 3가지 테마를 Meta 태그로 설정할 수 있습니다.
특별한 기능이 있는건 아니지만 디자인을 좀 더 통일성 있게 만들수 있다는 점에서 원하는 색상으로 적용하시면 됩니다.

<meta name="apple-mobile-web-app-status-bar-style" content="default"> // 기본 밝은 계열
<meta name="apple-mobile-web-app-status-bar-style" content="black"> // 검정색
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> // 반투명 검정색
: 반투명하게 할 경우 bar 높이만큼(20) 여백을 주어야 합니다. 아니면 본문내용이 반투명한 바와 겹치게 됩니다.

 

 

[화면 높이가 너무 짧을 경우]

<meta name="viewport" content="height=device-height,width=device-width" />
: 경우에 따라 사용하셔야 합니다. 세로화면에서 적용한 경우 가로모드로 돌려볼 경우 화면깨짐 현상이 생겨남니다.

세로 고정인 웹앱인 형태나 가로모드지원을 안하는 모바일 웹작업할 경우 유용할 듯 합니다.

 

 

2. css 

 

[폰트 사이즈 고정하기] - 기본설정

모바일 디바이스의 경우 화면을 가로/세로로 전환할 수 있습니다. 웹킷 기반의 웹 브라우저는 뷰포트의 크기에 따라
폰트 사이즈가 변경되는데 보통 그러한 기능이 화면을 깨트리는 경우가 발생하여 CSS를 이용해 폰트 사이즈를 고정시키기도 합니다.

폰트 사이즈를 고정시키려면 고정시킬 곳에 다음 CSS를 추가하면 됩니다.

-webkit-text-size-adjust:none;

-webkit-text-size-adjust - auto | none | N% (default auto)

 

 

[css의 분리]

<link rel="stylesheet" href="small-screen.css"  type="text/css" media="only screen and (max-device-width: 480px)"  />

 

 

 

3. mobile기법 

 

ir 기법 & 스프라이프기법

http://m.naver.com

http://m.daum.net

 

 

 

4. tel schema  

 

스키마 링크

tel: 스키마 : <a href="tel:12345678900">Call me</a> 

sms: 스키마 : <a href="sms:12345678900">Send me a text</a>

 

 

----------------------------------------------------------------------------------

 

rotation

window.onorientationchange = function() {
  alert(window.orientation);
} 

 

 

터치 이벤트 핸들러

touchstart
touchmove
touchend
touchcancel

 

 

터치 제스처 핸들러
gesturestart
gesturechange
gestureend

 

 

개발 관련 샘플

http://www.iphonewebdev.com/examples/

 

 

 

 

validator 

w3c : http://validator.w3.org/mobile/

mobi : http://ready.mobi/launch.jsp?locale=en_EN

 

 

UI frame work

iwebkit : http://iwebkit.net

jqtouch : http://www.jqtouch.com/

yahoo blueprint : http://mobile.yahoo.com/developers

wapl : http://wapl.info/

PhoneGap- Create Applications with HTML and Javascript : http://www.phonegap.com/

iPhone User Interface Framework : http://code.google.com/p/iui/

 

 

개발 사이트

애플 개발가이드 : http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html#//apple_ref/doc/uid/TP40002079-SW1

사파리 개발 : http://developer.apple.com/safari/

오페라 미니 미리보기(JAVA) : http://www.opera.com/mobile/demo/

 

 

디자인 관련

모바일 사이트 샘플 : http://www.mobileawesomeness.com/

아이폰 PSD 백터 : http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/

아이폰 4 : http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/

아이폰 개발 어플 : http://itunes.apple.com/app/liveview/id301069270?mt=8

벡터 아이콘 : http://www.iphonedesigntools.com/

 

 

CSS3 관련 

모바일 사이트 샘플

CSS3 Box-sizing

CSS3 Colors

CSS3 selectors

CSS3 Rounded corners (border-radius)

CSS3 Text-shadow

CSS3 Box-shadow

CSS3 Transforms

CSS3 Multiple backgrounds

CSS3 Border images

CSS3 Background-image options

CSS3 Transitions

CSS3 Multiple column layout

CSS3 Grident

 

pure css3 : http://graphicpeel.com/cssiosicons

css3 btn : http://css3pie.com/

 

 

크로스 브라우징

/* FireFox 3.6 */ background-image: -moz-linear-gradient(top, #9FD4FF, #008CFF); /* Safari4+, Chrome */ background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #008CFF),color-stop(1, #9FD4FF)); /* IE6,IE7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9FD4FF', endColorstr='#008CFF'); /* IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#9FD4FF', endColorstr='#008CFF')";

 

 

font-face

google API : http://code.google.com/webfonts

 

 

html5 관련

 

html 레이아웃만들기

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

 

html cavas 예제

http://9elements.com/io/projects/html5/canvas/

 

Canvas (basic support)

Audio element

Video element

 

 

GEO관련

http://isithackday.com/hacks/geo/yql-geo-library/ 

[출처] 모바일 웹 개발시 유용자료 (meta 설정 등등)|작성자 딱히

저작자표시

'모바일웹 > Tip&Tech' 카테고리의 다른 글

모바일웹 관련 rlqhs CSS  (0) 2013.05.23
[펌]모바일 웹 환경 설정 하기  (0) 2012.09.18
추천 웹 사이트  (0) 2011.03.27
[서블릿기초] 5. 초간단 MVC 만들어보기 JSP기초정리 / JSP  (0) 2010.12.15

1. 작은 모바일 화면에 맞게 웹페이지 화면 맞추기

아래 META 태그를 쓰면  화면이 모바일 화면에 딱 맞춰서 확대되어 보이게 됩니다. 
다른 플랫폼은 모르겠고 아이폰 같은 경우는 가로가 480px 이라 생각해서 화면을 맞추면 되더군요 

 
 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

 initial-scale  <- 확대 비율
 maximum-scale <- 최대 확대 비율
 user-scalable <- 유저가 화면을 확대 하게 하는가 
  

2. 가장 상위 오브젝트는 수치로 가로를 넣어줘야합니다! 
※ %로 넣어줄시  제대로 크기가 적용되지 않습니다.
 
  ex>  <div style="width=100%;">  --->   <div style="width=480px;">
  

3. 아이폰에서 동영상 재생을 하고 싶다면 MP4파일을 링크 시켜라
※ 오페라 같은경우 아래와 할경우 파일이 다운이 되더군요,, 무튼 옴니아2에서도 동작은 한다는 이야기입니다.. 친구폰 데이터요금이 걱정되는 바람에 다운받다가 그냥 실행되는 화면은 보지 못했습니다. 아이폰에서는 약간의 딜레이(곰티비, 다음TV팟 모두 그렇듯)를 거치면 영상이 아주 잘 재생됩니다.
 
 <A HREF="AAAA.mp4"> 동영상보기 </A>
  

4. 바로가기  아이콘 만들기 (아이폰)
모바일웹하다가  [+] 버튼을 눌루면 홈화면에 추가 라는 버튼이 있는데 그럼 아이폰에서는 어플들처럼 아이콘으로 저장됩니다. 그때 아이콘을 아래와 같이 소스로 하면 원하는 이미지로 넣을수 있습니다
아이폰 어플 특유의 라운딩과 반사처리는 자동으로 됩니다~~!!
 
 <link rel="apple-touch-icon" href="/images/icon.png" />
 
   
▲ 요것이 제 아이폰에 추가한 자주들락날락하는 다음,네이버,엔카 아이콘입니다. 아이콘 설정을 해주지 않을경우 메인화면을 캡쳐해서 아이콘을 생성하는데 이럴경우 굉장히 미우니 신경쓰심이
좋을듯합니다~!
     



마지막으로 드리고 싶은 말씀은 자바스크립트 사용시 웹표준 고려하셔야 하는 거 잊지 말아야 하는 것과, 
전편에 쓴 주의사항과 오늘 작성한 팁을 활용하면 나의 모바일 웹 사이트를 쉽게 만드실수 있을꺼라 생각됩니다.




오늘은 모바일 브라우저를 체크하는 법을 알아보도록 하겠습니다.

스마트폰 인터넷 브라우저 ( 사파리, 오페라 , 모바일ie) 등을  열고 www.daum.net를 주소창에 써보면
신기하게  내가 모바일로 들어온지 알아서 체크해줘서 자동으로  m.daum.net/mini 으 로 보내주는걸  볼수 있습니다. 

우리의 모바일 홈페이지도 만찬가지로 사용자가 들어온 브 라우저를 확인하고 포워딩 시키는 것을 같이 해보도록 하겠습니다^^
(아래 포스팅은 웹 언어중 PHP 기준으로 서술하였습니다.)


시작하기 전에 먼저 가상 URL를 정하겠습니다.
 - PC버전 URL :    www.web2log.com
 - 모바일버전 URL :  m.web2log.com 


PC 버전 페이지 상단에  브라우저 체크해주는 파일을 인크루드 하여 아래와 같이 소스를 작성합니다.

<?php
 $arr_browser = array ("iPhone","iPod","IEMobile","Mobile","lgtelecom","PPC");

for($indexi = 0 ; $indexi < count($arr_browser) ; $indexi++) {
 if(strpos($_SERVER['HTTP_USER_AGENT'],$arr_browser[$indexi]) == true){
  // 모바일 브라우저라면  모바일 URL로 이동 
   header("Location: http://m.web2log.com/");
   exit;

 }
}

?>


소스 설명을 하기 전에 
$_SERVER['HTTP_USER_AGENT'] 라는  서버 함수에 대해 약간의 설명을 하고 지나가겠습니다.

$_SERVER['HTTP_USER_AGENT']  는 유저의 브라우저 정보를 알수 있는  서버 함수 입니다. 
ASP 와 JSP 에서도 비슷한 함수가 있는 걸고 알고 있습니다 ^^ HTTP_USER_AGENT 로 검색하시면 찾으실 수 있으실거예요^^;

저 함수를 쓰면 Mozilla/4.0(compatible; MSIE 6.0; Window NT5.1; Q312461; .NET CLR 1.0.3705 이런식으로 화면에 표기됩니다. (물론 IE에서 접속하신분들만요 ^^ 파이어폭스나 사파리 오페라는 각각 다르게 나오죠) 

이제 $_SERVER['HTTP_USER_AGENT'] 함수가 뭐하는 함수인지 아시니 그만하도록 하구요.
위에 브라우저 체크하는 소스 설명을 간단히 하겠습니다.

$arr_browser 는  배열 변수로 "iPhone","iPod","IEMobile","Mobile","lgtelecom","PPC" 이라는 단어를 저장했습니다.

즉, $_SERVER['HTTP_USER_AGENT'] 로 나오는 정보중에서  각각의 핵심 단어만 배열변수에 저장해둔거예요  (모바일 경우에만 나오는 단어들이죠 )

그리고 strpos 함수를 써서  배열함수에 들어가 있는 단어가  $_SERVER['HTTP_USER_AGENT'] 정보에 있다면 이 사람은 모바일 환경이 분명하니 모바일 홈페이지로 가게 해주는 아주 아주 간단한 소스랍니다 ^^; 이제  모바일 브라우저로 접속하는 유저만 콕 집어서  모바일 홈페이지로 보내줄수 있겠죠? ~~ 한번 해보세요!!!


※ 덧붙임 ..>> $_SERVER['HTTP_USER_AGENT'] 를 썼을 때 각각 브라우저 정보 

 
- MSIE 6.0
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) 

- Firefox 2.0.0.4
Mozilla/5.0 (Windows; U; Windows NT 5.1; ko; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

 - Opera 9.21
Opera/9.21 (Windows NT 5.1; U; ko)

 - Netscape 9.0b1
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.5pre) Gecko/20070604 Firefox/2.0.0.4 Navigator/9.0b1

- 크롬 
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_2; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.49 Safari/532.5

-LG 아르고폰(LG텔레콤) 
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; 800*600;POLARIS 6.0;em1.0;lgtelecom;EB10-200090218-707682823;LG-LH2300;0);


-iPod Touch 
Mozilla/5.0 (iPod; U; CPU like Mac OS X; ko-kr) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3


-옴니아 Opera Mobile 
SAMSUNG-SCH-M490/(null)HK4 (compatible; MSIE 6.0; Windows CE; PPC) Opera 9.5


-옴니아 IE Mobile 
SAMSUNG-SCH-M490/(null)HK4 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11)

출처:[모바일웹] 모바일 홈페이지를 만들어보자 (퍼온글)


저작자표시

'모바일웹 > Tip&Tech' 카테고리의 다른 글

모바일웹 관련 rlqhs CSS  (0) 2013.05.23
모바일웹 관련 팁앤테크  (0) 2013.05.23
추천 웹 사이트  (0) 2011.03.27
[서블릿기초] 5. 초간단 MVC 만들어보기 JSP기초정리 / JSP  (0) 2010.12.15
http://blog.naver.com/manin21st?Redirect=Log&logNo=30101675901
저작자표시

'모바일웹 > Tip&Tech' 카테고리의 다른 글

모바일웹 관련 rlqhs CSS  (0) 2013.05.23
모바일웹 관련 팁앤테크  (0) 2013.05.23
[펌]모바일 웹 환경 설정 하기  (0) 2012.09.18
[서블릿기초] 5. 초간단 MVC 만들어보기 JSP기초정리 / JSP  (0) 2010.12.15

[서블릿기초] 5. 초간단 MVC 만들어보기 JSP기초정리 / JSP

2010/01/09 20:13

복사 http://blog.naver.com/pksaladin/30077871911

앞서 설명한 이론상의 설명으로는 뭔가 부족하다는 분들을 위해서 이제는 직접 코딩해보고 느껴보도록 하겠습니다. 일단 모델1을 작성해보고 이것을 모델2로 바꿔보는 형식으로 작성하겠습니다.

잘 따라서 해보시길 바랍니다.

 

먼저 모델 1 패턴으로 간단하게 텍스트 필드에 값을 받고 결과값을 출력받는 예제를 만들어보겠습니다.

 

 모델 1 패턴

 

index.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>

<body>
<form action="result.jsp" method="post">

<table border="1">
<tr>
<td>당신의 이름은?</td>

</tr>
<tr>
<td><input type=text size="10" name="name"></input>
<input type="submit" value="확인"></input></td>
</tr>
</table>
</form>
</body>
</html>

 

 

 

result.jsp

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
   <%
  String name1 = (String)request.getParameter("name");//앞에서 쓴 name값을 받아서 name1에 전달합니다.
   %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
당신의 이름은 <%=name1 %> //name1을 출력합니다.
</body>
</html>

 

<결과화면>

 

원하는 이름을 쓰고 확인을 누르면

 

 

다음과 같이 출력됩니다.

 

별다른 과정없이 위에 URL을보시면 다이렉트로 가게 됩니다.

이제 이 예제를 모델2로 바꿔보겠습니다.

 

 MVC 모델 2 패턴

 

index.html

 

기존의 인덱스 화면의 소스에서 form action부분을 바꿔주시면됩니다.

<form action="jungtest.bo" method="post">

jungtest.bo 이부분은 매핑 으로 생성한 가상 주소를 말합니다. 이제는 좀 아시겠죠

이제 web.xml로 자동으로 가야겠죠. 매핑을 지정해주러요

WEB-INF 폴더안에 web.xml이 보이실겁니다. 이부분을 열어서

 

 <servlet>
    <description></description>
    <servlet-name>jungtest</servlet-name>
    <servlet-class>jung.test_result.test</servlet-class> //풀경로를 적어줍니다. 제가 정한 패키지 위치는 jung 안에 test_result 안에 test.java파일입니다. 패키지 생성법은 이클립스기준 src클릭하시고 오른쪽버튼을 클릭하시면 패키지를 클릭하시면됩니다. 다른방법으로는 직접 src폴더에 생성해주시면 됩니다.
  </servlet>


  <servlet-mapping>
    <servlet-name>jungtest</servlet-name>
    <url-pattern>/jungtest.bo</url-pattern>
  </servlet-mapping>

 

이부분을 추가 합니다. 매핑분석 편을 보셨다면 쉽게 이해가 되실겁니다. 결과적으로

jungtest.bo == jung.test_result.test 이거겠죠.

매핑 설정이 끝났다면 이제 매핑으로 설정된 test.java파일을 작성해보도록하겠습니다.

 

test.java

package jung.test_result;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class test extends HttpServlet {
 private static final long serialVersionUID = 1L;
       
  //앞서 index.html에서지정한 method가 post로 기정했기 때문에 doPost로 가게 됩니다.

 
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // TODO Auto-generated method stub
  
  String name= request.getParameter("name");  //네임값을 넘겨 받고
  request.setAttribute("name1", name); // jsp에서 나중에 읽을 수있도록 속성값을 지정함
  RequestDispatcher view=
   request.getRequestDispatcher("result.jsp");//지정된 경로에 위치한 jsp파일에 작업을 부탁하기위해 RequestDispatcher인스턴스
  view.forward(request, response); //RequestDispatcher는 컨테이너에게 jsp를 준비하라고 요청 jsp에게 값객체를 넘김
  
 }

}

 

result.jsp

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
   <%
      String name1 =(String)request.getAttribute("name1"); //지정된 속성값을 받음
   %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<tr>
<td>당신의 이름은 <%=name1 %>입니다</td> //출력
</tr>


</table>
</body>
</html>

 

이제 실행을 해봅니다. 같은 결과 값이 나온다면 성공입니다.

그리고 URL을 주목해 봅니다. 기존의 모델1에서는 정확한 경로가 나왔지만 매핑을 해준결과로 저렇게 jungtest.bo로 나왔습니다. 쉽게 말해서 지정된 경로의 닉네임을 만들어준 셈이죠.

 

모델1의 경우 html과 jsp파일 두개로 끝이 났습니다.

모델2의 경우는 html에서 값을 넘기면 바로jsp로 가는게 아니라 매핑을 통하여 test.java쪽에 들렀다가

test.java쪽에서 지정한 페이지인 result.jsp로 가게 하도록 해놓았습니다.

 

직접만들어 보니까. 슬슬 감이 잡히지 않습니까?

 

IT·컴퓨터, mvc, 모델1, 모델2, model2

이 포스트를..

덧글 1개 엮인글 쓰기

저작자표시

'모바일웹 > Tip&Tech' 카테고리의 다른 글

모바일웹 관련 rlqhs CSS  (0) 2013.05.23
모바일웹 관련 팁앤테크  (0) 2013.05.23
[펌]모바일 웹 환경 설정 하기  (0) 2012.09.18
추천 웹 사이트  (0) 2011.03.27

+ Recent posts

티스토리툴바