이번 시간에는... 지난 시간에는 전화걸기, 전화 받기 등 전화기능, 휴대폰 단말기내 전화번호부 제어 기능, 발신 전화, 수신 전화, 부재중 전화 등, 전화 Call Logs 제거를 위한 기능 등, WAP의 전화 및 전화 부가 기능을 위한 WTAI에 대해서 알아보았습니다. 이번 시간에는 WAP 2.0 개발을 위한 XHTML의 기본 사항을 학습해 보도록 하겠습니다.
학습 목표 WAP 2.0 XHTML 21 회차 강의에서 다루게 되는 내용은 다음과 같습니다. 이번 장의 학습 목표 무선 Markup 언어와 XHTML Mobile Profile 에 대해 알 수 있다. WAP 2.0 XHTML MP의 구성과 개발 Tool 및 개발 참조 Site에 대해 알 수 있다. WAP 2.0 XHTML MP 개발을 위한 XHTML MP 태그에 대해 알 수 있다 21 회차 강의에서는 WAP 2.0 부터 지원하기 시작한 XHTML 마크업 언어에 대해서 학습해 보겠습니다. 먼저, 무선 마크업 언어의 발전사와 XHTML 모바일 프로파일의 특징을 알아보고, XHTML MP의 구성과 개발 툴에 대해서 알아본 후, XHTML MP 개발을 위한 XHTML 태그 및 그 사용방법을 예제와 함께 학습해 보겠습니다. 이번 강의를 통해 여러분은 WAP 2.0을 위한 XHTML에 대한 기본 지식을 습득하게 될 것입니다.
무선 Markup 언어 무선 Markup 언어의 발전 다양한 XML 기반 무선 Markup 언어 WML (WAP 1.0에 포함, SKT, LGT 및 전세계 대부분 사용) HDML (Openwave에서 개발, LGT 등 일부 이동통신사 적용) 다양한 HTML의 무선 Markup 언어 mHTML (마이크로소프트 ME, KTF 사용), cHTML (Compact HTML, 일본 NTT DoCoMo 사용) XHTML 기존 HTML의 범용성과 XML의 장점을 모두 갖춤 무선 Markup 언어의 발전 무선 마크업 언어는 오픈웨이브(Openwave) 사의 HDML, 일본의 아이모드( i-Mode) 의 cHTML 그리고 WAP의 WML 을 거쳐 XML과 HTML의 장점을 모두 포함하는 XHTML로 발전하고 있습니다. XHTML은 기본 유선 인터넷의 컨텐츠 문서 표현 방식인 HTML의 범용성과 XML의 문서 정의 스타일 등, XML의 장점을 모두 갖춘 새로운 무선 마크업 언어로, WAP 버전 2.0부터 사용 가능하게 되었습니다.
무선 Markup 언어 XHTML MP (Mobile Profile) 특징 HTML 4.0의 기능을 수용 + XML의 응용 HTML 4.0 Strict, Transitional, and Frameset DTD를 XML에 맞게 재구성 HTML기능을 갖는 마크업 언어 : HTML 4 -> XHTML 1.0 -> XHTML Basic -> XHTML MP (Mobile Profile) XHTML 특징 XHTML 문서는 XML의 규칙을 따름 : XHTL MP용 XML DTD를 따로 정의 XHTML 문서의 미디어 타입은 text/html로 사용 : 기존 HTML 브라우저에서 사용 가능 XHTML 문서의 사용자 Interface는 CSS (스타일 시트) 사용 HTML과 XHTML의 차이 XHTML은 대문자와 소문자를 구분 HTML은 구분 안함 XHTML 태그는 모두 소문자 사용 XHTML은 그 사용에 있어서 Syntax-Sensitive : HTML에 비해 문법 사용을 정확하게 해야 함 XMHTML은 시작 태그, 끝 태그가 항상 쌍으로 존재해야 하며, 빈 태그는 ‘/’를 사용 (예: <p>~</p>. <hr />) XHTML의 모든 속성 값은 인용기호(“ ”)와 함께 사용 (예. <a link href=“abc.xml”>) XHTML MP는 인터넷 표준 단체인 W3C와 WAP 표준 단체인 OMA가 함께 작성한 WAP 2.0 컨텐츠 제작 언어로, MP는 모바일 프로파일의 약자입니다. XHTML은 유선 인터넷 컨텐츠 제작 언어인 HTML과 거의 동일한 문법을 가지고 있어, 기존 유선 인터넷 개발자들이 쉽게 작성할수 있는 범용성을 가지고 있습니다. XHTML과 HTML의 차이점은 먼저, XHTML은 대소문자를 구분하고, XHTML에 사용하는 태그는 모두 소문자로 표시해야 하며, HTML이 태그 사용에서 문법 오류에 대해 유연하게 대처하는 면에 비해 XHTML 은 정확한 문법 사용이 요구됩니다. 예를 들어, XHTML에서는 시작 태그 뒤에는 종료 태그를 꼭 삽입해야 하며, 시작 및 종료 태그를 하나로 사용할 경우 태그 뒤에 슬래쉬(“/”)를 붙여 사용합니다. 그리고, XHTML에서 태그의 속성 값은 항상 더블쿠오트를 사용해야 합니다.
XHTML MP 구성 XHTML MP (Mobile Profile) 구성 XHTML MP DTD 모든 XML 문서는 그 DTD를 가진다 WAP 1.0의 WML 서문 (Prolog) 의 사용과 유사 <?xml version="1.0" charset="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> XHTML MP 기본 골격 HTML의 골격과 유사 head와 body로 구성 <html> <head> ... </head> <body> </body> </html> XHTML MP의 구성은 XHTML MP 선언 부와 XHTML 내용으로 구분할 수 있습니다. XHTML MP의 선언부에는 XML 선언 및 XHTML MP DTD 링크를 명시합니다. XHTML의 기본 골격으로 XHTML은 해드와 바디로 구성됩니다. XHTML은 스타일 시트를 포함할 수 있으며, 스타일 시트는 일반적으로 XHTML의 해드 태그 안에 선언합니다. XHTML MP CSS (Cascading Style Sheet) XHTML로 구성하는 문서의 스타일 정의 (HTML의 CSS와 유사) <head> <link href="mystyle.css" type="text/css" rel="stylesheet"/> ... </head>
XHTML MP 개발 Tool XHTML MP (Mobile Profile) Simulator XHTML 문서는 “.html”로 저장 XHTML 문서는 기본적으로 모든 유선 인터넷 브라우저에서 실행 가능 XHTML용 전용 테스트 브라우저 이용 가능 예: Openwave Mobile SDK 브라우저 : http://developer.openwave.com 에서 WAP 2.0 XHTML 및 WAP Simulator 브라우저 다운로드 XHTML 참조 사이트 표준 XHTML 문서 Specification http://www.w3.org/TR/xhtml1/ XHTML MP 개발 및 Simulator 참조 http://developer.openwave.com/ WAP 2.0 XHTML MP Specification http://www.wapforum.org XHTML 문서 Validation 검사 (W3C validator) http://validator.w3.org XHTML 개발은 일반 메모장 등 택스트 에디터를 사용해 개발할 수 있으며, 작성한 XHTML 문서는 “.html”로 저장합니다. 따라서, 작성한 XHTML 문서는 일반 인터넷 브라우저를 이용하여 볼 수 있으며, XHTML 전용 브라우저를 다운로드 받아 사용할 수 있습니다. XHTML 전용 브라우저는 노키아, 에릭슨 등, XHTML 브라우저 개발 회사의 홈페이지에서 다운로드 받을 수 있으며, 이번 강의에서는 그림과 같이 오픈 웨이브 사의 XHTML 시뮬레이터를 이용할 것입니다. 이번 장에서는 WAP 2.0의 XHTML MP 사용을 위한 기본적인 사항만을 다룰 것이며, 좀 더 자세한 사항은 각종 XHTML 사이트를 참조하시기 바랍니다.
XHTML MP Basic XHTML MP (Mobile Profile) 기본 골격 XHTML MP 문서 작성 기본 XHTML DTD 선언, XML 지원 언어 선언 <html> 태그 선언 시, 공식 XHTML Namespace (xmlns=“http://www.w3.org/1999/xhtml”) 지정 XHTML의 모든 태그는 소문자로 표현 XTHML 문서는 <html>로 시작 <head>와 <body>로 구성 <head>에는 문서 타이틀과 스타일 시트 선언 <body>는 XHTML 문서 컨텐츠 구성 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title> Welcome to my page </title> </head> <body> <h1> Welcome to XHTML! </h1> </body> </html> XHTML MP의 기본 문서 골격은 해드와 바디로 구성됩니다. 이때, XHTML 문서의 html 태그 선언 시, xml 네임 스페이스를 지정해 주어야 합니다.
XHTML MP - Basic XHTML MP (Mobile Profile) head head 요소 문서에 관련된 정보를 표현 예) 제목, 관련 자료, 저자, 핵심 단어, … <head> 내에 문서 타이틀 ( <title> ), XHML 문서의 CSS 스타일 ( <link> ), XHML 문서의 메타 요소 ( <meta> 예: refresh, expire 등 ) 정의 body 요소 실제 문서 내용 표시 <body> 내 사용 태그는 HTML과 유사 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title> Head Element </title> <link rel="stylesheet" href="style.css" type="text/css"/> </head> <body> <h1> Welcome to XHTML! </h1> </body> </html> XHTML 해드 태그에는 문서 관련 정보를 명시하고, 바디 태그에는 실제 XHTML 컨텐츠에 표현할 내용을 넣습니다. 앞서 설명한 바와 같이, XHML MP는 HTML과 유사한 문법을 가지며, 따라서, XHTML의 바디 태그 내 구현 사항은 HTML과 거의 유사합니다.
XHTML MP - 메뉴 XHTML MP (Mobile Profile) 컨텐츠 메뉴 표현 XHTML 메뉴 표시 일반 Hyperlink, Image 삽입 링크 사용 가능 <ol>, <li> 태그 등, Text Format 태그 이용하여 숫자 메뉴 표시 숫자 메뉴 표시 예제 : <ol>과 <li> 태그 사용 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title> Head Element </title> <link rel="stylesheet" href="style.css" type="text/css"/> </head> <body> <p> Number Menu: <ol> <li> <a href="contact.jsp?id=32" accesskey="1"> Albert </a> </li> <li> <a href="contact.jsp?id=45" accesskey="2"> choi </a> </li> <li> <a href="contact.jsp?id=21" accesskey="3"> June </a> </li> <li> <a href="contact.jsp?id=17" accesskey="4"> Mary </a> </li> </ol> </p> </body> </html> XHTML의 컨텐츠 메뉴 표현 방법은 일반적으로 예제와 같이 <ol> 등의 태그를 이용하여 구현 합니다. <실습 예이므로, 나레이션 불필요>
XHTML MP - Text Format XHTML MP (Mobile Profile) 컨텐츠 Text Format XHTML Text Format 종류 일반 HTML의 Text 표시 방법과 동일 단락 표시 (<p>, <br> 등), 해더 표시 (<h1>, <h2>, <h6> 등) 문자 강조 표시 (<u>, <I>, <b> 등), 리스트 (<ul>, <ol> 등) 제목 <h1>큰제목</h1> <h2>소제목</h2> 순서 목록 (ordered list) <ol> <li>첫째</li> <li>둘째</li> </ol> 일반 목록 (unordered list) <ul> <li>이것</li> <li>저것</li> </ul> Text Format 예제 : XHTML의 택스트 포맷 종류는 일반 유선 인터넷의 HTML과 유사하며, 단락 표시, 해더 표시, 문자 강조 표시 및 리스트 기능 을 지원합니다. <실습 예이므로, 나레이션 불필요> <p> Plain text <br/> <em> Lots of emphasis </em> <br/> <i> Some italics </i> <br/> <b> This should be bold </b> <br/> <strong> This one bold too </strong> <br/> <b> <i> Bold and italic </i> </b> <br/> <q> Just a quote </q> <br/> <kbd> mono-spaced </kbd> </p>
XHTML MP - Table XHTML MP (Mobile Profile) Table 표시 XHTML Text Format - Table 일반 HTML의 Table 표시 방법과 동일 표 만들기 tr (table row), th (table header), td (table data) 테이블 표시 예제 : <table border="2"> <tr> <td style="background-color:red;color:white“ colspan="2"> Colspan 2 </td> <td> Table </td> </tr> <td> With </td> <td> Background </td> <td rowspan="2"; style="background-color:blue;color:white" align="center"> Row <br/> Span </td> <td> in first </td> <td style="background-image:url(soccer.png);color:blue" align="center"> </td> </table> XHTML은 Table 태그를 지원합니다. <실습 예이므로, 나레이션 불필요>
XHTML MP - CSS XHTML MP (Mobile Profile) 컨텐츠 Format을 위한 CSS 사용 <head> 태그 내, CSS 정의 파일 명시 CSS 내 내용 Example CSS 사용 예제 : <head> <title> Head Element </title> <link rel="stylesheet" href="style.css" type="text/css"/> </head> BODY {color: #006699; font-family: Arial, sans-serif; background-color: #FFFFFF} TD {font-family: Arial, sans-serif} .bluetext { color: #006699; } .blue { color: #000000; background-color: #99CCFF;} File 명: style.css XHTML MP는 CSS 컨텐츠 문서 스타일 시트의 사용을 지원합니다. 일반적으로 CSS의 사용은 CSS 스타일 정의를 해드 태그 내에서 정의하고, CSS 스타일 시트 정의 내용을 따로 작성하여 .css로 저장하여 사용합니다. <실습 예이므로, 나레이션 불필요> <table> <tr class="blue"> <td> 1 <a accesskey="1" href="1.html"> Menu #1 </a> </td> </tr> <tr> <td> 2 <a accesskey="2" class="bluetext" href="2.html"> Menu #2 </a> </table>
XHTML MP – Link & Image XHTML MP (Mobile Profile) 그림 및 링크 표현 XHTML 링크 <a href=“link_url”> 사용 XHTML 이미지 유선 HTML 이미지 삽입 방법과 동일 <img src=“image_source_url”> 사용 XHTML 이미지 & 링크 예제 이미지 파일 명 plusm.jpg 확인 버튼 클릭 시, top5.html 사이트로 이동 XHTML에서의 링크 및 이미지의 사용은 기본적으로 HTML과 동일합니다. <실습 예이므로, 나레이션 불필요> <a accesskey="2" class="bluetext" href="top5.html"> <img alt="mug shot" src="plusm.jpg"/> </a>
XHTML MP – User Input XHTML MP (Mobile Profile) 사용자 Input 처리 XHTML 사용자 Input 처리 태그 <form> 태그 : 사용자 Input을 지정한 사이트로 전송 <select> 태그 : 다수개의 Selection List 제공, 사용자는 List 중 하나 Item 선택 가능 <input> 태그 : 사용자 Input 직접 입력 (type=“text”), Radio Box (type=“radio”) 및 Check Box (type=“checkbox”) 의 Item 중 선택 입력 사용자 Input 처리 예제 : <form action="/servlets/processform" method="get"> <p> <select name="category"> <option value="blended" selected="selected">Product:</option> <option value="books">Books</option> <option value="music">Music</option> <option value="dvd">DVD</option> </select> <br/> Keyword: <br/> <input type="text" name="key" value="" format=""/> <br/> Do you accept? <br/> <input type="checkbox" name="accept" checked="checked" /> <br/> </p> <input type="submit" value="Submit"/> </form> XHTML은 HTML과 같이 셀랙트 태그, 인풋 태그를 이용한 다양한 사용자 Input 처리 기능을 지원하며 폼 태그를 사용하여 사용자 인풋 데이터를 입력 받습니다.
요약 정리 이번 시간에 소개했던 내용을 정리해 봅시다. 무선 Markup 언어와 XHTML Mobile Profile 에 대해 알아보았습니다. WAP 2.0 XHTML MP의 구성과 개발 Tool 을 알아보고 개발 참조 Site를 소개하였습니다. WAP 2.0 XHTML MP에 사용되는 다양한 태그를 설명하고 각각의 예제를 소개하였습니다. 다음 시간에는 국내 이통사별 컨텐츠 제작 가이드에 대하여 학습하시게 될 것입니다.
평가 하기 문제1 XHTML MP에 대해 말해 보시오 정답은 다음과 같습니다. XHTML Mobile Profile은 WAP 2.0 컨텐츠 제작 언어로, HTML의 범용성과 XML의 유연성을 모두 가지는 차세대 모바일 Markup 언어입니다. 해설내용: XHTML MP는 인터넷 표준 단체인 W3C와 WAP 표준 단체인 OMA가 함께 작성한 WAP 2.0 컨텐츠 제작 언어로, MP는 모바일 프로파일의 약자입니다. XHTML과 HTML의 차이점은 먼저, XHTML은 대소문자를 구분하고,XHTML에 사용하는 태그는 모두 소문자로 표시해야 하며, HTML이 태그 사용에서 문법 오류에 대해 유연하게 대처하는 면에 비해 XHTML 은 정확한 문법 사용이 요구됩니다.
평가 하기 문제2 XHTML MP의 문서 구성에 대해 말해보시오 정답은 다음과 같습니다. XHTML MP는 XML DTD 선언부와 <html>로 시작하는 문서 내용으로 구성 해설내용: XHTML은 XML DTD 선언부에 XHTML DTD와 XML 지원 언어를 선언하고, <html> 태그 선언 시, 공식 XHTML Namespace인 (xmlns=“http://www.w3.org/1999/xhtml”)을 지정합니다. XTHML 문서는 <html>로 시작하고, <head>와 <body>로 구성되며, <head>에는 문서 타이틀과 스타일 시트를 선언하고, <body>에는 XHTML 문서 컨텐츠를 구성합니다.