CentOS: http://www.centos.org/

CMS Factory: http://www.cmsfactory.net/linux

Broko tistory: http://broko.tistory.com/category/Linux 

서버관리: http://develop.ablog.me/category/CentOS.aspx 

XP 서버에 XAMPP 1.6.4 (Apache + php + mysql) 환경에서 구동하는 경우,

트래픽이 그다지 없고, 대역폭이 여유로운 상황에서 서버 사양이 P4 3.0 Ghz 에 Ram 1G 환경이라
웹서버가 느려질 이유가 전혀 없음에도 불구하고, 상당히 느린 반응 속도가 고질 적인 문제 였습니다.

현재 한참 개발 중인 Zeroboard XE 문제도 아니었던 것이 Zeroboard 4 나 Wordpress 를 사용할 때에도
상당히 느린 반응 속도를 가지고 있었습니다.

생각 날때마다 mysql 이나 httpd.conf 설정을 살펴 보긴 했지만 해결이 되지 않았었는대, 문제 해결을 위한
가장 기본적인 접근 방법을 잊고 있었더군요. (서버를 만지는걸 어느 순간 신경 안쓰게 된 탓이겠지요)

Apache 의 error 로그를 뒤져 보았습니다.

 위와 같은 에러가 정말 많더군요. 이상 적인 CPU 점유율과 느린 반응의 원인이 MS 환경 (Win32- xp,2000 서버) 의 멀티 프로세스 모듈과 어우러진 아파치의 버그 더군요.

해결 방법은 httpd.conf 에 다음과 같은 라인을 추가 하는 것 입니다.

"Win32DisableAcceptEx"  이 라인 핵심 라인 입니다.

추가 시켜 주시고 아파치를 재구동 하면 됩니다.

http://www.mydigitallife.info/2006/03/09/winnt_accept-asynchronous-acceptex-failed-error-in-apache-log/  (영문)

이곳에서 확인하시면 서버 안정성에 문제를 발생 시킬 수도 있다고는 하는대, 서비스가 엄청나게
느려지는 것 보다는 나아서 httpd.conf 를 바꾸고 반응 속도를 보았더니 속이 다 시원합니다.

acceptEX 는 MS 가 만든 확장 Network API 라더군요. Linux 나 다른 OS 환경에서는 발생하지 않는 오류입니다.
개인적인 생각에 확장 API 를 사용하지않는 설정 이기 때문에 안정성과는 큰 관련이 없을 것이라 여겨집니다.

오류가 나온지 한참 되었는대도 아파치에서 수정되지 않는 걸 보면 MS 쪽 문제 일려나요

---

<추가>

Win32DisableAcceptEx 는 Apache version 2.0.49 부터 이후 버전에만 가능합니다

Apache 1.X 버전을 사용하고 있는 분들은 다른 해결책을 찾으셔야 합니다.


참고로 JSP환경에서 톰캣 서블릿 엔진과 아파치를 연동하여 사용할 경우에도 위와 같은 상황은 적용됩니다.
혹시, 아파치 2.2 버전에서 Win32DisableAcceptEx 구문을 넣었는데 이번에는 다른이유로 웹속도가 느려진다면
다음과 같이 지정해 주세요. 그러면, 속도가 눈에 띄게 향상될 것입니다.
참고로 이 설정은 MS에서 만든 확장 Network API 인 AcceptEx를 사용하지 않고 오리지널 Accept를 사용하도록 하는 설정입니다.
<IFModule mpm_winnt_module>
    Win32DisableAcceptEx
</IFModule>
 

$_SERVER['DOCUMENT_ROOT'] = 현재 사이트가 위치한 서버상의 위치 => /webapp/include

$_SERVER['HTTP_ACCEPT_ENCODING'] = 인코딩 받식 => gzip, deflate

$_SERVER['HTTP_ACCEPT_LANGUAGE'] = 언어 => ko

$_SERVER['HTTP_USER_AGENT'] = 사이트 접속한 사용자 환경 => Mozilla/4.0(compatible; MSIE 6.0; Windows NT 5.1; Q312461; .NET CLR 1.0.3705

$_SERVER['REMOTE_ADDR'] = 사이트 접속한 사용자 IP => xxx.xxx.xxx.xxx

$_SERVER['SCRIPT_FILENAME'] = 실행되고 있는 위치와 파일명 => webapp/include/index.php

$_SERVER['SERVER_NAME'] = 사이트 도메인 => www.eos.pe.kr

$_SERVER['SERVER_PORT'] = 사이트가 사용하는 포트 => 80

$_SERVER['SERVER_SOFTWARE'] = 서버의 소프트웨어 환경 => Apache/1.3.23 (Unix) PHP/4.1.2 mod_fastcgi/2.2.10 mod_throttle/3.1.2 mod_ssl/2.8.6 OpenSSL/0.9.6c

$_SERVER['GATEWAY_INTERFACE'] = cGI 정보 => CGI/1.1

$_SERVER['SERVER_PROTOCOL'] = 사용된 서버 프로토콜 => HTTP/1.1

$_SERVER['REQUEST_URI'] = 현재페이지의 주소에서 도메인 제외 =>  /index.php?user=???&name=???

$_SERVER['PHP_SELF'] = 현재페이지의 주소에서 도메인과 넘겨지는 값 제외 =/ index.php

$_SERVER['APPL_PHYSICAL_PATH'] = 현재페이지의 실제 파일 주소 => D:\webapp/


<?
$a1 = $_SERVER["REQUEST_URI"] ;

//웹 절대경로(?)
$a2 = $_SERVER["SCRIPT_NAME"];
$a3 = $_SERVER["PHP_SELF"] ;

//서버명
$a4 = $_SERVER["SERVER_NAME"] ;
$a5 = $_SERVER["HTTP_HOST"] ;

//웹서버 document 디렉토리
$a6 = $_SERVER["DOCUMENT_ROOT"];

//파일전체경로
$a7 = $_SERVER["PATH_TRANSLATED"] ;
$a8 = $_SERVER["SCRIPT_FILENAME"] ;
$a9 = __FILE__ ; //이건 좀 틀리져. 인클루드한 파일에서도


echo "
<br>
 \$_SERVER[\"REQUEST_URI=\"] ->  $a1 , $REQUEST_URI<br>
<br>
//웹 절대경로(?) <br>
\$_SERVER[\"SCRIPT_NAME\"] -> $a2  , $SCRIPT_NAME<br>
\$_SERVER[\"PHP_SELF\"]  ->$a3 , $PHP_SELF<br>
<br>
//서버명 <br>
\$_SERVER[\"SERVER_NAME\"] ->$a4 ,$SERVER_NAME<br>
\$_SERVER[\"HTTP_HOST\"] ->$a5 , $HTTP_HOST<br>
<br>
//웹서버 document 디렉토리 <br>
\$_SERVER[\"DOCUMENT_ROOT\"] ->$a6 , $DOCUMENT_ROOT<br>
<br>
//파일전체경로 <br>
\$_SERVER[\"PATH_TRANSLATED\"] ->$a7 , $PATH_TRANSLATED<br>
\$_SERVER[\"SCRIPT_FILENAME\"] ->$a8 , $SCRIPT_FILENAME<br>
<br>
\__FILE__ ; //이건 좀 틀리져. 인클루드한 파일에서도 ->$a9 <br>
<br>
";
?>

최근 이동전화를 비롯한 다양한 모바일 단말에서 웹 이용에 대한 요구가 점차 늘어가고 이는데, 이는 웹 기술이 유비쿼터스 환경에서의 다양한 유무선 통합 서비스를 실현 가능케 한다는 새로운 가치 발견에 근거하고 있다.

결국 이것은 유선과 무선의 웹 환경이 하나로 통합되어야한다는 자연스러운 요구로부터 시작된 것이며, 이를 통하여 다양하고 새로운 비즈니스의 기회들이 창출될 것으로 예측된다.

따라서 본고에서는 현재의 모바일 웹 환경에 대한 고찰과 함께, 모바일과 웹이 결합되는 차세대 모바일 웹 환경을 위한 표준화 동향과 이를 바탕으로 등장하는 모바일 웹의 새로운 가능성들을 조면하며, 나아가 향우 국내 모바일 웹 산업의 국제 경쟁력을 제고하기 위한 우리의 대응 전략에 대해서도 알아본다.

 

우리나라의 휴대폰을 중심으로 하는 모바일 시장은 최근 몇 년간 급속한 발전과 변화를 이루어 왔으며, 이동전화 보급률도 지난 ‘96년 319만명에서 올해에는 4천만명을 넘어서고 있는 것에서도 알 수 있듯이, 이미 양적인 측면에서는 매우 큰 성장을 해오고 있다. 아울러 국내 모바일 단말 중 인터넷 접속이 가능한 단말의 보급율은 89%로 세계 1위에 해당하며, 모바일 단말을 이용한 무선 인터넷 사용률도 42%로 일본에 이어 세계 2위를 차지하고 있으며, 이러한 수치들은 일본을 제외한 나머지 국가들에 비해 2배 이상인 것으로 압도적인 우위를 보여주고 있다. 또한 최근에 다양한 융복합 모바일 단말이 확산되고, HSDPA를 비롯한 와이브로 등 본격적인 무선 인터넷 서비스가 시작되면서 모바일 단말을 통한 인터넷 이용에 대한 요구가 점차 높아지고 있으며, 실제로 모바일 단말에서도 유선과 같이 자유롭게 인터넷 웹 서핑을 원하는 기대 수준은 매우 높다고 할 수 있다. 

 

 

 

1. 개요 및 현황

 

하지만 현실은 그러한 무선인터넷 인프라의 성숙에도 불구하고 모바일 환경에서의 웹 응용과 활용 그리고 이를 통한 신규 비즈니스의 창출 측면에서 상대적으로 상당히 미미한 수준이라고 할 수 있다. 이런 현상의 원인은 모바일 웹 이용에 대한 비표준의 난립, 비싼 요금과 낮은 통신 속도, 불편한 사용자 인터페이스 그리고 사업자 중심의 폐쇄적인 모바일 서비스 환경과 수직적이고 계층화된 비즈니스 모델 등이 주요한 원인으로 꼽힌다.

이처럼 복합적인 문제를 안고 있는 모바일 웹 서비스 환경을 개선하기 위한 선결사항은 올바른 표준의 개발과 확산으로부터 시작된다고 할 수 있으며, 최근 W3C 등의 국제표준화 기구를 중심으로 관련 표준화가 적극적으로 추진되고 있다. 아울러 웹2.0의 등장과 함께, 웹을 통한 새로운 비즈니스의 기회는 모바일에서 더욱 큰 반향을 불러일으키고 있는 등 모바일 웹의 새로운 변혁기를 맞이하고 있다.

 

 

 

우선 기존의 모바일 웹 환경이 “모바일 웹 2.0”으로 진화하도록 만드는 몇 가지 배경들은 다음과 같다.

① 초고속 무선 인프라의 보급 : 최근 무선 통신 기술의 발전으로 HSDPA, WiBro 등과 같은 초고속 무선 인프라의 보급은 통신속도와 통신비용의 문제를 해결해주고 있으며, 이를 통해 모바일 응용에 대한 인식을 새롭게 해주며, 이동성에 대한 장점을 극대화시키는 핵심 역할을 하고 있음

② 모바일 단말의 고성능화 : 최근 모바일 단말은 화면 해상도와 메모리 용량 등이 크게 향상되어 처리할 수 있는 응용의 종류가 많아지고 있으며, 이로 인해 단말 성능의 절대적 한계라는 제약은 상당부분 사라지고 있음

③ 모바일 단말로의 컨버전스화 : LBS, GPS, RFID, MP3, DMB 등 다양한 기능이 상호 융합됨에 따라 모바일 단말의 기능은 단순 브라우징 방식에서 벗어나, 방송과 융합된 웹(IPTV), RFID나 LBS와 융합된 웹 응용 등과 같은 유비쿼터스 웹 응용들을 가능하게 하고 있음

④ 웹 표준의 발전과 재인식 : 다양한 단말을 대상으로 하는 웹 표준 기술에 대한 인식 변화인데, 웹 2.0을 중심으로 웹 표준에 기반한 AJAX 같은 새로운 사용자 인터페이스 방식의 복잡한 웹 응용들이 가능하게 됨으로써 웹 표준과 기술의 가치에 대한 재발견이 이루어졌다는 점과 함께, W3C의 MWI, MobileOK 등의 모바일 웹 표준화 활동을 통해 유무선 호환 콘텐츠, 유비쿼터스 웹 환경의 필요성에 대해서도 많은 인식 개선이 이루어지고 있음

⑤ 웹 2.0 기반의 새로운 수익모델 창출 : 웹 2.0의 “공유”, “개방”, “협력”, “참여”라는 키워드로 기존의 서비스들을 재평가하고 새로운 수익모델을 찾기 위한 노력들이 시작되고 있으며, 개방형 서비스 모델로 리스크와 중복성을 줄이며, 웹서비스와 매쉬업 등을 통해 새로운 응용과 장점들을 찾기 위한 시도들이 유/무선을 연계하며 시작됨

 

 

2.2 모바일 웹 2.0의 주요 특징

모바일 웹 2.0의 특징은 기존의 모바일 웹(모바일 웹 1.0)과 비교하여 <표1>과 같이 정리 할 수 있는데, 이 중에서 모바일 웹 2.0 환경의 가장 큰 특징 6가지는 다음과 같다.

   ① 고속 무선망 환경

   ② XML 기반의 콘텐츠 처리 방식

   ③ 표준 기반의 개방형 환경

   ④ RFID 및 LBS 등과 연계한 유비쿼터스 브라우징

   ⑤ 개방형 API와 모바일 웹서비스

   ⑥ AJAX와 같은 표준 기반의 고급 사용자 인터페이스 제공

결국 모바일 웹 2.0에서도 웹 2.0과 마찬가지로 기존 1.0과의 가장 큰 차이점은 다양한 모바일 기술과 응용들을 엮는 “플랫폼으로서의 모바일 웹”이 된다는 점이다.

<표 1> 모바일 웹 1.0과 모바일 웹 2.0의 비교

 

 

아이폰이나 윈도 모바일 스마트폰 등은 현재까지 나온 제품 중 가장 큰 것이 3.5인치다. 아이폰이 3.5인치며 조만간 나올 삼성의 옴니아2가 3.7인치인 것으로 안다. 즉, 아직까지 넷북이나 UMPC, MID를 제외하고 스마트폰에서는 4인치 이상이 나오지는 않았다. 아니, 앞으로도 옴니아2의 3.7인치가 최고일 듯 싶다. 그 이상의 화면크기라면 스마트폰으로서의 디자인이나 크기, 무게에서 어울리지 않기 때문이다. 그리고 3.7인치라고 하더라도 WVGA(800 x 480)급이 최고일 듯 싶다. 물론 기술향상으로 3.5인치에서 1024 x 768의 해상도를 지닐 수는 있겠지만 그렇게 되면 화면에 비해 글자가 너무 작아서 가독성이 떨어지는 문제가 생기게 된다. 즉, 모바일에 적당한 크기와 해상도는 거의 정해져있으며 분명한 한계를 지니고 있다는 얘기다.

 

옴니아2,1,아몰레드

최대 3.7인치로 잡고 해상도를 WVGA(800 x 480)

 

 

트랜스코딩이라는 기술이 있다. 데스크탑용 인터넷 화면을 모바일에 맞게 디자인 등을 수정해서 보여주는 기술이라고 보면 이해가 쉬울 것이다. 트렌스코딩을 이용해서 한 것은 아닌 듯 싶지만 예를 들어 아이팟 터치에서 네이버를 접속할 때 네이버 메인(www.naver.com)으로 들어갈 때와 모바일용 네이버(m.naver.com)로 들어갈 때의 화면은 다르다. 물론 네이버 메인으로 들어갈때도 잘 보여준다. 하지만 모바일용 네이버로 들어갔을 때의 사용자는 좀 더 모바일에 맞는 사용자 경험을 얻을 수 있다. 좌우로의 스크롤이 필요없이 그냥 화면에 보여진 그대로를 이용할 수 있다는 얘기다. 물론 모바일용 네이버 서비스는 네이버 메인에서 제공되는 서비스를 다 제공하지는 못한다. 모바일에 맞춰서 필요한 서비스만 지원한다는 문제는 있다. 하지만 쓸데없이 좌우로 스크롤하면서 쓰는 것보다는 모바일용 네이버 서비스를 이용하는 것이 훨씬 더 편하다는 생각이 든다. 다음도, 파란도 비슷한 모바일용 서비스를 제공한다. 이런 모바일 전용 서비스가 모바일 웹에서는 필요하다는 생각이 든다.

물론 모바일용으로 따로 만들어야 하는 문제가 있다. 서비스 업체 입장에서는 데스크탑용 서비스와 함께 모바일용도 같이 생각해야 하는 부담이 있는 것이 사실이다. 그렇다고 모바일용으로 서비스를 만들게 되면 데스크탑에서 사용하기에 조금 아니올시다라는 생각을 할 수도 있다. 물론 받아들이는 사람에 따라서 틀리지만 말이다. 여하튼 간에, 이중적인 부담(경제적으로도 그렇다)이 있지만 모바일 웹의 활성화를 위해서는 꼭 필요한 부분이라 생각이 든다. 오페라의 경우 이런 부분에 대한 부담을 줄이는 것으로 모바일에서도 데스크탑의 화면을 그대로 보여주는 풀브라우징을 얘기하고 있는 듯 싶다. 이 부분에 있어서는 나와는 생각이 조금 다르다는 느낌이다.

모바일 웹에는 모바일에 맞는 구성적인 변화가 필요하다. 그것이 기능적인 변화든 디자인의 변화든 모바일의 환경에 맞는, 그리고 사용자가 편하게 다가설 수 있는 구성으로 가는 것이 옳다고 본다. 풀브라우징은 데스크탑과 모바일의 장벽을 많이 낮춰줬지만 하드웨어적으로 어쩔 수 없이 뛰어넘을 수 없는 벽이 아직까지는 분명히 존재하기 때문에 생각을 꼭 해야 한다고 본다. 미래에 레이저 화면 기술이 발전하여 모바일 디바이스에서도 레이저나 홀로그램 등을 이용하여 큰 화면을 볼 수 있다면 얘기가 틀려지겠지만 아직까지는 이러한 하드웨어적인 한계를 인정하고 그에 맞춰서 모바일 서비스(그것이 웹브라우저가 되었건 웹페이지가 되었건)를 준비할 필요가 있다는 생각이 든다.

 

 

Mobile Browser & Reference

국내·외 출시된 브라우저와 브라우저 관련 레퍼런스입니다.

	Mobile Web 1.0	Mobile WEB 2.0
네트웍	저속 ( < 0.5MB)	고속 ( > 0.5MB) – HSDPA, WiBro
프로토콜	WAP 프로토콜 기반의 WAP 브라우징	(w)TCP/IP 기반의 풀 브라우징
컨텐츠	HTML & WML 중심의 컨텐츠	XML&XHTML중심의컨텐츠
사업모델	폐쇄적 사업 모델	개방형 사업 모델, 유무선 통합 모델
기술모델	폐쇄적, 독자적	개방형,표준기반(MobileOK)
브라우징방법	WAP 사이트를 브라우징	RFID 및 LBS등과 연계한 유비쿼터스 브라우징,실세계태깅,RSS리더기능
단말	휴대 전화를 통한 접속	다양한 모바일 단말을 통한 접속
서비스	하이퍼링크만 가능	REST,SOAP,WSDL기반의 모바일웹서비스
인증	집중화된 인증 방식	분산 인증, Identity Management
접속	초기 URL을 손으로 입력하는 방식	자동 접속 방식 (WINC, 모바일 RFID, 2D 바코드 등)
UI	한 손 / 두 손 / 핸즈 프리	멀티모달/유비쿼터스 웹 액세스기술 (음성,제스처,RFID등)
API연동	하나의 서비스와 일부 API	개방형 API와 매쉬업서비스
요금	종량제 (고비용)	정액제 기반 (저렴한)
광고	광고 없음	모바일 광고에 기반한 새로운 비즈니스 모델
특징	브라우징 전용	플랫폼으로서의모바일웹

= Meta 태그 사용법 =

== 검색 엔진을 위한 메타 태그 ==

* 메타 태그 형식
{{{
<META NAME="태그이름" CONTENT="태그내용">
}}}

* 태그 종류
||'''이 름'''||'''설 명'''||
|| Subject     || 주 제 ||
|| Title       || 제 목 ||
|| Author      || 만든 사람 ||
|| Email       || 만든 사람 E-Mail 주소 ||
|| Publisher   || 만든 곳 ( 기업이나 단체, 조직 등 ) ||
|| Other Agent || 웹 책임자 / 관리자 ||
|| Date        || 만든 날짜 ||
|| Description || 페이지에 대한 설명 ||
|| keywords    || 검색 키워드 ||


* 태그 예
{{{
<META NAME="Subject"     CONTENT="">
<META NAME="Title"       CONTENT="">
<META NAME="Author"      CONTENT="">
<META NAME="Email"       CONTENT="">
<META NAME="Publisher"   CONTENT="">
<META NAME="Other Agent" CONTENT="">
<META NAME="Date"        CONTENT="">
<META NAME="Description" CONTENT="">
<META NAME="keywords"    CONTENT="">
}}}

== 웹 페이지 효과를 위한 메타 태그 ==

* 메타 태그 형식
{{{
<META HTTP-EQUIV="태그이름" CONTENT="태그내용">
}}}

* 태그 종류
||'''이 름'''||'''설 명'''||
|| Refresh    || 다른 페이지로 전환 ( 이동 ) ||
|| Page-Enter || 페이지로 들어갈때 효과 ||
|| Page-Exit  || 페이지를 떠날때 효과 ||


* 태그 효과 사용법
{{{
<META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=시간,Transition=효과번호)">
}}}
  * Transition - 화면 전환 효과 번호
  * Duration - 효과가 실행되는 시간


* 태그 효과 종류
||'''효과 번호'''||'''설 명'''||'''효과 번호'''||'''설 명'''||
|| 0  || 가운데로 모으기 ( 박스 ) || 12 || 흩어 뿌리기 ||
|| 1  || 밖으로 펼치기 ( 박스 ) || 13 || 수직 안쪽으로 나누기 ||
|| 2  || 가운데로 모으기 ( 원 ) || 14 || 수직 바깥쪽으로 나누기 ||
|| 3  || 밖으로 펼치기 ( 원 ) || 15 || 수평 안쪽으로 나누기 ||
|| 4  || 위로 닦아내기 || 16 || 수평 바깥쪽으로 나누기 ||
|| 5  || 아래로 닦아내기 || 17 || 계단 모양 왼쪽 아래로 ||
|| 6  || 오른쪽으로 닦아내기 || 18 || 계단 모양 왼쪽 위로 ||
|| 7  || 왼쪽으로 닦아내기 || 19 || 계단 모양 오른쪽 아래로 ||
|| 8  || 세로 블라인드 || 20 || 계단 모양 오른쪽 위로 ||
|| 9  || 가로 블라인드 || 21 || 가로 실선 무늬 ||
|| 10 || 가로 체크 무늬 || 22 || 세로 실선 무늬 ||
|| 11 || 세로 체크 무늬 || 23 || 순서없이 전환 ||


* 태그 예
{{{
<META HTTP-EQUIV="Refresh"    CONTENT="20; URL=http://kr.yahoo.com">
<META HTTP-EQUIV="Page-Enter" CONTENT="blendTrans(Duration=0.5)">
<META HTTP-EQUIV="Page-Exit"  CONTENT="blendTrans(Duration=0.5)">
}}}


= CSS Tips =

== 배경에 이미지를 넣고 싶을때 ==

글 아래에 이미지를 넣고 싶을때 CSS 코드에 다음과 같이 추가한다.

{{{
background-image: url("back.jpg"); // 이미지 주소
background-repeat: no-repeat; // 반복하지 않고 한번만 출력
background-position: 50% 50%; // 이미지 위치
}}}

{{{참고>}}} http://www.trio.co.kr/webrefer/css2/colors.html#background-properties

[아이폰용 모바일웹 제작 팁]

1. HTML5 의 input 태그를 이용한 상황에 맞는 아이폰 자판 레이이웃 호출하기

<input type="text" />
<input type="search" />
<input type="tel" />
<input type="url" />
<input type="email" />
<input type="time" />
<input type="number" />
<input type="datetime" />
<input type="week" />
<input type="date" />

2. 툴바숨기기

<script type="text/javascript">
 window.addEventListener("load",function(){
  setTimeout(scrollTo,0,0,1);
 },false);
</script>

3. 화면 회전시 폰트사이즈 고정

auto : 기본값, 화면회전후 비율에 맞게 폰트크기가 자동으로 조정됨.
none : 회전시에도 폰크기 고정.
n% : 폰트크기를 정한 크기로 변경.
 
 html {

      -webkit-text-size-adjust:none;

  }

4. 모바일웹페이지를 가로 크기에 딱 맞추기

user-scalable=no : 사용자의 확대보기 허용 여부(no/yes)
initial-scale=1.0  : 페이지 로딩시 확대비율
maximum-scale=1.0  : 최대확대비율
minimum-scale=1.0  : 최소축소비율
width=device-width : 플랫폼 가로 크기에 맞춤, 수치를넣으면 그수치에 맞게 맞춰짐.

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

 5. 회전에 따라 다른 css 적용하기

 <script type="text/javascript">
 function orient()
 {
  switch(window.orientation){
   case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css";
    break;
   case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
    break;
   case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
    break;
  }
 }
 window.onload = orient();
  </script>

 <body onorientationchange="orient();">
 </body>

 6. 기본 어플 호출하기

 - 전화걸기 : <a href="tel:1588-2120 ">블루웹 고객센터</a>

 - 문자보내기 : <a href="sms:010-0000-0000">문자보내기</a>
 - 문자보내기실행 : <a href="sms:">문자보내기</a>

 - 메일보내기실행 : <a href="mailto:">메일보내기</a>
 - 메일보내기 : <a href="mailto:echos@blueweb.co.kr">메일보내기</a>
 - 내용채워서 메일보내기 : <a href="mailto:echos@blueweb.co.kr?cc=echos@blueweb.co.kr&bcc=echos@blueweb.co.kr&subject=test subjct&body=test body"">메일보내기</a>

내용 :

소스 :

<a href="javascript:window.scrollTo(0,100000);">맨 아래로</a> 
<a href="javascript:window.scrollTo(0,0);">맨 위로</a>
<a href="javascript:history.back()">BACKWARD</a>
<a href="javascript:history.forward()">FORWARD</a>

scrollWidth,scrollHeight 는 창의 크기가 아니라 문서의 크기입니다.
브라우저의 "보이는 영역" 과 "보이지 않는 영역"(스크롤해야 볼 수 있는) 을 합한 것으로
스크롤바를 움직여 볼 수 있는 모든 영역의 크기입니다.

"보이는 영역" 만 구하려면 clientWidth,clientHeight 를 사용합니다.
이들은 padding은 포함하고, margin, border, scrollbar는 포함하지 않는 크기입니다.

offsetWidth, offsetHeight 는 padding, border, scrollbar 를 포함한 크기죠

이들의 대소 관계는 이렇게 됩니다
offsetWidth >= clientWidth
scrollWidth >= clientWidth
offsetWidth >=< scrollWidth

[ test it ! ]
<div style='width:150%;height:150%;'>
<span onClick="window.resizeTo(500,500)">resizeTo(500,500)</a>
<span onClick="alert(document.body.clientWidth)">clientWidth</a>
<span onClick="alert(document.body.offsetWidth)">offsetWidth</a>
<span onClick="alert(document.body.scrollWidth)">scrollWidth</a>
</div>


모바일웹에서의 HTML5의 기능: http://blog.daum.net/kkjjww1027/750