제 3 장 WML (1) 1. WML 문서의 구조 2. 텍스트 3. 이미지 4. 링크 제 3 장 WML (1)
1. WML 문서의 구조 WML 문서 : 카드(card)데크(deck), 마이크로브라우저에 디스플레이 기능에 따른 카드의 구분 (1) 보여주는 카드 : 그림이나 문자를 보여주는 카드 (2) 선택 카드 : 메뉴를 선택하도록 하는 카드 (3) 입력 카드 : 사용자의 이름이나 아이디를 입력하게 하는 카드 (4) 내부적 카드 : 서비스를 제공하기 위하여 일정한 작업을 수행하는 카드 제 3 장 WML (1)
데크의 기본 구조 제 3 장 WML (1)
데크의 기본 구조 <?xml version = "1.0" encoding="ks_c_5601-1987"?> <! DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd"> <wml> <head></head> <template></template> ∙∙∙ <card></card> </wml> 제 3 장 WML (1) 그림 3-2 데크의 기본 구조 그림 3-2 데크의 기본 구조 그림 3-2 데크의 기본 구조
1번~3번 줄 : XML 문서 형식의 선언으로, 버전 속성, 문자 코드 속성, 문서 형식 선언을 포함한다. (설명) 1번~3번 줄 : XML 문서 형식의 선언으로, 버전 속성, 문자 코드 속성, 문서 형식 선언을 포함한다. 5번 줄~마지막 줄 : <wml> ~ </wml>, 하나의 데크 6번 줄 : <head>, 접속 제어와 메타 정보를 포함 7번 줄 : <template>, 데크에 포함된 모든 카드에 적용되는 이벤트 정보를 포함. - 9번 줄 : <card>, 4가지 기능의 카드 제 3 장 WML (1)
카드의 기본 구조 (설명) - 1번 줄 : <card>, 카드의 시작 <card id="name“> <do type="type" label="label"> <go href="url"/> </do> <p> text </p> </card> (설명) - 1번 줄 : <card>, 카드의 시작 - 2번 줄 : <do>, 사용자가 누른 키에 대한 행동을 정의하는 부분 “type”, 사용자가 누른 키를 정의 “label”, 키 이름 제 3 장 WML (1)
표 3-1 WML 포맷팅 태그 - 3번 줄 : <go>, <do>에 의해 정의된 키가 눌려졌을 때, 이동되는 카드나 URL을 정의. 5번 줄 : <p>는 사용자에게 보여주는 기능 2. 텍스트 WML 포맷팅 태그 WML 태그 설 명 <b> 굵은체 <i> 이태릭체 <u> 밑줄 텍스트 <em> 강조 텍스트 <strong> em 보다 더 강조 <big> 디폴트 보다 더 큰 폰트 <small> 디폴트 보다 더 작은 폰트 제 3 장 WML (1)
[예제 3-1] 포맷팅 구성요소를 사용한 WML 문서의 예 (ch3-1.wml) 1 <?xml version="1.0"?> 2 <!DOCTYPE wml PUBLIC "- // WAPFORUM//DTD WML 1.2//EN" 3 "http://www.wapforum.org/DTD/wml12.dtd"> 4 <!-- ch3-1.wml --> 5 <!-- 텍스트 포맷팅 연습 WML 문서 --> 6 7 <wml> 8 <card> 9 <p align="center"> 10 <big><strong>사랑</strong></bold><br/><br/> 11 </p> 12 <p align="right"> 13 <i>안도현</i><br/><br/> 14 </p> 15 <p> 16 한 사람을 <em>사랑</em>하는 일이<br/> 17 <small>죄 짓는 일이 되지 않게 하소서</small><br/> 18 나로 하여 그이가 <u>눈물</u> 짓지 않게 하소서<br/> 19 <b>사랑</b>으로 하여 못 견딜 <u>두려움</u>으로<br/> 20 스스로 <b>가슴</b>을 쥐어뜯지 않게 하소서<br/> 21 <b>사랑</b>으로 하여 내가 쓰러져 죽는 날에도<br/> 22 그이를 진정으로 <b>사랑</b>했었노라 말하지 않게 하소서<br/> 23 <u>내 무덤에는 그리움만<br/> 24 소금처럼 하얗게 남게 하소서</u><br/> 25 </p> 26 </card> 27 </wml> 제 3 장 WML (1)
예제 3-1의 실행 결과 제 3 장 WML (1)
3. 이미지 WML 문서에 이미지를 표현하기 위해서는 <img> 구성요소를 사용 <img src=“url” alt=“text” localsrc=“imgfile”/> alt 속성 : WML 시뮬레이터가 이미지를 표현할 수 없을 때 대신 표현할 문자를 설정 src 속성 : 표시할 이미지의 URL을 설정 localsrc 속성 : 사용자 에이전트 ROM이나 웹 서버에 저장된 이미지를 지정 제 3 장 WML (1)
[예제 3-2] 이미지를 사용한 WML 문서의 예 (ch3-2.wml) 1 <?xml version="1.0"?> 2 <!DOCTYPE wml PUBLIC "- // WAPFORUM//DTD WML 1.2//EN" 3 "http://www.wapforum.org/DTD/wml12.dtd"> 4 <!-- ch3-2.wml --> 5 <!-- 하이퍼링크를 사용한 WML 문서 --> 6 7 <wml> 8 <card> 9 <p align="center"> 10 <b>월드컵</b><br/><br/> 11 12 <!-- 이미지 삽입 --> 13 <img src="worldcup1.bmp" alt="월드컵 사진"> 14 </p> 15 </card> 16 </wml> 제 3 장 WML (1)
예제 3-2의 실행 결과 제 3 장 WML (1)
4. 링크 WAP 응용의 링크 기능 <a> 구성요소를 사용하여 링크를 설정 <a> 구성요소의 사용 형식 - WML 문서 간(외부로의 링크) - 데크의 카드 간(내부 링크) <a> 구성요소를 사용하여 링크를 설정 <a> 구성요소의 사용 형식 <a accesskey=”value” href=“url” title=“label”> text </a> accesskey 속성 : 0~9 숫자를 하나 지정, 그 해당 숫자를 누르면 링크로 이동 href 속성 : 링크가 실행되면 이동하는 위치 title 속성 : 소프트 키를 나타내는 레이블 text 속성 : 단말기 화면에 나타날 문자 제 3 장 WML (1)
[예제 3-3] 하이퍼링크를 사용한 WML문서의 예 (ch3-3.wml) 1 <?xml version="1.0"?> 2 <!DOCTYPE wml PUBLIC "- // WAPFORUM//DTD WML 1.1//EN" 3 "http://www.wapforum.org/DTD/wml12.dtd"> 4 <!-- ch3-3.wml --> 5 <!-- 하이퍼링크를 사용한 WML 문서 --> 6 7 <wml> 8 <card> 9 <p > 10 하이퍼링크<br/><br/> 11 12 <a accesskey="1" 13 href="http://w.yahoo.co.kr/we/index.wml" 14 title="Weather">날씨</a> 15 <br/> 16 <a accesskey="2" 17 href="http://w.yahoo.co.kr/ns/index.wml" 18 title="News">뉴스</a><br/> 19 </p> 20 </card> 21 </wml> 제 3 장 WML (1)
예제 3-3의 실행 결과 제 3 장 WML (1)
<do> 구성요소를 사용한 링크 <do> 구성요소의 사용 형식 <do type=“accept” label=“Next”> <go href=“#NextCard”/> </do> - type 속성: “accept” 좌측 소프트 키, “options” 우측 소프트 키 - 버튼이 눌러졌을 때 href 속성을 지닌 <go> 구성요소를 사용하여 다음 카드인 NextCard로 이동한다. 외부 링크 : href 속성에 #과 카드 이름을 데크의 URL에 위치시 켜 다른 WML 파일내의 카드를 참조할 수 있다. 제 3 장 WML (1)
[예제 3-4] 내부 링크를 사용한 WML 프로그램의 예 (ch3-4.wml) 1 <?xml version = "1.0"?> 2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" 3 "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 <!-- ch3-4.wml --> 6 <!-- 내부 링킹을 사용한 WML --> 7 8 <wml> 9 <card id = "index" title = "카드(1)"> 10 <do type = "accept" label = "Next"> 11 <go href = "#card2" /> 12 </do> 13 <p> 14 첫 번째 카드입니다.<br /> 15 </p> 16 </card> 17 18 <card id = "card2" title = "카드(2)"> 19 <do type = "options" label = "Back"> 20 <prev /> 21 </do> 22 <p> 23 두 번째 카드입니다.<br /> 24 </p> 25 </card> 26 </wml> 제 3 장 WML (1)
예제 3-4의 실행 결과 제 3 장 WML (1)
[예제 3-5] 외부 링크를 포함하는 WML 문서의 예 ▶ ch3-5.wml 1 <?xml version = "1.0"?> 2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" 3 "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 <!-- ch3-5.wml --> 6 <!-- 외부 링크를 사용한 WML --> 7 8 <wml> 9 <card id = "index" title = "목록"> 10 <p> 11 <a href="ch3-6.wml#card2"> 12 <img src="music2.bmp" alt="music" /> 13 </a>음악<br/> 14 15 <a href="ch3-6.wml#card3"> 16 <img src="video1.bmp" alt="video" /> 17 <a>비디오<br/> 18 </p> 19 </card> 20 </wml> 제 3 장 WML (1)
▶ ch3-6.wml (링킹되는 WML 문서) 1 <?xml version = "1.0"?> 2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" 3 "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 <!-- ch3-6.wml --> 6 <!-- 외부 링크에 의해 링킹되는 WML --> 7 8 <wml> 9 <card id="card2" title ="음악"> 10 <p> 11 음악 카드를 선택하셨습니다!! 12 </p> 13 </card> 14 15 <card id = "card3" title= "비디오"> 16 <p> 17 비디오 카드를 선택하셨습니다!! 18 </p> 19 </card> 20 </wml> 제 3 장 WML (1)
예제 3-5의 실행 결과 제 3 장 WML (1)