6부 WML/WML2.0 언어배우기 6-1 WML에 대해서 6-2 WML 기본 태그 6-3 글과 그림 삽입에 관련된 태그 6-4 링크 관련 태그 6-5 입력양식 관련 태그 6-6 한 단계 버전업된 WML2.0 학습하기 무선 인터넷 프로그래밍
6-1WML에 대해서 무선 인터넷 프로그래밍
WML이란 WML은 WAP 프로토콜에 따른 무선 인터넷의 제약된 환경에 최적화된 언어로서 기존의 HTML과 같이 태그를 사용하여 누구나 쉽게 제작할 수 있도록 만든 마크업 언어입니다. WML의 특징에는 어떠한 것이 있는지 알아 보겠습니다. 무선 인터넷 프로그래밍
WML은 하나의 <wml> 덱 안에 여러 개의 <card>를 이용해서 문서를 꾸밀 수 있습니다. ●카드를 이용한다! WML은 하나의 <wml> 덱 안에 여러 개의 <card>를 이용해서 문서를 꾸밀 수 있습니다. WML 덱 안에는 여러 개의 Card를 사용할 수 있지만 일반적으로 하나의 카드만 화면에 출력합니다. 그러나 카드의 내용을 꾸며 카드를 이동하여 카드에 있는 내용을 출력하게 만들어 휴대폰의 제한된 리소스와 좁은 데이터 송수신 광대역 폭에 최적화 되어 있습니다. 무선 인터넷 프로그래밍
WML은 높은 대기 시간 및 좁은 광대역 폭에 최적화할 수 있도록 설계 및 구성되어 있습니다. ●히스토리 기능이 있다! WML은 메뉴 구조를 구성할 수 있고 메뉴를 이용하여 열었던 페이지 이전 또는 다음 페이지로 이동할 수 있습니다. 열었던 페이지를 볼 수 있는 이유는 휴대폰에는 히스토리 스택 기능을 가지고 있기 때문입니다. ●좁은 광대역 폭을 위한 최적화 WML은 높은 대기 시간 및 좁은 광대역 폭에 최적화할 수 있도록 설계 및 구성되어 있습니다. 무선 인터넷 프로그래밍
WML이란 ●wbmp 그림 형식을 이용한다! WML에서 사용하는 그림은 좁은 광대역 폭에도 빠른 전송 속도를 제공하는 wbmp 형식을 이용합니다. 현재 wbmp 형식은 흑백만 지원하고 있지만 고해상도의 그림 형식도 개발이 이루어지고 있습니다. 컬러 그림은 모바일에 최적화되어 제작된 SIS 형식을 이용합니다. ●WML은 대소문자를 구분한다! WML은 대소문자를 구분하므로 작업할 때 소문자로 통일하는 것이 좋습니다. ●WML은 XML 문서의 문자셋을 따른다! WML은 XML이 서브셋이므로 XML과 같은 문자셋을 이용합니다. US-ASCII / UNICODE 2.0 / ISO-8859-1/UTF-16 무선 인터넷 프로그래밍
WML이란 sub WML 문서 구조 살펴보기 WML 문서를 구성하는 기본 구조에 대해서 살펴 보겠습니다. <?xml version="1.0" encoding="ks_c_5601-1987"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <head> </head> <card> <!-- 주석 --> 내용 </card> </wml> 무선 인터넷 프로그래밍
-Head : <meta> 태그 등 문서 전체에 관련된 정보를 입력하는 곳입니다. WML이란 -DTD 선언 : DTD(Data Type Definition)란 문서에서 사용할 태그들을 정의하기 위한 일련의 구문규칙들이 정의되어 있는 파일을 불러 옵니다. -Head : <meta> 태그 등 문서 전체에 관련된 정보를 입력하는 곳입니다. -설명글 : 문서에 관련된 설명글을 입력합니다. 설명글을 문서에 영향을 끼치지 않습니다. -WML Deck : <wml>부터 </wml>까지 영역을 WML Deck라고 부릅니다. -Card : <card> 태그로 구성된 단위로 하나의 문서에 여러 개의 카드를 위치할 수 있습니다. 무선 인터넷 프로그래밍
WML 문서 제작하는 방법 ● 메모장을 이용하는 방법 메모장을 이용해서 손쉽게 WML 문서를 편집하고 WML 문서를 보여주는 SDK 시뮬레이터 프로그램을 사용해서 작업한 내용을 확인합니다. 1.메모장을 실행한 다음 WML 소스를 입력합니다. 무선 인터넷 프로그래밍
WML 문서 제작하는 방법 2.[파일>저장] 메뉴를 클릭해서 문서를 저장합니다. 이때 파일 형식은 [모든 파일]을 선택하고 [파일 이름] 항목에는 '파일이름.wml' 식으로 입력합니다. 무선 인터넷 프로그래밍
WML 문서 제작하는 방법 3.WML 시뮬레이터 프로그램을 실행한 다음 [주소입력줄] 항목에 ‘file://c:/폴더/파일이름.wml’ 식으로 입력한 후 [ENTER]를 누릅니다. 무선 인터넷 프로그래밍
WML 문서 제작하는 방법 4.결과 화면이 출력됩니다. 무선 인터넷 프로그래밍
WML 문서 제작하는 방법 [하나더] WML 문서 손쉽게 편집하는 방법 PC에는 WML 파일 형식에 연결 프로그램이 지정되어 있지 않으므로 문서를 편집할 수 있는 프로그램을 지정해두면 좀 더 편리 문서를 편집할 수 있습니다. 여기서는 [메모장] 프로그램을 연결 프로그램으로 등록해보도록 하겠습니다. 1.파일을 오른쪽 클릭하면 나타나는 바로가기 메뉴에서 [속성]을 클릭합니다. 무선 인터넷 프로그래밍
WML 문서 제작하는 방법 2.[등록 정보] 창에서 [변경] 단추를 클릭하면 나타나는 대화상자에서 [목록에서 프로그램 선택]을 선택하고 [확인] 단추를 클릭합니다. 무선 인터넷 프로그래밍
3.[Notepad]를 선택하고 [확인] 단추를 클릭합니다 WML 문서 제작하는 방법 3.[Notepad]를 선택하고 [확인] 단추를 클릭합니다 무선 인터넷 프로그래밍
4.윈도우 탐색기에서 WML 파일을 더블클릭하면 바로 메모장이 실행됩니다. 내용을 확인하거나 수정할 수 있습니다. 무선 인터넷 프로그래밍
● 애니빌더 프로그램을 이용해서 문서 편집하는 방법 WML 문서 제작하는 방법 ● 애니빌더 프로그램을 이용해서 문서 편집하는 방법 애니빌더 프로그램을 이용하면 WML 기본 태그가 입력되어 있으므로 보다 편리하게 문서를 편집할 수 있습니다. 1.애니빌더 프로그램을 실행한 다음 [Text] 목록을 하나 추가하고 [소스보기] 단추를 클릭하면 나타나는 목록에서 [wml]을 선택합니다. 무선 인터넷 프로그래밍
WML 문서 제작하는 방법 2.소스창에 WML 기본태그가 입력되어 있습니다. 적당하게 내용을 편집한 다음 6b1s4p01.tif [파일 저장] 단추를 클릭해서 작업한 문서를 저장합니다. 무선 인터넷 프로그래밍
WML 문서 제작하는 방법 3.[다른 이름으로 저장] 대화상자가 나타나면 [파일 형식]에 ‘wml'로 설정되어 있는지 확인하고 파일이름을 입력하고 [저장] 단추를 클릭해서 문서를 저장합니다. 무선 인터넷 프로그래밍
4.WML 시뮬레이터 프로그램을 이용해서 작업한 문서를 불러 옵니다. 무선 인터넷 프로그래밍
6-2 WML 기본 태그 무선 인터넷 프로그래밍
<card> 태그 <card>는 프레임에 나타나게 할 내용을 정의하는 태그로서 하나의 문서에 여러 개의 <card> 태그가 올 수 있습니다. 여러 개의 <card>가 입력되어 있는 경우 보통 맨 위에 입력한 <card> 내용이 화면에 출력되고 다른 <card>는 화면에 나타나지 않습니다. 화면 전환을 이용하여 카드와 카드로 이동 할 수 있습니다. 무선 인터넷 프로그래밍
<card> 태그 <card id="" title="" onenterforward="" onenterbackward="" ontimer="" newcontext="" ordered=""> contents </card> [속성] ․ id : card를 지정하는 이름입니다. 이름에 한글이나 공백은 사용할 수 없고 영문 대소문자를 구분합니다. ․ title : card의 설명글을 입력하는 이름입니다. ․ newcontext : <go> 태그로 해당 card 이동시 초기화 여부를 설정합니다. 속성값 : true / false ․ orderd : card의 내용을 순서대로 보여줄 것인지 사용자가 선택해서 보여 줄 것인지를 지정합니다. 속성값 : true / false ․ oneterforward : <go> 태그를 사용하여 해당 카드로 이동했을 때 이동할 URL을 설정합니다. ․ oneterbackward : <prev> 태그를 사용하여 해당 카드로 이동했을 때 이동할 URL을 설정합니다. ․ ontimer : 카드 안에 <timer> 태그를 사용하여 타이머 시간이 종료되었을 때 이동할 URL을 지정합니다. 무선 인터넷 프로그래밍
휴대폰에서 Accept 키나 Options 키와 같은 키를 눌렀을 경우에 동작을 지정합니다. <do> 태그 휴대폰에서 Accept 키나 Options 키와 같은 키를 눌렀을 경우에 동작을 지정합니다. <do type=" " label=" " name=" " option=" "> 실행 </do> 무선 인터넷 프로그래밍
<do> 태그 [속성] type : 동작 방법을 설정합니다. Accept : 휴대폰의 [확인(Accept)] 키를 눌렀을 경우에 동작을 지정합니다. options : 휴대폰의 [메뉴(Options)] 키를 눌렀을 경우에 동작을 지정합니다. delete : 휴대폰의 [취소(Delete)] 키를 눌렀을 경우에 동작을 지정합니다. prev : 휴대폰의 [이전] 키를 눌렀을 경우에 동작을 지정합니다. vnd.call : ‘☎ 라벨’ 모양으로 기능키를 표시합니다. vnd.up : ‘◉ 라벨’ 모양으로 기능키를 표시합니다. vnd.next : ‘ⓔ 라벨’ 모양으로 기능키를 표시합니다. vnd.prev : ‘▲ 라벨’ 모양으로 기능키를 표시합니다. delete : ‘▶ 라벨’ 형식으로 기능키를 표시합니다. reset : ‘▶ 라벨’ 형식으로 기능키를 표시합니다. prev : ‘◀ 라벨’ 형식으로 기능키를 표시하고 [취소] 단추를 누르면 <do> 태그 사이에 입력한 <go> 태그를 실행합니다. vnd.skmn1~9 : 1~9의 숫자로 메뉴를 표시합니다. 무선 인터넷 프로그래밍
<go accept-charset="" method="" href=""></go> 동작이 발생했을 경우 이동 경로를 설정합니다. <do> 태그와 함께 사용하여 휴대폰 특정키의 이동 경로를 설정할 때 많이 사용합니다. 보통 닫기 태그를 사용하지 않은 경우가 많습니다. <go accept-charset="" method="" href=""></go> [속성] ․ accept-charset : 사용하는 문자셋을 선택합니다. ․ method : 전송 방식을 선택합니다. 기본값은 get입니다. 속성값 : get / post ․ href : 이동 경로를 설정합니다. 속성값에는 홈페이지 주소를 입력하거나 같은 문서의 카드로 이동할 경우에는 ‘#카드 이름’ 순으로 입력해서 이동 경로를 설정합니다. 무선 인터넷 프로그래밍
<go> 태그 [예제 6-2-1] 카드 이동 6-2-1.wml 문서를 열면 첫 번째 카드 내용이 출력되고 accept 키를 누르면 두 번째 카드의 내용이 출력되는 예제입니다. <?xml version="1.0" encoding="ks_c_5601-1987"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id ="a1"> <p>세계 최초 컴퓨터의 이름은?</p> <do type="accept" label="정답"> //[정답]이라고 표기되는 라벨을 만듭니다. <go href="#a2"> // 라벨을 실행하면 a2 카드로 이동합니다. </do> </card> <card id ="a2"> <p>에니악</p> </card> </wml> 무선 인터넷 프로그래밍
<go> 태그 Accept 키와 Options 키를 이용하여 질문에 대한 답변에 따라 각각 다른 카드로 이동하게 [예제6-2-2]OX 문제 출제 Accept 키와 Options 키를 이용하여 질문에 대한 답변에 따라 각각 다른 카드로 이동하게 만든 예제입니다. 이와같은 방법을 이용하면 복잡한 구성으로 문서를 작성할 수 있습니다. <?xml version="1.0" encoding="ks_c_5601-1987"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id ="a1"> <p>블로그란 웹(web)+로그(log)의 줄임말이다.</p> <do type="accept" label="예"> <go href="#a2"> </do> <do type="options" label="아니오"> <go href="#a3"> </card> <card id ="a2"> <p>맞습니다.</p> </card> <card id ="a3"> <p>틀렸습니다. 블로그(Blog)란 웹과 항해일지를 뜻하는 로그의 줄임말입니다.</p> </wml> 무선 인터넷 프로그래밍
▲[예]를 눌렀을 경우 ▲[아니오]를 눌렀을 경우 <go> 태그 ▲[예]를 눌렀을 경우 ▲[아니오]를 눌렀을 경우 무선 인터넷 프로그래밍
<template> contents </template> 문서에 포함되어 있는 모든 카드에 동일하게 적용할 내용을 정의 합니다. <template> 태그에 있는 내용은 카드 위치에 상관없이 동일하게 적용됩니다. 단 카드 안에 있는 내용이 <template>의 내용보다 우선으로 실행됩니다. <template> contents </template> [속성] ․ oneterforward : <go> 태그를 사용하여 해당 카드로 이동했을 때 이동할 URL을 설정합니다. ․ oneterbackward : <prev> 태그를 사용하여 해당 카드로 이동했을 때 이동할 URL을 설정합니다. ․ ontimer : 카드 안에 <timer> 태그를 사용하여 타이머 시간이 종료되었을 때 이동할 URL을 지정합니다. 무선 인터넷 프로그래밍
<template> 태그 [예제6-2-3]연속 퀴즈 문제 [예제6-2-3]연속 퀴즈 문제 Accept 키와 Options 키를 template 태그에 담아두어 카드 위치에 상관없이 해당 키가 화면에 나타나도록 구성한 예제입니다. 특히 a1 카드에는 onenterbackward 속성을 사용하여 a3 카드에서 <prev/> 태그로 a1 카드로 이동하면 a2 카드로 이 동되도록 설정했습니다. 무선 인터넷 프로그래밍
<template> 태그 <?xml version="1.0" encoding="ks_c_5601-1987"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <template> <do type="accept" label="이전"> <prev/> </do> <do type="options" label="정답"> <go href="#a3"> </do> </template> <card id ="a1" onenterbackward="#a2"> <p>블로그란 웹(web)+로그(log)의 줄임말이다?</p> </card> <card id ="a2"> <p>에어로빅은 공기중에 살아간다" 또는 "산소를 이용한다"의 의미를 가지고 있다?</p> </card> <card id ="a3"> <p>맞습니다.</p> </wml> 무선 인터넷 프로그래밍
>> >> >> <template> 태그 >> >> >> 무선 인터넷 프로그래밍
<noop> 태그 <noop> contents </noop> 아무 동작도 실행하지 않도록 해주는 태그입니다. 실행하지 않게 할 태그 안에 넣어서 사용합니다. template 태그를 사용할 경우 카드 내용을 우선으로 실행되므로 noop 태그를 카드에 사용하면 특정 카드에 template 태그를 적용하지 않도록 구성할 수 있습니다. 보통 닫기 태그를 사용하지 않은 경우가 많습니다. <noop> contents </noop> 무선 인터넷 프로그래밍
<noop> 태그 [예제6-2-4] 라벨 지우기 [예제6-2-4] 라벨 지우기 [예제6-2-3]의 예제에서 a2 카드에 <noop> 태그를 사용해서 Accept 키가 실행되지 않 도록 구성한 예제입니다. <?xml version="1.0" encoding="ks_c_5601-1987"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <template> <do type="accept" label="이전"> <prev/> </do> <do type="options" label="정답"> <go href="#a3"> </do> </template> <card id ="a1" onenterbackward="#a2"> <p>블로그란 웹(web)+로그(log)의 줄임말이다?</p> </card> <card id ="a2"> <p>에어로빅은 공기중에 살아간다" 또는 "산소를 이용한다"의 의미를 가지고 있다?</p> <noop/> </card> <card id ="a3"> <p>맞습니다.</p> </wml> 무선 인터넷 프로그래밍
<noop> 태그 ▲a1 카드 ▲a2 카드 무선 인터넷 프로그래밍
<meta> 태그 <meta> 태그는 <head> 태그에 위치하여 접근 권한 정보를 제공합니다. <head> <meta http-equiv=" " content=" " forua=" "/> </head> [속성] ․ http-equiv : http-equiv="Cache-Control“ 다음과 같이 사용하여 속성들이 http 헤더로 해석될 수 있도록 합니다. ․ name : 속성의 이름을 설정합니다. ․ forua : 메타 정보 값이 브라우저에서 사용될지 설정합니다. true/false중 선택 ․ content :속성과 관련된 메타 데이터의 값을 표시합니다. 기본값은 30일이며 ‘content="max-age=no-cache"’라고 선언하면 캐쉬를 사용하지 않습니다. ․ scheme : 속성값을 해석하는데 사용되는 폼이나 구조를 결정합니다. 무선 인터넷 프로그래밍
<meta> 태그 ▼사용 예 <meta http-equiv="Cache-Control" content="max-age=no-cache" forua="true"/> 문서 내용을 휴대폰의 캐쉬에 저장하지 않고 항상 서버에서 데이터를 가져옵니다. <meta name="vnd.up.markable" forua="true" content="false"/> 즐겨찾기를 하지 못하도록 설정합니다. <meta name="vnd.up.markable" forua="true" content="URL"/> 즐겨찾기할 때 URL 설정합니다. content 속성에 URL을 입력합니다. 무선 인터넷 프로그래밍
<access> 태그 <head> 태그 안에 위치하여 문서의 접근 권한을 설정합니다. 즉 <access> 태그로 설정된 주소로 경유해야만 문서를 열어 주도록 해줍니다. <head> <access domain="211.53.39.203" path="/"/> </head> [속성] domain : 해당 덱에 접근이 가능한 다른 WML Deck의 URL을 표시하며, 기본값은 해당 WML Deck이 포함된 URL입니다. path : WML Deck에 있는 카드에 접근할 수 있는 다른 WML Deck의 URL루트를 표시(기본값="/") 무선 인터넷 프로그래밍
6-3 글과 그림 삽입에 관련된 태그 무선 인터넷 프로그래밍
<p> 태그 문단을 정의해주는 태그로서 문단 정렬 및 문단 스크롤하는 역할을 수행합니다. HTML에서는 <p> 태그를 사용하지 않아도 되지만 WML에서는 테이블이나 그림 삽입 등 요소를 넣을 때 꼭 입력해야 합니다. <p align=" " mode=" "> 내용 </p> [속성] ․ align : 문단을 정렬합니다. left : 문단을 왼쪽으로 정렬합니다. center : 문단을 가운데로 정렬합니다. right : 문단을 오른쪽으로 정렬합니다. ․ mode : 문단의 내용을 한 줄로 스크롤할지 여부를 설정합니다. wrap : 문단 스크롤을 실행하지 않습니다. nowrap : 문단 스크롤을 합니다. 무선 인터넷 프로그래밍
<p> 태그 [예제6-3-1]문단 정렬 [예제6-3-1]문단 정렬 <p>태그에 align 속성을 사용해서 글자 정렬하고 mode 속성 이용해서 글자를 스크롤하게 만들어주는 예제입니다. <?xml version="1.0" encoding="ks_c_5601-1987"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p>청바지는</p> <p align="center">19세기에 </p> <p align="right">스트라우스가 발명하였다</p> <p mode="nowrap">청바지는 19세기에 스트라우스가 발명하였다</p> </card> </wml> 무선 인터넷 프로그래밍
<p> 태그 무선 인터넷 프로그래밍
특수 문자 입력 관련 태그 WML 소스에 사용되는 <, ‘, 등의 문자들은 WML 소스에 사용되는 문자이므로 다른 방법으로 표기를 해주어야 합니다. 다음과 같은 특수기호는 해당 입력기호를 사용해서 표현 합니다. 표시입력기호 << >> ‘' “"& &$$ $공백 소프트 하이픈 무선 인터넷 프로그래밍
특수 문자 입력 관련 태그 [예제6-3-2] 특수 문자 출력 특수문자를 이용해서 문서를 꾸민 예제입니다. [예제6-3-2] 특수 문자 출력 특수문자를 이용해서 문서를 꾸민 예제입니다. <?xml version="1.0" encoding="ks_c_5601-1987"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p align="center"><웹브라우저></p> <p>$$최초상용웹브라우저$$ 1993년에 발표한 '모자이크'이다</p> </card> </wml> 무선 인터넷 프로그래밍
특수 문자 입력 관련 태그 무선 인터넷 프로그래밍
글자를 예쁘게 꾸밀 수 있는 글자 속성에 관련된 태그입니다. HTML에서 사용하는 태그와 같습니다. 글자 속성 태그 <i> / <b> / <u> / <em> / <small> / <strong> / <big> 글자를 예쁘게 꾸밀 수 있는 글자 속성에 관련된 태그입니다. HTML에서 사용하는 태그와 같습니다. 태그 설명 <i>내용</i> 글자를 이탤릭체로 표시합니다. <b>내용</b> 글자를 두껍게 표시합니다. <u>내용</u> 글자에 밑줄을 표시합니다. <em>내용</em> 글자를 강조합니다. <small>내용</small> 작은 글자로 표시합니다. <strong>내용</strong> 힘찬 글꼴로 표시합니다. <big>내용</big> 큰 글자로 표시합니다. 무선 인터넷 프로그래밍
글자 속성에 관련된 태그를 이용해서 글자를 예쁘게 꾸며 봅니다. 글자 속성 태그 <i> / <b> / <u> / <em> / <small> / <strong> / <big> [예제6-3-3]글자 속성 출력 글자 속성에 관련된 태그를 이용해서 글자를 예쁘게 꾸며 봅니다. <?xml version="1.0" encoding="ks_c_5601-1987"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p align="center"><big>메신저</big><small>messanger</small></p> <p><b>메신저</b>란 <strong>인터넷</strong>에서 <u>실시간으로 <em><i>메시지나 데이터</i></em>를 주고 받을 수 있는 프로그램</u>을 말합니다. </p> </card> </wml> 무선 인터넷 프로그래밍
글자 속성 태그 <i> / <b> / <u> / <em> / <small> / <strong> / <big> 무선 인터넷 프로그래밍
표 관련 태그 <table> / <tr> / <td> <td> 태그로 표를 만들 수 있습니다. 기본 구조는 HTML과 유사하지만 열의 개수를 colums 속성을 사용해서 정의해야 하고 <table> 태그는 <p> 태그 안에 위치해야 한다는 특징을 가 지고 있습니다. WML에서는 표의 테두리가 나타나지 않습니다. <p> <table title=" " align=" " colums=" " > <tr> <td> 내용</td> ..... </tr> </table> </p> [속성] title : 테이블에 레이블을 지정합니다. align : 표를 정렬합니다. colums : 열의 개수를 입력합니다. 무선 인터넷 프로그래밍
표 관련 태그 <table> / <tr> / <td> [예제6-3-4] 표 만들기 4행 2열의 표를 이용해서 자기소개 문서를 꾸민 예제입니다. <?xml version="1.0" encoding="ks_c_5601-1987"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p><table align="center" colums="2" > <tr> <td>이 름</td><td> 안창현</td></tr> <tr><td>취 미</td><td>사진촬영</td></tr> </table></p> </card> </wml> 무선 인터넷 프로그래밍
표 관련 태그 <table> / <tr> / <td> [예제6-3-5] 경계선있는 표 만들기 표의 셀에 ‘-’와 ‘|’ 문자를 넣어서 표의 테두리를 그려 넣을 수 있습니다. 그러나 열의 개수가 늘어나 폭이 좁아지기 때문에 많은 내용을 담지 못합니다. <?xml version="1.0" encoding="ks_c_5601-1987"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p><table align="center" colums="5" ><tr><td>-</td><td>---</td><td>-</td> <td>---</td><td>-</td></tr> <tr><td>|</td><td>이름</td><td>|</td><td> 안창현/td><td>|</td></tr> <tr><td>-</td><td>---</td><td>-</td><td>---</td> <td>-</td></tr> <tr><td>|</td><td>취미</td><td>|</td><td>사진촬영</td> <td>|</td></tr> <tr><td>-</td><td>---</td><td>-</td><td>---</td> <td>-</td></tr></table></p> </card> </wml> 무선 인터넷 프로그래밍
표 관련 태그 <table> / <tr> / <td> 무선 인터넷 프로그래밍
<img> 태그 그림을 삽입해주는 태그로서 사용 방법은 HTML과 동일합니다. <img alt=" " src=" " align=" " height=" " width=" " vspace=" " hspace=" "/> [속성] alt : 그림이 안보일 때 대신 보이게 할 글을 입력합니다. src : 그림 경로를 설정합니다. align : 그림 정렬을 설정합니다. height : 그림의 높이를 지정합니다. width : 그림의 너비를 지정합니다. vspace : 그림의 좌우 여백을 설정합니다. hspace : 그림의 위아래 여백을 설정합니다. 무선 인터넷 프로그래밍
<img> 태그 [예제6-3-6] 그림 출력 문서에 그림을 삽입해서 꾸며 봅니다. [예제6-3-6] 그림 출력 문서에 그림을 삽입해서 꾸며 봅니다. <?xml version="1.0" encoding="ks_c_5601-1987"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card><p><img alt="여인" src="ori.wbmp"/></p> </card> </wml> 무선 인터넷 프로그래밍
<img localsrc=" "/> 픽토그램 삽입 태그 문서에서 그림을 불러 오려면 그림이 있는 서버에서 그림을 불러 오지만 <img> 태그에 localsrc 속성을 사용하면 브라우저에 저장되어 있는 그림을 다운로드 없이 빨리 불러 올 수 있습니다. localsrc 속성값에 지정된 이름을 넣어주면 해당 그림 아이콘을 출력해줍니다. 이와같은 그림을 픽토그램(Pictogram)이라고 부릅니다. <img localsrc=" "/> 무선 인터넷 프로그래밍
픽토그램 삽입 태그 [예제6-3-7] 픽토그램 출력 문서에 그림을 삽입해서 꾸며 봅니다. [예제6-3-7] 픽토그램 출력 문서에 그림을 삽입해서 꾸며 봅니다. <?xml version="1.0" encoding="ks_c_5601-1987"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p><img localsrc="phone3"/>010-000-0000</p> <p><img localsrc="mailbox"/>codmedia@codmedia.com</p> <p><img localsrc="house"/>02-000-0000</p> <p><img localsrc="fax"/>02-000-0000</p> </card> </wml> 무선 인터넷 프로그래밍
픽토그램 삽입 태그 무선 인터넷 프로그래밍
6-4 링크 관련 태그 무선 인터넷 프로그래밍
하이퍼링크를 설정할 때 사용하는 태그로서 경로를 설정해주는 href 속성과 함께 사용합니다. <a> 태그 하이퍼링크를 설정할 때 사용하는 태그로서 경로를 설정해주는 href 속성과 함께 사용합니다. <a href=" " title=" " > 글자, 그림 등 </a> [속성] href : 링크를 실행할 경로를 설정합니다. title : 링크의 레이블을 표시합니다. 무선 인터넷 프로그래밍
<a> 태그 [예제6-4-1] 하이퍼링크 [예제6-4-1] 하이퍼링크 <a> 태그를 사용해서 사용자가 목록을 선택할 수 있는 리스트 메뉴를 만들어 봅니 다. <?xml version="1.0" encoding="ks_c_5601-1987"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p><img localsrc="biggestsquare2">음 악 <img localsrc="biggestsquare2"></p> <p><a href="a.wml" title="GO">음악소개</a></p> <p><a href="b.wml" title="GO">음악게시판</a></p> <p><a href="c.wml" title="GO">티켓예매</a></p> </card> </wml> 무선 인터넷 프로그래밍
<anchor title=" " ><go href=" "/> 내용 </anchor> <anchor> 태그는 링크를 설정할 때 사용하는 태그 중 하나로서 <a> 태그와 기능이 유사하지만 경로를 설정해주는 속성을 사용할 수 없으므로 <go> 태그와 함께 사용한다는 특징을 가지고 있습니다. <anchor title=" " ><go href=" "/> 내용 </anchor> 무선 인터넷 프로그래밍
<anchor> 태그 [예제6-4-2] 하이퍼링크 [예제6-4-2] 하이퍼링크 <anchor> 태그를 사용해서 링크를 실행할 수 있는 리스트 메뉴를 만들어 봅니다. <a> 태그와는 어떠한 차이가 있는지 살펴 보도록 합니다. <?xml version="1.0" encoding="ks_c_5601-1987"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" “http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p><img localsrc="biggestsquare2">영 화 <img localsrc="biggestsquare2"></p> <anchor title="이동" ><go href="a.wml"/>영화소개</anchor> <anchor title="이동" ><go href="b.wml"/>영화게시판</anchor> <anchor title="이동" ><go href="c.wml"/>영화예매/anchor> </card> </wml> 무선 인터넷 프로그래밍
<anchor> 태그 무선 인터넷 프로그래밍
<anchor> 태그 [하나더!] 번호가 있는 메뉴 만들기 번호가 있는 메뉴를 만들고 싶을 경우에는 <do> 태그를 이용해서 type="vnd.skmn숫자" 속성을 사용해서 만듭니다. <?xml version="1.0" encoding="ks_c_5601-1987"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <p><img localsrc="biggestsquare2">영 화 <img localsrc="biggestsquare2"></p> <card id ="card1"><do type="vnd.skmn1" label="영화소개"> <go href="a1.wml"/></do> <do type="vnd.skmn2" label="영화게시판"><go href="a2.wml"/></do> <do type="vnd.skmn3" label="영화예매"><go href="a3.wml"/></do> </card></wml> 무선 인터넷 프로그래밍
<select> / <option> 태그 <select>는 목록에서 선택하게 해주는 태그로서 <option> 태그와 <do> 태그를 함께 사용합니다. <select> 태그 안에 <option> 태그를 사용하여 리스트를 구성하고 <do> 태그를 사용해서 지정한 목록을 선택합니다. <do> 태그는 <select> 태그가 있는 <card> 안에 위치해야 동작합니다. 단 <select> 태그 안에 <a> 또는 <anchor> 태그는 위치할 수 없습니다. <select title=" " multiple=" " name=" " value=" " iname=" " ivalue=" " tabindex=" "> <option value=" " onpick=“ ”>내용</option> ... </select> [속성] title : 태그의 레이블을 입력합니다. multiple : 목록을 다중 선택을 가능 유무를 설정합니다. true / false name : 변수의 이름을 입력합니다. value : 기본값의 변수 이름을 입력합니다. iname : 인덱스를 저장하는 변수의 이름을 입력합니다. ivalue : iname 변수의 기본값을 입력합니다. onpick : 하이퍼링크를 실행할 URL을 입력합니다. 무선 인터넷 프로그래밍
<select> / <option> 태그 [예제6-4-3] 목록 선택 <select> 태그를 사용해서 지역, 성별, 나이를 사용자가 골라서 선택할 수 있도록 만들어 보고 그 값을 화면에 출력해 보도록 하겠습니다. 무선 인터넷 프로그래밍
<select> / <option> 태그 [예제6-4-4]여러 개 목록 선택 <select> 태그에 입력한 <option> 목록 중 두 개의 목록을 선택한 다음 선택한 값을 화면에 출력해 보도록 하겠습니다. 여러 개의 목록을 선택할 경우에는 multiple 속성에 "true"를 선택하고 기본 선택값을 지정하고 싶을 경우에는 ivalue 속성에 선택할 번호를 입력합니다. <?xml version="1.0" encoding="KS_C_5601-1987"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="select"> <p>가지고 싶은 품목을 두 개를 골라 보세요.<br/> <select name="order" iname="index" ivalue="1;2" multiple="true" title="인기품목"> <option value="MP3플레이어" title="first">MP3플레이어</option> <option value="노트북" title="second">노트북</option> <option value="PDA" title="third">PDA</option> </select> <do type="vnd.next" label="확인"> <go href="#a2"/> </do></p> </card> <card id="a2"> <p align="center">당신은 $(order) 고르셨습니다.</p></card> </wml> 무선 인터넷 프로그래밍
<select> / <option> 태그 무선 인터넷 프로그래밍
<select> / <option> 태그 [예제6-4-5]목록 선택해서 링크 실행 <select> 태그에 입력한 <option> 태그에 ‘onpick' 속성을 사용해서 목록을 선택하면 지정한 URL로 링크가 실행되도록 구성한 예제입니다. 이때 목록에는 번호가 순서대로 붙습니다. <?xml version="1.0" encoding="KS_C_5601-1987"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="select"> <p align="center">코드맨 홈페이지</p><br/> <select name="order" iname="index" title="인기품목"> <option value="자기소개" onpick="a.wml">자기소개</option> //목록을 선택하면 a.wml 문서를 엽니다. <option value="영화소개" onpick="a.wml">영화소개</option> <option value="음악소개" onpick="a.wml">음악소개</option> </select> </p> </card> </wml> 무선 인터넷 프로그래밍
<select> / <option> 태그 무선 인터넷 프로그래밍
<optgroup title=" "> <option> 태그 목록 </optgroup> <select> 태그 안에 위치하여 <select> 태그 안에 입력한 <option> 태그들을 그룹으로 만들어 주는 태그입니다. <select> <optgroup title=" "> <option> 태그 목록 </optgroup> </select> [속성] title : 그룹으로 묶을 이름 무선 인터넷 프로그래밍
[예제6-4-6] 목록을 그룹으로 구분 <optgroup> 태그 <optgroup> 태그를 사용해서 <select> 태그 안에 있는 <option> 리스트를 내용별로 구분했습니다. <optgroup> 태그를 사용했을 경우 휴대폰 서비스 및 기종에 따라 결과 화면이 다르게 나타납니다. 무선 인터넷 프로그래밍
이전 경로로 이동하게 해주는 태그입니다. 페이지에서 페이지 또는 카드에서 카드로 바로 전에 열었던 내용을 보여 줍니다. <prev> 태그 이전 경로로 이동하게 해주는 태그입니다. 페이지에서 페이지 또는 카드에서 카드로 바로 전에 열었던 내용을 보여 줍니다. <prev>내용</prev> 무선 인터넷 프로그래밍
<prev> 태그 [예제6-4-7] 이전 페이지로 이동 [예제6-4-7] 이전 페이지로 이동 <do> 태그 안에 <prev/> 태그를 단독으로 사용하여 옵션 키를 누르면 이전 페이지로 이동하게 만든 예제입니다. <?xml version="1.0" encoding="ks_c_5601-1987"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="a1"> <p><a href="#a2">다음 페이지로 이동</a><br/></p> </card> <card id="a2"> <p align="center">두번째 페이지 입니다.</p> <do type="accept" label="이전"><prev/></do> </wml> 무선 인터넷 프로그래밍
<prev> 태그 무선 인터넷 프로그래밍
<onevent type="ontimer"> <go href=" "> </onevent> 시간을 지정해주는 태그입니다. <timer> 태그와 함께 <onevent> 태그를 사용해서 지정된 시간이 흐르면 <onevent> 태그의 내용을 실행하게 만들 수 있습니다. <onevent type="ontimer"> <go href=" "> </onevent> <timer name=" " value=" "/> [속성] name : 변수명을 설정합니다. value : 1/10초 단위로 시간을 설정합니다. 무선 인터넷 프로그래밍
<timer> 태그 [예제6-4-8] 순차적으로 글자 출력 [예제6-4-8] 순차적으로 글자 출력 <timer>와 <onevent> 태그를 이용해서 글자가 2초마다 순차적으로 바뀌는 효과를 만들어 보겠습니다. 무선 인터넷 프로그래밍
<timer> 태그 [예제6-4-9] 순차적으로 그림 출력 [예제6-4-9] 순차적으로 그림 출력 그림이 지정된 시간마다 순차적으로 바뀌게 하여 마치 연결된 애니메이션처럼 보이도록 만들어 보겠습니다. 사용될 그림들은 파일 크기와 개수를 줄여 속도가 느려지지 않도록 만듭니다. 무선 인터넷 프로그래밍
6-5 입력양식 관련 태그 무선 인터넷 프로그래밍
<input> 태그 WML에서 입력양식은 <input> 태그를 사용해서 만들 수 있으며 종류는 글상자와 비밀번호 글상자 두 가지를 만들 수 있습니다. 입력양식에 입력된 값은 <do> 태그를 이용하여 <go> 태그에 입력한 주소에 입력값을 보낼 수 있습니다. <input name=" " title=" " type=" " value=" " format=" " emptyok=" " maxlength=" " tabindex=" "/> 무선 인터넷 프로그래밍
<input> 태그 [속성] Name : 변수의 이름을 입력합니다. title : 태그의 이름을 설정합니다. type : 입력양식의 종류를 설정합니다. text : 글을 입력할 수 있습니다. password : 비밀번호를 입력할 때 사용하면 ‘*’로 표시됩니다. value : 입력받을 변수의 기본값 format : 입력 값의 포맷을 지정합니다. A : 문자, 알파벳 대문자 a : 문자, 알파벳 소문자 N : 모든 숫자 X : 문자, 숫자, 알파벳 대문자(대소문자 변경 불가) x : 문자, 숫자, 알파벳 소문자(대소문자 변경 불가) M : 문자, 숫자, 알파벳 대문자(대소문자 변경 가능) m : 문자, 숫자, 알파벳 소문자(대소문자 변경 가능) emptyok : 입력 값이 없을 경우 허용 여부를 설정합니다. 속성값 : true, false maxlength : 입력 값의 최대 길이를 설정합니다. 무선 인터넷 프로그래밍
<input> 태그 [예제 6-5-1] 아이디와 비밀번호 입력양식 입력양식을 이용해서 아이디와 비밀번호 글상자를 만들어 보겠습니다. 아이디와 비밀번호 글상자에 모두 내용을 입력하지 않으면 실행되지 않도록 했고 비밀번호 입력상자에서는 format="*4", maxlength="4" 속성을 사용해서 입력 내용 구분 없이 4자만 입력 가능하도록 설정했습니다. 무선 인터넷 프로그래밍
<setvar name=" " value=" "> <go>, <prev>, <spawn>, <refresh> 태그에 사용하여 변수와 값을 지정하는 태그입니다. <setvar name=" " value=" "> 무선 인터넷 프로그래밍
<setvar> 태그 [예제 6-5-2] 변수값 재대입 ‘Card2'로 이동할 때 <prev> 태그 안에 <setvar> 태그를 이용해서 변수에 값을 재입력하여 그 결과 값이 화면에 출력되도록 만든 예제입니다. 무선 인터넷 프로그래밍
POST 방식으로 <go> 태그와 함께 사용하여 변수와 값을 넘겨줄 때 사용하는 태그입니다. <setvar> 태그 POST 방식으로 <go> 태그와 함께 사용하여 변수와 값을 넘겨줄 때 사용하는 태그입니다. <postfield name=" " value=" "/> 무선 인터넷 프로그래밍
변수의 값이 설정되어 있을 경우 변수값을 다시 설정하도록 해주는 태그입니다. <refresh> 태그 변수의 값이 설정되어 있을 경우 변수값을 다시 설정하도록 해주는 태그입니다. <refresh> 변경 내용 </refresh> 무선 인터넷 프로그래밍
<refresh> 태그 [예제 6-5-3]재입력 입력양식 <do> 태그에 <refresh> 태그를 사용해서 옵션 키를 누르면 입력양식에 입력한 내용이 지워지도록 만든 예제입니다. 무선 인터넷 프로그래밍
6-6 한 단계 버전업된 WML2.0 학습하기 무선 인터넷 프로그래밍
WML2.0이란 WML 언어를 사용하는 WAP1.0은 표현에 대한 제약이 많고 유선 홈페이지와 호환이 되지 않아 개발이 힘들고 게이트웨이가 있어야 하므로 개발 비용이 많이 들어가는 등 여러 가지 문제점을 가지고 있습니다. 이러한 문제를 해결하기 위해서 2001년 말에 차세대 무선 인터넷 규격인 WAP 2.0을 발표하였습니다. WAP2.0은 WML2를 언어를 사용하는데 WML2는 XHTML Basic 언어에서 모바일 환경에 맞도록 내용을 확장한 XHTML MP(Mobile Profile)와 WCSS(Wiress Casscade Style) MP를 기본으로 사용하여 WML1.0보다 다양한 표현이 가능할 뿐만 아니라 유선 홈페이지와 호환이 가능하다는 특징을 가지고 있으면서 기존의 WML1.0과 완벽하게 호환됩니다. 우리나라에서는 WML2로 제작한 문서를 불러오기 위해서는 SKT에서 NateⓜBrowser, LGT에서는 Lion 브라우저를 이용해서 사용하고 있습니다. 무선 인터넷 프로그래밍
WML2.0이란 무선 인터넷 프로그래밍
XHTML으로 폰페이지 제작하기 ● XHTML 구조 XHTML의 구조에 대해서 살펴 보겠습니다. XHTML 구조는 HTML과 유사한 구조를 가지고 있습니다. 단 XHTML을 정의해주는 DTD를 꼭 정의해주어야 합니다. <?xml version="1.0" encoding="ks_c_5601-1987"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/XHTML-basic/XHTML-basic10.dtd"> <html> <head></head> <body title="제목"> 내용 </body> </html> 무선 인터넷 프로그래밍
XHTML으로 폰페이지 제작하기 ● XHTML 규칙 XHTML은 HTML과 유사하지만 규칙이 엄격하여 다음 사항을 지키지 않으며 오류가 발생하게 됩니다. XHTML 문서를 작성할 때 필요한 규칙에 대해서 살펴 보겠습니다. ▼ 문서는 잘 정리되어 있어야 한다! 여러 개의 태그를 함께 사용할 경우 먼저 열린 태그가 먼저 닫혀야 합니다. [예] 틀린 예 - <i>italic <b>italic bold</i> bold </b> 바른 예 - <i>italic <b>italic bold</b></i> <b> bold </b> ▼ 닫기 태그가 없을 경우 ‘/>’ 식으로 표시한다! 닫기 태그가 없이 열기 태그만 사용될 경우 ‘>’ 앞에 ‘/’ 표시를 하여 ‘<태그이름 />’ 식으로 표시해야 합니다. <br/> <hr/> 무선 인터넷 프로그래밍
XHTML으로 폰페이지 제작하기 ▼ 태그와 속성은 모두 영문 소문자로 표시한다! ▼ 태그의 속성값은 항상 따옴표로 표시한다! HTML에서는 태그의 속성값에 따옴표를 표시하지 않아도 되었지만 WML2에서는 속성값에 따옴표를 표시해야 합니다. [예] <img src="a.jpg"> 무선 인터넷 프로그래밍
XHTML 문서 작성 방법 XHTML은 HTML 기반을 가지고 있다는는 면에서 KUN과 유사하지만 스타일 (<style>)을 사용하지 않는 KUN에 비해 XHTML에서는 스타일을 사용할 수 있습니 다. 특히 네이트에서 사용하는 [NateⓜBrowser] 브라우저는 속성 설정 시 스타일을 사용하기를 권장하고 있으므로 스타일을 이용해서 속성을 설정하도록 합니다. 대 부분의 태그가 KUN과 유사하므로 자세한 태그 사용방법은 KUN 소개 페이지를 참 조하도록 하고 여기서는 예제를 통해 XHTML 문서 작성에 대해서 살펴 보겠습니 작업한 문서는 NATE 개발자를 위한 툴인 [Wi-TOP] 시뮬레이터를 이용해서 작 업한 내용을 확인하는 것이 좋으나 이 프로그램은 배포용 툴이 아니므로 일반인들 이 확인하기 어렵습니다. 여기서는 XHTML MP를 지원하는 Openwave V7 시뮬레 이터를 이용해서 작업 문서를 확인해보도록 하겠습니다. 무선 인터넷 프로그래밍
XHTML 문서 작성 방법 [예제 6-6-1] 표 예제 XHTML은 HTML4.0 형식으로 따르고 있으므로 홈페이지의 HTML과 제작 방법이 같습니다. 단 속성들은 스타일을 사용하기를 권장하고 있으므로 가급적 스타일을 이용하도록 합니다. 위 예제는 테이블을 이용해서 제목을 꾸민 예제입니다. 표의 경계선을 표시하고 싶을 경우에는 ‘style="border-style:solid"’ 속성을 이용해서 꾸미며 휴대폰 액정의 크기가 제각기 다른 점을 감안하여 표의 너비는 % 단위로 설정하도록 합니다. 표에 관련된 내용은 KUN과 유사하므로 참조하기 바라며 스타일 설정 방법은 HTML의 CSS와 대부분 유사하므로 자세한 방법은 생략하도록 하겠습니다. 무선 인터넷 프로그래밍
XHTML 문서 작성 방법 [예제 6-6-2] 표 스타일 예제 표에 스타일을 적용하여 표의 왼쪽과 오른쪽 테두리를 안보이도록 만든 예제입니다. border-style을 적용하여 표에 테두리를 표시하도록 한 다음 solid;border-left-style:none, border-right-style:none 속성을 이용해서 표의 왼쪽과 오른쪽에 테두리를 보이지 않도록 했습니다. 그리고 표 시작과 끝에 <div> 태그에 align 속성을 사용해서 표를 정렬했습니다. <p> 태그는 입력 위치에 따라 오류를 발생할 수 있으므로 <p> 태그 대신 <div> 태그를 많 이 사용합니다. 글자에는 <font> 속성을 사용해서 색을 설정했습니다. 무선 인터넷 프로그래밍
XHTML 문서 작성 방법 [예제 6-6-3] 메뉴 구성하기 하이퍼링크를 설정해서 메뉴를 구성한 예제입니다. accesskey 속성을 이용해서 자판을 눌러 실행할 수 있는 등 설정 방법은 KUN과 동일합니다. <marquee> 태그를 사용해서 글자를 흐르게 만들고 <blink> 태그를 사용해서 글자를 깜박이게 만들 수 있으며 style="color:색상" 속성을 이용하면 글자 색을 지정할 수 있습니다. 스타일을 설정한 글자에 커서를 위치하면 색상이 반전됩니다. 무선 인터넷 프로그래밍
XHTML 문서 작성 방법 [예제 6-6-4] 문서에 그림 넣기 문서에 그림과 픽토그램을 삽입해서 꾸민 예제입니다. 그림 삽입하는 방법은 WML과 동일합니다. 픽토그램 경로는 브라우저마다 다르므로 사용할 브라우저에서 제시하는 픽토그램 경로에 맞추어 작업합니다. 무선 인터넷 프로그래밍
XHTML 문서 작성 방법 [예제 6-6-5] 배경 그림 넣기 문서 배경에 그림을 넣거나 테이블에 그림을 넣어서 꾸민 예제입니다. 해당 태그에 스타일을 사용해서 ‘ style="background-image:URL(그림경로)“ ’ 식으로 입력해서 배경에 그림을 넣거나 ‘style="background-color:색상;” ’ 식으로 입력해서 배경에 색을 지정할 수 있습니다. 예제에서 제목에 사용된 표구성은 실제 NATE에서 이용하고 있는 구성입니다. 무선 인터넷 프로그래밍
입력양식을 이용해서 신상명세를 입력하는 예제입니다. 입력양식 사용 방법은 KUN과 동일합니다. XHTML 문서 작성 방법 [예제 6-6-6] 입력양식 예제 입력양식을 이용해서 신상명세를 입력하는 예제입니다. 입력양식 사용 방법은 KUN과 동일합니다. 무선 인터넷 프로그래밍
XHTML 문서 작성 방법 무선 인터넷 프로그래밍
WML1.0을 WML2.0으로 변환하기 WML2.0 DTD에서는 기존의 WML1.0 문서도 불러 올 수 있는 기능을 제공합니다. WML2.0을 지원하는 브라우저에서는 WML1.0의 소스를 WML2.0 환경에 맞추어 변환하여 문서를 불러 옵니다. 이와같이 문서를 변환하는 기능을 마이그레이션(Migration)이라고 합니다. 마이그레이션은 WML1.0의 기능을 고스란히 유지하면서 변환하는 방법과 XHTML로 변경하는 방법이 있으며 휴대폰에 설치되어 있는 브라우저마다 처리 방식이 다릅니다. XHTML 사용하기를 권장하는 네이트의 NateⓜBrowser 브라우저는 XHTML으로 마이그레이션합니다. 브라우저에서 변환하는 기능도 있지만 기존의 WML1.0으로 제작한 문서를 WML2.0 환경에 맞추어 직접 수정할 때 사용하기도 합니다. 마이그레이션으로 처리하는 방법에 대해서 알아 보겠습니다. 무선 인터넷 프로그래밍
WML2.0 환경에 알맞도록 처리하기 위해 WML2.0 DTD 형식으로 변경해주어야 합니다. <!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”> <?xml version="1.0" encoding="ks_c_5601-1987"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 2.0//EN" "http://www.wapforum.org/DTD/wml20.dtd"> 무선 인터넷 프로그래밍
<wml> -> <html> <card> -> <body> WML1.0을 WML2.0으로 변환하기 ▶ 태그 변환 <wml> 태그는 <html>로 변경하고 <card> 태그는 <body> 태그로 변경합니다. 만일 문서 안에 여러 개의 <card>를 사용했을 경우에는 페이지를 나누거나 <card> 태그 앞에 ‘wml:'을 입력해 주면 됩니다. 이외에 기타 WML 태그들 앞에 ‘wml:'라고 표시해주면 WML2에서 인식이 가능합니다. <wml> -> <html> <card> -> <body> <WML태그> -> <wml:WML태그> 무선 인터넷 프로그래밍
WML1.0을 WML2.0으로 변환하기 [하나더]WML 확장 모듈 WML2.0은 XHTML MP와 ‘wml:’를 붙여서 사용하는 WML 확장 모듈 모두 포함합니다. WML 확장 모듈을 사용할 경우 손쉽게 문서를 변환할 수 있으며 특히 ‘<do type="vnd.up" label="상위">’와 같이 상위 페이지로 이동하는 WML만의 기능을 사용할 수 있도록 해줍니다. 그러나 최근에는 XHTML을 사용하는 추세이므로 가급적 XHTML을 이용해서 작업하기를 권장합니다. 무선 인터넷 프로그래밍
WML1.0을 WML2.0으로 변환하기 [예제 6-6-7]문서 변환 글자 입력과 카드 이동이 있는 간단한 예제입니다. 아래 WML 문서를 보고 WML2.0, XHTML 문서로 변경해보도록 합니다. 변경한 문서를 통해 WML1.0, WML2.0, XHTML 언어에 따라 어떠한 차이가 있는지 알아 봅니다. 무선 인터넷 프로그래밍
WML1.0을 WML2.0으로 변환하기 [잠깐] WML2.0는 WML1.0보다 오히려 KUN과 유사한 형식을 가지고 있습니다. 결국 모바일 언어가 유선 홈페이지의 HTML과 닮아가고 있다는 것을 의미하며 결국 SKT, KTF, LGT 업체 간의 폰페이지 교환 뿐만 아니라 휴대폰으로 유선 홈페이지를 볼 수 있음을 시사하고 있음을 알 수 있습니다. 실제로 NateⓜBrowser 개발업체인 인프라웨어(http://www.infraware.co.kr)에서 개발한 [Embider™ Browser 5] 브라우저에서는 유선 홈페이지를 고스란히 휴대폰으로 볼 수 있는 등 고도화된 화려한 기술을 제공하고 있습니다. 이러한 분위기에 맞추어 여기서는 학습한 WML2.0를 KUN과 서로 비교하면서 또는 통합해서 작업해보고 유선 홈페이지 문서를 모바일로 변환해서 작업해보는 것도 재미있을 듯 싶습니다. 무선 인터넷 프로그래밍
1.WML1과 WML2와 다른 점에 대해서 서술하세요. 연습문제 1.WML1과 WML2와 다른 점에 대해서 서술하세요. 무선 인터넷 프로그래밍
연습문제 2.다음은 WML1 소스입니다. 마이그레이션으로 WML2로 변환될 소스를 작성해 보세요. 무선 인터넷 프로그래밍
연습문제 3.문서를 열면 ‘앞으로 발전하게 될 모바일 언어는?’ 글자가 출력되고 [정답] Accept 키를 누르면 ‘WML 입니다.’라는 글이 나타나게 만들려고 합니다. 각 괄호에 해당하는 태그 및 속성값을 입력하세요. <card> <p ="wrap">앞으로 발전하게 될 모바일 언어는?</p> < type="accept" label="정답"> < href=" "/> </ > </card> <card id="a2"> <p>WML 입니다.</p> 무선 인터넷 프로그래밍
연습문제 4.등산, 2.게임, 3.낮잠 이라는 리스트가 나타나는 메뉴입니다. 각 괄호에 적당한 태그를 입력하세요. 4.등산, 2.게임, 3.낮잠 이라는 리스트가 나타나는 메뉴입니다. 각 괄호에 적당한 태그를 입력하세요. < name="hobby"> < value="clime">등산</ > < value="game">게임</ > < value="sleep">낮잠</ > </ > < type="accept" label="선택"> < href="a.wml"/> 무선 인터넷 프로그래밍
5.2초가 흐른 후 입력된 URL로 문서를 이동하려고 합니다. N,O,P 괄호에 해당하는 태그와 속성을 입력하세요. 연습문제 5.2초가 흐른 후 입력된 URL로 문서를 이동하려고 합니다. N,O,P 괄호에 해당하는 태그와 속성을 입력하세요. < type=" "> <go href="URL"> </ > <timer value=" "> 무선 인터넷 프로그래밍
6.화면 전환에 사용하는 태그입니다. A 문장과 B 문장이 같도록 E,F 괄호에 태그를 입력하세요. A: <a href="URL">내홈피로</a> B: < >< href="URL">내홈피로</ > 무선 인터넷 프로그래밍
< type=" " format=" "> 7. 3자리 이상의 숫자만 입력할 수 있는 비밀번호 입력양식을 만들려고 합니다. G,H,I 괄호에 적당한 태그와 속성을 입력하세요. < type=" " format=" "> 무선 인터넷 프로그래밍