6부 WML/WML2.0 언어배우기 6-1 WML에 대해서 6-2 WML 기본 태그 6-3 글과 그림 삽입에 관련된 태그 6-4 링크 관련 태그 6-5 입력양식 관련 태그 6-6 한 단계 버전업된 WML2.0 학습하기 무선 인터넷 프로그래밍
6-1WML에 대해서 무선 인터넷 프로그래밍
WML과 Markup Language와의 상관관계 무선 인터넷 프로그래밍
WML의 개념과 특징 WML의 개념 WML의 특징 WAP 프로토콜에 따른 무선 인터넷의 제약된 환경에 최적화된 언어로서 기존의 HTML과 같이 태그를 사용하여 누구나 쉽게 제작할 수 있도록 만든 마크업 언어 WML의 특징 하나의 <wml> 덱 안에 여러 개의 <card>를 이용해서 문서 작성. XML의 서브셋으로 XML 문서의 문자셋을 따름 (US-ASCII / UNICODE 2.0 / ISO-8859-1/UTF-16) 대소문자를 구별함 히스토리 기능이 있음 XML의 DTD(Data Type Definition)를 사용 <?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 문서 구조 살펴보기 DTD 선언 Head 선언 WML Deck Card <?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> DTD 선언 Head 선언 Card WML Deck 무선 인터넷 프로그래밍
WML 문서 제작하는 방법 [메모장을 이용하는 방법] [애니빌더를 이용하는 방법] 무선 인터넷 프로그래밍
WML 문서 실행 시뮬레이터 Openwave SDK 6.2 시뮬레이터 이용 [http://www.anybil.com]의 자료실 http://idisk.kongju.ac.kr id : 810033 pwd : 3333 무선 인터넷 프로그래밍
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 ․ ordered : card의 내용을 순서대로 보여줄 것인지 사용자가 선택해서 보여 줄 것인지를 지정. 속성값 : true / false ․ oneterforward : <go> 태그를 사용하여 해당 카드로 이동했을 때 이동할 URL을 설정 ․ oneterbackward : <prev> 태그를 사용하여 해당 카드로 이동했을 때 이동할 URL 설정 ontimer : 카드 안에 <timer> 태그를 사용하여 타이머 시간이 종료되었을 때 이동할 URL을 지정 무선 인터넷 프로그래밍
<do> 태그 휴대폰에서 Accept 키나 Options 키와 같은 키를 눌렀을 경우에 동작을 지정합니다. <do type=" " label=" " name=" " option=" "> 실행 </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> 태그와 함께 사용하여 휴대폰 특정 키의 이동 경로를 설정할 때 많이 사용. [속성] ․ accept-charset : 사용하는 문자셋을 선택. ․ method : 전송 방식 선택. 기본값은 get. 속성값 : get / post ․ href : 이동 경로 설정. 속성값에는 홈페이지 주소를 입력하거나 같은 문서의 카드로 이동할 경우에는 ‘#카드 이름’ 순으로 입력해서 이동 경로를 설정함 <go accept-charset="" method="" href=""></go> 무선 인터넷 프로그래밍
<go> 태그 [예제 6-2-1] 카드 이동 [예제 6-2-1] 카드 이동 문서를 열면 첫 번째 카드 내용이 출력되고 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>의 내용보다 우선으로 실행됨 [속성] ․ oneterforward : <go> 태그를 사용하여 해당 카드로 이동했을 때 이동할 URL을 설정. ․ oneterbackward : <prev> 태그를 사용하여 해당 카드로 이동했을 때 이동할 URL을 설정. ․ ontimer : 카드 안에 <timer> 태그를 사용하여 타이머 시간이 종료되었을 때 이동할 URL을 지정. <template> contents </template> 무선 인터넷 프로그래밍
<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> 태그 아무 동작도 실행하지 않도록 해주는 태그로 실행하지 않게 할 태그 안에 넣어서 사용함 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> 태그에 위치하여 접근 권한 정보를 제공함. [속성] ․ http-equiv : http-equiv="Cache-Control“ 다음과 같이 사용하여 속성들이 http 헤더로 해석될 수 있도록 함. ․ name : 속성의 이름을 설정. ․ forua : 메타 정보 값이 브라우저에서 사용될지 설정. true/false중 선택 ․ content :속성과 관련된 메타 데이터의 값 표시. ‘content="max-age=no-cache"’라고 선언하면 캐쉬를 사용하지 않음. ․ scheme : 속성값을 해석하는데 사용되는 폼이나 구조 결정. <head> <meta http-equiv=" " content=" " forua=" "/> </head> 무선 인터넷 프로그래밍
<meta> 태그 ▼사용 예 <meta http-equiv="Cache-Control" content="max-age=no-cache" forua="true"/> 문서 내용을 휴대폰의 캐쉬에 저장하지 않고 항상 서버에서 데이터를 가져옴. <meta name="vnd.up.markable" forua="true" content="false"/> 즐겨찾기를 하지 못하도록 설정. 무선 인터넷 프로그래밍
애니빌더에서 자동 생성된 wml의 head 정보 <meta http-equiv="cache-control" content="max-age=0" forua="true" /> <meta http-equiv="Content-Type" content="text/vnd.wap.wml;charset=ks_c_5601-1987" forua="true" /> <meta name="generator" content="AnyBuilder VX" /> <meta name="mobile_carrier" content="skt" /> <meta name="mobile_markup" content="wml" /> <meta name="mobile_version" content="1.1" /> <meta name="mobile_browser" content="au" /> </head> 무선 인터넷 프로그래밍
연습문제1 NO 다시 YES 시작 무선 인터넷 프로그래밍
6-3 글과 그림 삽입에 관련된 태그 무선 인터넷 프로그래밍
<p> 태그 문단을 정의해주는 태그로서 문단 정렬 및 문단 스크롤하는 역할 수행 [속성] ․ align : 문단을 정렬 left : 왼쪽으로 정렬 center : 가운데로 정렬 right : 오른쪽으로 정렬 ․ mode : 문단의 내용을 한 줄로 스크롤할지 여부를 설정 wrap : 문단 스크롤을 실행하지 않음 nowrap : 문단 스크롤 실행 <p align=" " mode=" "> 내용 </p> 무선 인터넷 프로그래밍
<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> <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> 무선 인터넷 프로그래밍
<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> 무선 인터넷 프로그래밍
픽토그램 삽입 태그 무선 인터넷 프로그래밍
연습문제2 무선 인터넷 프로그래밍
6-4 링크 관련 태그 무선 인터넷 프로그래밍
<a> 태그 하이퍼링크를 설정할 때 사용하는 태그로서 경로를 설정해주는 href 속성과 함께 사용 [속성] href : 링크를 실행할 경로를 설정합니다. title : 링크의 레이블을 표시합니다. <a href=" " title=" " > 글자, 그림 등 </a> 무선 인터넷 프로그래밍
<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> 태그 무선 인터넷 프로그래밍
<select> / <option> 태그 <select>는 목록에서 선택하게 해주는 태그로서 <option> 태그와 <do> 태그를 함께 사용 <select> 태그 안에 <option> 태그를 사용하여 리스트를 구성하고 <do> 태그를 사용해서 지정한 목록을 선택 <do> 태그는 <select> 태그가 있는 <card> 안에 위치해야 동작함 단 <select> 태그 안에 <a> 또는 <anchor> 태그는 위치할 수 없음 <select title=" " multiple=" " name=" " value=" " iname=" " ivalue=" "> <option value=" " onpick=“ ”>내용</option> ... </select> [속성] title : 태그의 레이블 입력 multiple : 목록을 다중 선택 가능 유무 설정 true / false name : 변수의 이름을 입력 value : 변수의 기본값 입력 iname : 인덱스를 저장하는 변수의 이름을 입력 ivalue : iname 변수의 기본값을 입력 onpick : 하이퍼링크를 실행할 URL을 입력 무선 인터넷 프로그래밍
<select> / <option> 태그 [예제6-4-3] 목록 선택 <select> 태그를 사용해서 지역, 성별, 나이를 사용자가 골라서 선택할 수 있도록 만들어 보고 그 값을 화면에 출력해 보도록 하겠습니다. [P.311] 무선 인터넷 프로그래밍
<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> <option value="영화소개" onpick="a.wml">영화소개</option> <option value="음악소개" onpick="a.wml">음악소개</option> </select> </p> </card> </wml> 무선 인터넷 프로그래밍
<select> / <option> 태그 무선 인터넷 프로그래밍
<optgroup> 태그 <select> 태그 안에 위치하여 <select> 태그 안에 입력한 <option> 태그들을 그룹으로 만들어 주는 태그 [속성] title : 그룹으로 묶을 이름 <select> <optgroup title=" "> <option> 태그 목록 </optgroup> </select> 무선 인터넷 프로그래밍
<optgroup> 태그 [예제6-4-6] 목록을 그룹으로 구분 <optgroup> 태그를 사용해서 <select> 태그 안에 있는 <option> 리스트를 내용별로 구분했습니다. <optgroup> 태그를 사용했을 경우 휴대폰 서비스 및 기종에 따라 결과 화면이 다르게 나타납니다. 무선 인터넷 프로그래밍
<prev>내용</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> 태그 무선 인터넷 프로그래밍
<timer> 태그 시간을 지정해주는 태그 <timer> 태그와 함께 <onevent> 태그를 사용해서 지정된 시간이 흐르면 <onevent> 태그의 내용을 실행 [속성] name : 변수명을 설정 value : 1/10초 단위로 시간을 설정 <onevent type="ontimer"> <go href=" "> </onevent> <timer name=" " value=" "/> 무선 인터넷 프로그래밍
<timer> 태그 [예제6-4-8] 순차적으로 글자 출력 [예제6-4-8] 순차적으로 글자 출력 <timer>와 <onevent> 태그를 이용해서 글자가 2초마다 순차적으로 바뀌는 효과를 만들어 보겠습니다. [p.316] 무선 인터넷 프로그래밍
<timer> 태그 [예제6-4-9] 순차적으로 그림 출력 [예제6-4-9] 순차적으로 그림 출력 그림이 지정된 시간마다 순차적으로 바뀌게 하여 마치 연결된 애니메이션처럼 보이도록 만들어 보겠습니다. 사용될 그림들은 파일 크기와 개수를 줄여 속도가 느려지지 않도록 만듭니다. [p.317] 무선 인터넷 프로그래밍
연습문제3 무선 인터넷 프로그래밍
6-5 입력양식 관련 태그 무선 인터넷 프로그래밍
<input name=" " title=" " type=" " value=" " format=" " emptyok=" " WML에서 입력양식은 <input> 태그를 사용해서 만들 수 있으며 종류는 글상자와 비밀번호 글상자 두 가지를 만들 수 있음 입력양식에 입력된 값은 <do> 태그를 이용하여 <go> 태그에 입력한 주소에 입력값을 보낼 수 있음 <input name=" " title=" " type=" " value=" " format=" " emptyok=" " maxlength=" "/> 무선 인터넷 프로그래밍
<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>, <refresh> 태그에 사용하여 변수와 값을 지정하는 태그 <setvar name=" " value=" "> 무선 인터넷 프로그래밍
<setvar> 태그 [예제 6-5-2] 변수값 재대입 ‘Card2'로 이동할 때 <prev> 태그 안에 <setvar> 태그를 이용해서 변수에 값을 재입력하여 그 결과 값이 화면에 출력되도록 만든 예제입니다. 무선 인터넷 프로그래밍
<postfield name=" " value=" "/> <setvar> 태그 POST 방식으로 <go> 태그와 함께 사용하여 변수와 값을 넘겨줄 때 사용하는 태그 <postfield name=" " value=" "/> 무선 인터넷 프로그래밍
<refresh> 태그 <refresh> 변경 내용 </refresh> 변수의 값이 설정되어 있을 경우 변수값을 다시 설정하도록 해주는 태그입니다. <refresh> 변경 내용 </refresh> 무선 인터넷 프로그래밍
<refresh> 태그 [예제 6-5-3]재입력 입력양식 <do> 태그에 <refresh> 태그를 사용해서 옵션 키를 누르면 입력양식에 입력한 내용이 지워지도록 만든 예제입니다. 무선 인터넷 프로그래밍
6-6 한 단계 버전업된 WML2.0 학습하기 무선 인터넷 프로그래밍
WML2.0이란 WAP2.0의 등장배경 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 브라우저를 이용해서 사용 무선 인터넷 프로그래밍
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과 유사하지만 규칙이 엄격함 규칙1 : 문서는 잘 정리되어 있어야 한다! (여러 개의 태그를 함께 사용할 경우 먼저 열린 태그가 먼저 닫혀야 함) 규칙2 : 닫기 태그가 없을 경우 ‘/>’ 식으로 표시한다! (닫기 태그가 없이 열기 태그만 사용될 경우 ‘>’ 앞에 ‘/’ 표시를 하여 ‘<태그이름 />’ 식으로 표시해야 함) [예] 틀린 예 - <i>italic <b>italic bold</i> bold </b> 바른 예 - <i>italic <b>italic bold</b></i> <b> bold </b> [예] <br/> <hr/> 무선 인터넷 프로그래밍
XHTML으로 폰페이지 제작하기 규칙3 : 태그와 속성은 모두 영문 소문자로 표시한다! (XHTML은 대문자와 소문자를 구분하므로 모두 소문자로 표시) 규칙4 : 태그의 속성값은 항상 따옴표로 표시한다! (HTML에서는 태그의 속성값에 따옴표를 표시하지 않아도 되었지만 WML2에서는 속성값에 따옴표를 표시해야 함) [예] <img src="a.jpg"> 무선 인터넷 프로그래밍
XHTML 문서 작성 방법 [예제 6-6-1] 표 예제 XHTML은 HTML 기반을 가지고 있다는 면에서 KUN과 유사하지만 스타일(<style>)을 사용하지 않는 KUN에 비해 XHTML에서는 스타일을 사용할 수 있음 [예제 6-6-1] 표 예제 XHTML은 HTML4.0 형식으로 따르고 있으므로 홈페이지의 HTML과 제작 방법이 같음. 단 속성들은 스타일을 사용하기를 권장하고 있으므로 가급적 스타일을 이용하도록 함. 예) 표의 경계선을 표시하고 싶을 경우 ‘style="border-style:solid"’ 속성을 이용 [p.326] 무선 인터넷 프로그래밍
XHTML 문서 작성 방법 [예제 6-6-2] 표 스타일 예제 border-style을 적용하여 표에 테두리를 표시하도록 한 다음 solid;border-left-style:none, border-right-style:none 속성을 이용해서 표의 왼쪽과 오른쪽에 테두리를 보이지 않도록 적용 [p.327] 무선 인터넷 프로그래밍
XHTML 문서 작성 방법 [예제 6-6-3] 메뉴 구성하기 하이퍼링크를 설정해서 메뉴를 구성한 예제로 accesskey 속성을 이용해서 자판을 눌러 실행할 수 있는 등 설정 방법은 KUN과 동일함. <marquee> 태그를 사용해서 글자를 흐르게 만들고 <blink> 태그를 사용해서 글자를 깜박이게 만들 수 있으며 style="color:색상" 속성을 이용하면 글자 색을 지정할 수 있음. [p.328] 무선 인터넷 프로그래밍
XHTML 문서 작성 방법 [예제 6-6-4] 문서에 그림 넣기 문서에 그림과 픽토그램을 삽입해서 꾸민 예제로 그림 삽입하는 방법은 WML과 동일함. 픽토그램 경로는 브라우저마다 다르므로 사용할 브라우저에서 제시하는 픽토그램 경로에 맞추어 작업함. [p.329] 무선 인터넷 프로그래밍
XHTML 문서 작성 방법 [예제 6-6-5] 배경 그림 넣기 문서 배경에 그림을 넣거나 테이블에 그림을 넣어서 꾸민 예제임. 해당 태그에 스타일을 사용해서 ‘ style="background-image:URL(그림경로)“ ’ 식으로 입력해서 배경에 그림을 넣거나 ‘style="background-color:색상;” ’ 식으로 입력해서 배경에 색을 지정할 수 있음. [p.330] 무선 인터넷 프로그래밍
XHTML 문서 작성 방법 [예제 6-6-6] 입력양식 예제 입력양식을 이용해서 신상명세를 입력하는 예제 무선 인터넷 프로그래밍
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을 이용해서 작업하기를 권장합니다. 무선 인터넷 프로그래밍