반응형

모바일 웹 개발시 유용한 팁


[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, 001);
}, 
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 기법 & 스프라이프기법



4. tel schema  

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


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

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


터치 이벤트 핸들러
touchstart
touchmove
touchend
touchcancel


터치 제스처 핸들러
gesturestart
gesturechange
gestureend


개발 관련 샘플




validator 


UI frame work
PhoneGap- Create Applications with HTML and Javascript : http://www.phonegap.com/
iPhone User Interface Framework : http://code.google.com/p/iui/


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


디자인 관련
모바일 사이트 샘플 : http://www.mobileawesomeness.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



크로스 브라우징
/* 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


html5 관련

html 레이아웃만들기

html cavas 예제

Canvas (basic support)
Audio element
Video element


GEO관련

 

반응형
반응형

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions"  prefix="fn"%>

 

${fn:escapeXml(myName)}

 

반응형
반응형

password 자동완성 막기

 

크롬에서
아이디 비번 저장 한 경우,
< input type="password" id="user_pwd" name="user_pwd" autocomplete="off">

 


이게 한개면 자동으로 세팅된다.
그래서 가짜 패스워드를 만들어 주면 된다.

 


< input type="password" id="user_pwd_fake" name="user_pwd_fake" autocomplete="off" style="display: none;">
< input type="password" id="user_pwd" name="user_pwd" autocomplete="off">
반응형
반응형

페이스북 developer 에서 app을 새로 생성하면 주는 key를 입력해주면 된다.

 

You wanted to have Facebook Like Button or Facebook Like Box and other Facebook social plugins on your website. You copy pasted to code Facebook generated for you on your web pages. If you do not have an App ID when you copied this, chances are the Facebook script will complain in your Web Browser’s console (e.g Firebug Console).

Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().
 
all.js#xfbml=1 (line 56)

To fix this issue, just do a “Create New App” in the Apps section in Facebook. And then go back to the Facebook Social Plugins page, pick a plugin, and regenerate the code for it.

Your Facebook plugin code before having an App ID:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

After you have assigned an App to the plugin

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=<your-16-digit-app-id>";  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Notice the difference in the highlighted code? Let me know if this solved your problem in the comment area.

반응형
반응형

저 두 녀석간에 어떤 차이점이 있는것일까? sendRedirect가 안되면 getRequestDispatcher를 사용하곤 했는데 원인을 찾아봐야 할 필요성이 생겼다.

1. response.sendRedirect("/contextName/helloWorld.jsp");

전송되는 페이지의 HTTP HEADER에 리다이렉트 정보를 담아 보낸다. 브라우저가 HEADER 정보를 분석한 후 원하는 URL로 리다이렉트 시킨다. sendRedirect 이후에 세션, 쿠키, 헤더 정보를 조작하는 로직이 있다면 Cannot create a session after the response has been committed 에러를 내뱉는다. 비지니스 로직에서 sendRedirect를 하게 된다면 과감하게 return 시키자. 경로에는 컨텍스트명을 포함한 절대 경로(/로 시작하거나 http로 시작하는 풀 주소)로 적어주어야 한다.

2. request.getRequestDispatcher("/helloWorld.jsp").forward(request, response);

해당 코드가 실행되는 순간 이동할 페이지를 강제로 읽어들여 리다이렉트 한다. 브라우저에게 의사 결정권이 없다.
이후의 코드가 무시된다. sendRedirect와 같은 기능을 하지만 sendRedirect는 request/response를 잃는 반면 getRequestDispatcher의 경우 재활용 한다. 경로에는 컨텍스트명을 제외한 경로를 적는다.

참고 :
http://www.jguru.com/faq/view.jsp?EID=223732
http://saloon.javaranch.com/cgi-bin/ubb/ultimatebb.cgi?ubb=get_topic&f=50&t=009192

반응형
반응형

EL (Expression Language)

1) 해석 그대로 표현언어임 (JSP 2.0 에서 새로 추가된 스크립트 언어)

2) <%=hello%> 코드를 EL 로 표현하면 ${hellow} 로 표현<%= %> ${ } 로 표현함

) test 변수를 표현할 때 => ${test}

hellow 객체의 test 변수를 표현할 때 => ${hellow.test} 또는 ${hellow[‘test’]}

EL 의 내장객체

 

내장 객체

설명

pageScope

Page 영역에 존재하는 객체를 참조할 때 사용

requestScope

Request 영역에 존재하는 객체를 참조할 때 사용

sessionScope

Session 영역에 존재하는 객체를 참조할 때 사용

applicationScope

Application 영역에 존재하는 객체를 참조할 때 사용

param

파라미터 값을 얻어올 때 사용

paramValues

파라미터 값을 배열로 얻어올 때 사용

header

Header 정보를 얻어올 때 사용

headerValues

Header 정보를 배열로 얻어올 때 사용

cookie

쿠키 객체를 참조할 때 사용

initParam

컨텍스트의 초기화 파라미터를 의미함

pageContext

pageContext 객체를 참조할 때 사용

 

 

EL 연산자

 

연산자

설명

.

빈 또는 맵에 접근하기 위한 연산자

[ ]

배열 또는 리스트에 접근하기 위한 연산자

( )

연산할 때 우선 순위를 주려고 할 때 사용

X ? a:b

X의 조건이 만족하면 a를 리턴, 만족하지 않으면 b를 리턴

Empty

값이 NULL 일 경우 true를 반환함

 

 

EL 산술연산자

 

연산자

설명

+

더하기 연산자

-

빼기 연산자

*

곱하기 연산자

/ 또는 div

나누기 연산자

% 또는 mod

나머지 연산자

 

 

EL 논리연산자

 

연산자

설명

&& 또는 and

모두 만족하면 true 그렇지 않으면 false 반환

|| 또는 or

하나라도 만족하면 true 그렇지 않으면 false 반환

! 또는 not

값을 만족하지 않으면 true 만족하면 false 반환

 

 

EL 비교연산자

 

연산자

설명

== 또는 eq

값이 같으면 true 그렇지 않으면 false 반환

!= 또는 ne

값이 다르면 true 그렇지 않으면 false 반환

< 또는 lt

보다작다

> 또는 gt

보다크다

<= 또는 le

같거나 작다

>= 또는 ge

같거나 크다

 

 

\ escape 문자 표현식 앞에 \를 붙이면 해당 표현식 부분은 파싱되지 않고 문자열 자체로 인식

반응형
반응형

 

 

반응형
반응형

default 값으로 Package Explorer 를 쓰면 classes 폴더가 보이지 않는다

classes 폴더밑에 log4j.xml 파일을 만들어서..

이걸 eclipse에서 보려구 했는데 classes 폴더가 안보여서..;;

방법은

상단 메뉴에서 [Window] - [Show View] - [Navigator] 창을 활성화 시킨다음에 보면된다

반응형

+ Recent posts