5부 mHTML/KUN언어 배우기 5-1 mHTML과 KUN에 대해서 5-2 mHTML 기본태그 5-3 그림과 링크 , 목록관련태그 5-4 표로 꾸며보는 폰페이지 5-5 mHTML용 입력양식 5-6 폰페이지 예쁘게 구성하는 비결 무선 인터넷 프로그래밍
5-1. mHTML과 KUN에 대해서 무선 인터넷 프로그래밍
mHTML과 KUN이란 mHTML(mobile-HTML) 마이크로소프트에서 ME(Mobile Exploror) 브라우저를 출시하면서 내놓은 모바일용 HTML입니다. HTML을 기반으로 하고 있으며 기본적인 HTML 태그를 그대로 사용하므로 작업하기 편리하지만 스크립트를 지원하지 않는 등 제약 또한 많이 가지고 있습니다. 우리나라에서는 016, 018의 KTF에서 지원합니다. mHTML은 확장자가 html로 유선 홈페이지의 문서와 같으므로 서로 호환이 가능합니다. mHTML 문서를 열기 위해서는 ME(Mobile Exploror) 브라우저를 사용합니다. 휴대폰의 기능이 좋아짐에 따라 보다 다양한 표현이 요구가 됨에 따라 개발된 브라우저가 KUN(KTF Unified Navigator)입니다. KUN은 KTF에서 내놓은 웹브라우저 이름으로 기존의 ME 브라우저보다 다양한 HTML 언어를 인식하여 폭넓게 문서를 꾸밀 수 있습니다. KUN은 유선 인터넷 컨텐츠도 접속해서 내용을 볼 수 있도록 제작된 브라우저답게 넒은 액정 화면을 대폭 이용하여 화려한 페이지를 열 수 있습니다. 무선 인터넷 프로그래밍
mHTML과 KUN이란 -ME 브라우저용 문서 -KUN 브라우저용 문서 무선 인터넷 프로그래밍
mHTML은 HTML과 동일한 구조를 가지고 있습니다. <html> 태그를 사용해서 HTML임을 선언하고 <head> 태그에는 문서에 대한 정보에 관련된 내용을 입력하고 <body> 태그에는 화면에 출력할 내용을 입력합니다. KUN 역시 mHTML 형식을 고스란히 따르고 있습니다. 단지 mHTML보다 더 많은 HTML 태그들을 지원합니다. 예를 들어 mHTML은 표에 다양한 속성들을 지원하지 않으므로 표를 이용해서 문서를 꾸밀 수 없지만 KUN은 표에 다양한 속성을 지원하므로 표를 이용해서 문서를 꾸밀 수 있습니다. mHTML과 KUN의 가장 큰 특징은 KUN에서는 문서를 구성하는 레이아웃에 표를 이용한다는 점이라고 말할 수 있습니다. 무선 인터넷 프로그래밍
mHTML 언어 살펴보기 <html> <head> </head> <body> <html> <head> </head> <body> <!-- 주석 --> 내용 </body> </html> mHTML 기본 구조 무선 인터넷 프로그래밍
mHTML 언어 살펴보기 표를 이용하는 KUN 기본 구조 <html> <head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td height="1" bgcolor="#FF00FF"></td></tr> <tr><td height="19" align="center" bgcolor="#FF9900"><font color="black"><b>타이틀</b></font></td></tr> <tr><td height="1" bgcolor="#FF00FF"></td></tr> </table> 본문내용<br> </body> </html> 표를 이용하는 KUN 기본 구조 무선 인터넷 프로그래밍
mHTML 문서 열기 ● ME 브라우저로 문서 열기 저장한 후 [KTF_ME] 시뮬레이터롤 문서를 열어 볼 수 있습니다. 1.메모장을 실행한 다음 mHTML 소스를 입력합니다. 무선 인터넷 프로그래밍
mHTML 문서 열기 2.[파일>저장] 메뉴를 클릭해서 문서를 저장합니다. 이때 파일 형식은 [모든 파일]을 선택하고 [파일 이름] 항목에는 '파일이름.html' 식으로 입력합니다. 무선 인터넷 프로그래밍
mHTML 문서 열기 3.[KTF_ME] 시뮬레이터 프로그램을 실행한 다음 [File>Open] 메뉴를 누릅니다. 무선 인터넷 프로그래밍
mHTML 문서 열기 4.[열기] 대화상자가 나타나면 문서를 저장한 폴더와 파일을 선택한 다음 [열기] 단추를 클릭합니다. 무선 인터넷 프로그래밍
mHTML 문서 열기 5.결과 화면이 출력됩니다. 무선 인터넷 프로그래밍
mHTML 문서 열기 ● KUN 브라우저로 문서 열기 모바일용 계정에 올린 후 문서를 확인해야 합니다. 1.엠누리에 만든 자신의 계정에 작업한 문서를 전송합니다. 무선 인터넷 프로그래밍
mHTML 문서 열기 2.[KUN] 시뮬레이터를 실행한 다음 [URL] 목록을 선택합니다. 무선 인터넷 프로그래밍
mHTML 문서 열기 3.[URL 입력] 페이지가 나오면 문서를 올린 주소를 입력하고 [이동] 단추를 선택합니다. 무선 인터넷 프로그래밍
mHTML 문서 열기 4.작업한 내용이 열립니다. 무선 인터넷 프로그래밍
mHTML 문서 열기 HTML은 인터넷 익스플로러에서도 지원하므로 주소 입력줄에 주소를 입 력해서 내용을 확인할 수 도 있습니다. 무선 인터넷 프로그래밍
애니빌더를 이용해서 문서 편집하기 ● 애니빌더로 mhtml 문서 편집하기 애니빌더에서 문서를 편집하려면 목록에 [Text] 도구를 하나 추가해서 문서를 생성한 후 소스보기로 문서를 열어서 작업합니다. 1.애니빌더 프로그램을 실행한 다음 [Text] 목록을 하나 추가하고 [소스보기] 단추를 클릭하면 나타나는 목록에서 [mhtml]을 선택합니다. 무선 인터넷 프로그래밍
애니빌더를 이용해서 문서 편집하기 2.소스창에 WML 기본태그가 입력되어 있습니다. 적당하게 내용을 편집한 다음 [파일 저 장] 단추를 클릭해서 작업한 문서를 저장합니다. 무선 인터넷 프로그래밍
애니빌더를 이용해서 문서 편집하기 3.[다른 이름으로 저장] 대화상자가 나타나면 [파일 형식]에 ‘html'로 설정되어 있는지 확인하고 파일이름을 입력하고 [저장] 단추를 클릭해서 문서를 저장합니다. 4.WML 시뮬레이터 프로그램을 이용해서 작업한 문서를 불러 옵니다. 무선 인터넷 프로그래밍
애니빌더를 이용해서 문서 편집하기 ● 애니빌더로 KUN 문서 만들기 1.애니빌더 프로그램을 실행한 다음 [Text] 목록을 하나 추가하고 [소스보기] 단추를 클릭하면 나타나는 목록에서 [kun]을 선택합니다. 무선 인터넷 프로그래밍
애니빌더를 이용해서 문서 편집하기 2.<table> 태그 안에 '<b>'와 '</b>' 태그 사이에 문서 제목을 입력하고 </table> 태그 밖에 내용을 입력한 후 [저장] 단추를 눌러 문서를 저장합니다. 무선 인터넷 프로그래밍
애니빌더를 이용해서 문서 편집하기 3.[다른 이름으로 저장] 대화상자가 나타나면 [파일 형식]에 ‘html'로 설정되어 있는지 확인하고 파일이름을 입력하고 [저장] 단추를 클릭해서 문서를 저장합니다. 무선 인터넷 프로그래밍
애니빌더를 이용해서 문서 편집하기 4.엠누리에 만든 자신의 계정에 작업한 문서를 전송한 다음 KUN 시뮬레이터로 작업한 내용을 확인합니다. 무선 인터넷 프로그래밍
5-2. mHTML 기본태그 무선 인터넷 프로그래밍
문단 태그 <p> / <div> 문단을 정의해주는 태그들 입니다. align 속성을 사용해서 문단을 정렬합 니다. <div> 태그는 KUN 브라우저에서 동작합니다. <p align=" ">내용</p><div align=" ">내용</ div> align : 정렬을 설정합니다. left, center, right 무선 인터넷 프로그래밍
문단 태그 <p> / <div> [예제 5-2-1]글자 입력 글을 입력하고 <p>와 <div> 태그를 사용해서 문단을 정의하고 align 속성을 이 용해서 정렬을 해보도록 하겠습니다. <html> <head></head> <body><p align="center">애니빌더</p> <div align="right"> 애니빌더는 각종 모바일 언어로 무선 인터넷 폰페이지를 제작해주는 도구입니다.</div> </body> </html> 무선 인터넷 프로그래밍
문단 태그 <p> / <div> ME브라우저 KUN브라우저 무선 인터넷 프로그래밍
글자 속성 관련 태그 글자를 꾸며주는 속성 태그입니다. ME 브라우저에서는 동작하지 않으며 KUN 브라우저에서는 지원하지만 브라우저에 탑재되어 있는 글꼴에 따라 적용되지 않을 수 있습니다. [예제 5-2-2]글자 속성 글자 속성을 설정해주는 태그를 이용해서 문서에 입력한 글자를 꾸미는 예제입니다. <html> <head> </head> <body> <center> 태 권 도 </center> <p><b>태권도</b>는 무술로서 만이 아닌 무예로서의<br> <cite>철학적 정신세계</cite>가 내재된 <strong>우리 겨레의 고유한 전통적 산물</strong><br> 이라 할 수 있다. 지구상에는 각기 다른 많은 민족들이<br> 생존경쟁의 역사 속에서 발전을 거듭해 왔으며 그 중 <br> 우리 민족은 5,000년이라는 유구한 역사와 전통성을<br> 유지해 오면서 <blockquote>민족의 정신을 계승 발전<blockquote>시켜 왔다. </p> </body> </html> 무선 인터넷 프로그래밍
글자 속성 관련 태그 Me브라우저 KUN브라우저 무선 인터넷 프로그래밍
글자 크기 태그 <h1>~<h6> 는 작아 집니다. KUN 브라우저에서 동작하나 브라우저에 탑재된 폰트의 크기에 따라 지원 여부가 결정됩니다. <hn>문장</hn> n: 1~6 무선 인터넷 프로그래밍
글자 크기 태그 <h1>~<h6> [예제 5-2-3]글자 크기 <hn> 속성을 이용해서 글자 크기를 설정합니다. 이 기능은 휴대폰에 따라 지원되기도 하고 지원하지 않기 도 합니다. <html> <head> </head> <body> <h1>애니빌더</h1><br> <h3>애니빌더 폰피에 오신 것을 환영합니다.</h3> </body> </html> 무선 인터넷 프로그래밍
문서 속성 태그 <body> 문단을 지정하고 문서 색 및 글자, 링크가 설정되어 있는 글자의 색을 설정합니다. 색상은 16 가지의 색 이름을 입력해서 설정이 가능하며 컬러 액정일 경우와 4가지 색 액정일 경우와 색이 다릅니다. 색상 설정 은 KUN 브라우저에서 지원합니다. <body bgcolor=" " text=" " link=" " alink=" " blink=" " btn=“ ” btn2=“ ” href=" " href2=" "> 본문 </body> bgcolor : 문서 배경에 색을 지정합니다. text : 문서에 입력한 글자의 색을 지정합니다. link : 하이퍼링크가 설정되어 있는 글자에 색을 지정합니다. alink : 하이퍼링크를 실행한 글자의 색을 설정합니다. blink : 하이퍼링크가 설정되어 있는 곳에 색을 설정합니다. btn : 하단 메뉴의 왼쪽 이름을 설정합니다. btn2 : 하단 메뉴의 오른쪽 이름을 설정합니다. href : 왼쪽 하단 메뉴를 실행할 경우 경로를 설정합니다. href2 : 오른쪽 하단 메뉴를 실행할 경우 경로를 설정합니다. 무선 인터넷 프로그래밍
문서 속성 태그 <body> ▼색 입력값 16 컬러나 4 가지 색 컬러는 다음의 색을 지원합니다. 색에 해당되는 이 름을 적어주면 색을 표현해줍니다. 256 컬러 이상은 HTML 코드값을 사용합니다. 컬러액정 휴대폰은 256 컬러 이상의 색을 지원하며 KUN에서도 트루컬러의 색을 모두 지원합니 다. HTML 코드값은 포토삽 등의 그래픽 프로그램에서 HTML코드값을 알 수 있습니다. HTML코드값은 # 기호와 함께 숫자와 알파벳으로 구성 된 6자리 기호로 구성되어 있습니다. 무선 인터넷 프로그래밍
문서 속성 태그 <body> [예제 5-2-4]문서에 색 설정하기 색 기호와 HTML 코드값을 이용해서 문서 배경과 글자 등에 색을 넣은 예제입니다. <body bgcolor="#FF0000" text="white" link="blue" alink="navy" btn=“메인” btn2=“상위” href="a.htm" href2="b.htm"> <center><b>아마존 정글</b></center> 아마존 정글은 지구 전체 삼림의 30%를 차지하며, 이곳의 총 넓이는 남북한을 합친 우리나라 전체면적의 30배를 능가한다. <br><br> <a href="c.htm">관련자료</a> </body> 무선 인터넷 프로그래밍
배경 이미지 넣어주는 background 속성 <body> 태그에 background 속성을 사용해서 문서에 배경 그림을 넣어 줍니다. 이외에 여러 가지 속성을 사용해서 배경을 화면 가운데에 배치하거나 문서를 스크롤해도 고정시키는 등의 작업을 할 수 있습니다. 배경 그림은 다운로딩시 패킷이 부과되는 요인으로 작용하므로 특별한 이유가 없을 경우 사용을 권장하지 않습니다. 이 기능은 KUN 브라우저에서만 동작합니다. <body background=" " halign=" " valign=" " repeat=" " fixed=" " repeat_x=" " repeat_y=" "> background : 백그라운드 이미지의 URL 지정 halign : 배경 그림의 가로 정렬을 설정합니다. left, center, right valign : 배경 그림의 세로 정렬을 설정합니다. top, middle, bottom repeat : 배경 그림을 반복해서 붙여 넣을지를 설정합니다. fixed : 화면을 스크롤할 때 배경 그림도 함께 스크롤하게 할지를 설정합니다. yes, no repeat_x : 배경 그림을 가로 방향의 반복 회수 지정 repeat_y : 배경 그림을 세로 방향의 반복 회수 지정 무선 인터넷 프로그래밍
배경 이미지 넣어주는 background 속성 [예제 5-2-5]문서 배경 가운데에 그림 넣기 <body> 태그에 background 속성을 사용해서 배경 그림을 문서 가운데에 배치하게 만든 예제입니다. 문서를 스크롤해도 항상 그림이 문서 가운데에 위치합니다. <body background="bg.jpg" halign="center" valign="middle" repeat="no"> 내용 </body> 무선 인터넷 프로그래밍
<font size=“ ” color=“ ”>문장</font> 글자의 속성을 설정합니다. 태그 안에 size와 color 속성을 사용해서 색과 크기 값을 설정합니다. <font> 태그에 설정한 내용이 <body> 태그에서 설정한 속성보다 우선적으로 설정됩니다. <font> 태그는 KUN 브라우저에서 지원하며 글자 크기는 브라우저에 탑재되어 있는 글꼴에 따라 지원 여부가 결정됩니다. <font size=“ ” color=“ ”>문장</font> 무선 인터넷 프로그래밍
글자 속성 태그 <font> [예제 5-2-6]글자 색과 크기 설정 <font> 태그를 사용해서 글자 색과 크기를 설정하는 예제입니다. <font>로 설정한 내용은 <body> 태그에 설정한 속성보다 우선합니다. 역시 글자 크기는 휴대폰의 탑재되어 있는 글꼴에 따라 지원하기도 하고 지원안하기도 합니다. <body bgcolor="red" text="white"> <center><b>메소포타미아</b></center> <font size="10" color="yellow">메소포타미아 문명이란 비옥한 반월지대의 대부분을 차지하는 티그리스강, 유프라테스강 유역을 중심으로 번영한 고대문명을 말한다.</font> <br><br> </body> 무선 인터넷 프로그래밍