Download presentation
Presentation is loading. Please wait.
1
제 3 장 WML (1) 1. WML 문서의 구조 2. 텍스트 3. 이미지 4. 링크 제 3 장 WML (1)
2
1. WML 문서의 구조 WML 문서 : 카드(card)데크(deck), 마이크로브라우저에 디스플레이
기능에 따른 카드의 구분 (1) 보여주는 카드 : 그림이나 문자를 보여주는 카드 (2) 선택 카드 : 메뉴를 선택하도록 하는 카드 (3) 입력 카드 : 사용자의 이름이나 아이디를 입력하게 하는 카드 (4) 내부적 카드 : 서비스를 제공하기 위하여 일정한 작업을 수행하는 카드 제 3 장 WML (1)
3
데크의 기본 구조 제 3 장 WML (1)
4
데크의 기본 구조 <?xml version = "1.0" encoding="ks_c_5601-1987"?>
<! DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" " <wml> <head></head> <template></template> ∙∙∙ <card></card> </wml> 제 3 장 WML (1) 그림 3-2 데크의 기본 구조 그림 3-2 데크의 기본 구조 그림 3-2 데크의 기본 구조
5
1번~3번 줄 : XML 문서 형식의 선언으로, 버전 속성, 문자 코드 속성, 문서 형식 선언을 포함한다.
(설명) 1번~3번 줄 : XML 문서 형식의 선언으로, 버전 속성, 문자 코드 속성, 문서 형식 선언을 포함한다. 5번 줄~마지막 줄 : <wml> ~ </wml>, 하나의 데크 6번 줄 : <head>, 접속 제어와 메타 정보를 포함 7번 줄 : <template>, 데크에 포함된 모든 카드에 적용되는 이벤트 정보를 포함. - 9번 줄 : <card>, 4가지 기능의 카드 제 3 장 WML (1)
6
카드의 기본 구조 (설명) - 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)
7
표 3-1 WML 포맷팅 태그 - 3번 줄 : <go>, <do>에 의해 정의된 키가 눌려졌을 때, 이동되는 카드나 URL을 정의. 5번 줄 : <p>는 사용자에게 보여주는 기능 2. 텍스트 WML 포맷팅 태그 WML 태그 설 명 <b> 굵은체 <i> 이태릭체 <u> 밑줄 텍스트 <em> 강조 텍스트 <strong> em 보다 더 강조 <big> 디폴트 보다 더 큰 폰트 <small> 디폴트 보다 더 작은 폰트 제 3 장 WML (1)
8
[예제 3-1] 포맷팅 구성요소를 사용한 WML 문서의 예 (ch3-1.wml)
1 <?xml version="1.0"?> 2 <!DOCTYPE wml PUBLIC "- // WAPFORUM//DTD WML 1.2//EN" 3 " 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] 포맷팅 구성요소를 사용한 WML 문서의 예 (ch3-1.wml)](http://slidesplayer.org/slide/11335420/61/images/8/%5B%EC%98%88%EC%A0%9C+3-1%5D+%ED%8F%AC%EB%A7%B7%ED%8C%85+%EA%B5%AC%EC%84%B1%EC%9A%94%EC%86%8C%EB%A5%BC+%EC%82%AC%EC%9A%A9%ED%95%9C+WML+%EB%AC%B8%EC%84%9C%EC%9D%98+%EC%98%88+%28ch3-1.wml%29.jpg "1 < xml version= 1.0 > 2 <!DOCTYPE wml PUBLIC - // WAPFORUM//DTD WML 1.2//EN 3 > 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)")
9
예제 3-1의 실행 결과 제 3 장 WML (1)
10
3. 이미지 WML 문서에 이미지를 표현하기 위해서는 <img> 구성요소를 사용
<img src=“url” alt=“text” localsrc=“imgfile”/> alt 속성 : WML 시뮬레이터가 이미지를 표현할 수 없을 때 대신 표현할 문자를 설정 src 속성 : 표시할 이미지의 URL을 설정 localsrc 속성 : 사용자 에이전트 ROM이나 웹 서버에 저장된 이미지를 지정 제 3 장 WML (1)
11
[예제 3-2] 이미지를 사용한 WML 문서의 예 (ch3-2.wml)
1 <?xml version="1.0"?> 2 <!DOCTYPE wml PUBLIC "- // WAPFORUM//DTD WML 1.2//EN" 3 " 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] 이미지를 사용한 WML 문서의 예 (ch3-2.wml)](http://slidesplayer.org/slide/11335420/61/images/11/%5B%EC%98%88%EC%A0%9C+3-2%5D+%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC+%EC%82%AC%EC%9A%A9%ED%95%9C+WML+%EB%AC%B8%EC%84%9C%EC%9D%98+%EC%98%88+%28ch3-2.wml%29.jpg "1 < xml version= 1.0 > 2 <!DOCTYPE wml PUBLIC - // WAPFORUM//DTD WML 1.2//EN 3 > 4 <!-- ch3-2.wml --> 5 <!-- 하이퍼링크를 사용한 WML 문서 --> 6. 7 <wml> 8 <card> 9 <p align= center > 10 <b>월드컵</b><br/><br/> <!-- 이미지 삽입 --> 13 <img src= worldcup1.bmp alt= 월드컵 사진 > 14 </p> 15 </card> 16 </wml> 제 3 장 WML (1)")
12
예제 3-2의 실행 결과 제 3 장 WML (1)
13
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)
14
[예제 3-3] 하이퍼링크를 사용한 WML문서의 예 (ch3-3.wml)
1 <?xml version="1.0"?> 2 <!DOCTYPE wml PUBLIC "- // WAPFORUM//DTD WML 1.1//EN" 3 " 4 <!-- ch3-3.wml --> 5 <!-- 하이퍼링크를 사용한 WML 문서 --> 6 7 <wml> 8 <card> 9 <p > 10 하이퍼링크<br/><br/> 11 12 <a accesskey="1" 13 href=" 14 title="Weather">날씨</a> 15 <br/> 16 <a accesskey="2" 17 href=" 18 title="News">뉴스</a><br/> 19 </p> 20 </card> 21 </wml> 제 3 장 WML (1)
![[예제 3-3] 하이퍼링크를 사용한 WML문서의 예 (ch3-3.wml)](http://slidesplayer.org/slide/11335420/61/images/14/%5B%EC%98%88%EC%A0%9C+3-3%5D+%ED%95%98%EC%9D%B4%ED%8D%BC%EB%A7%81%ED%81%AC%EB%A5%BC+%EC%82%AC%EC%9A%A9%ED%95%9C+WML%EB%AC%B8%EC%84%9C%EC%9D%98+%EC%98%88+%28ch3-3.wml%29.jpg "1 < xml version= 1.0 > 2 <!DOCTYPE wml PUBLIC - // WAPFORUM//DTD WML 1.1//EN 3 > 4 <!-- ch3-3.wml --> 5 <!-- 하이퍼링크를 사용한 WML 문서 --> 6. 7 <wml> 8 <card> 9 <p > 10 하이퍼링크<br/><br/> <a accesskey= 1 13 href= 14 title= Weather >날씨</a> 15 <br/> 16 <a accesskey= 2 17 href= 18 title= News >뉴스</a><br/> 19 </p> 20 </card> 21 </wml> 제 3 장 WML (1)")
15
예제 3-3의 실행 결과 제 3 장 WML (1)
16
<do> 구성요소를 사용한 링크 <do> 구성요소의 사용 형식
<do type=“accept” label=“Next”> <go href=“#NextCard”/> </do> - type 속성: “accept” 좌측 소프트 키, “options” 우측 소프트 키 - 버튼이 눌러졌을 때 href 속성을 지닌 <go> 구성요소를 사용하여 다음 카드인 NextCard로 이동한다. 외부 링크 : href 속성에 #과 카드 이름을 데크의 URL에 위치시 켜 다른 WML 파일내의 카드를 참조할 수 있다. 제 3 장 WML (1)
17
[예제 3-4] 내부 링크를 사용한 WML 프로그램의 예 (ch3-4.wml)
1 <?xml version = "1.0"?> 2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" 3 " 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] 내부 링크를 사용한 WML 프로그램의 예 (ch3-4.wml)](http://slidesplayer.org/slide/11335420/61/images/17/%5B%EC%98%88%EC%A0%9C+3-4%5D+%EB%82%B4%EB%B6%80+%EB%A7%81%ED%81%AC%EB%A5%BC+%EC%82%AC%EC%9A%A9%ED%95%9C+WML+%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8%EC%9D%98+%EC%98%88+%28ch3-4.wml%29.jpg "1 < xml version = 1.0 > 2 <!DOCTYPE wml PUBLIC -//WAPFORUM//DTD WML 1.2//EN 3 > 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> <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)")
18
예제 3-4의 실행 결과 제 3 장 WML (1)
19
[예제 3-5] 외부 링크를 포함하는 WML 문서의 예
▶ ch3-5.wml 1 <?xml version = "1.0"?> 2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" 3 " 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)
![[예제 3-5] 외부 링크를 포함하는 WML 문서의 예](http://slidesplayer.org/slide/11335420/61/images/19/%5B%EC%98%88%EC%A0%9C+3-5%5D+%EC%99%B8%EB%B6%80+%EB%A7%81%ED%81%AC%EB%A5%BC+%ED%8F%AC%ED%95%A8%ED%95%98%EB%8A%94+WML+%EB%AC%B8%EC%84%9C%EC%9D%98+%EC%98%88.jpg "▶ ch3-5.wml. 1 < xml version = 1.0 > 2 <!DOCTYPE wml PUBLIC -//WAPFORUM//DTD WML 1.2//EN 3 > 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/> <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)")
20
▶ ch3-6.wml (링킹되는 WML 문서) 1 <?xml version = "1.0"?>
2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" 3 " 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)
21
예제 3-5의 실행 결과 제 3 장 WML (1)
Similar presentations
![UIT Series HTML + JavaScript [Chapter 1] Html을 이용한 웹 페이지 만들기.](/90/14451722/big_thumb.jpg "UIT Series HTML + JavaScript [Chapter 1] Html을 이용한 웹 페이지 만들기.>")