5 부 mhtml/kun 언어 배우기

무선 인터넷 프로그래밍

5 부 mHTML/KUN 언어 배우기5 부 mHTML/KUN 언어 배우기

5-1 mHTML 과 KUN 에 대해서

5-2 mHTML 기본태그

5-3 그림과 링크 , 목록관련태그

5-4 표로 꾸며보는 폰페이지

5-5 mHTML 용 입력양식

5-6 폰페이지 예쁘게 구성하는 비결


5-1. mHTML 과 KUN 에 대해서5-1. mHTML 과 KUN 에 대해서

3 무선 인터넷 프로그래밍

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 이란mHTML 과 KUN 이란

-ME 브라우저용 문서 -KUN 브라우저용 문서


mHTML 언어 살펴보기 mHTML 언어 살펴보기

mHTML 은 HTML 과 동일한 구조를 가지고 있습니다 .

<html> 태그를 사용해서 HTML 임을 선언하고 <head> 태그에는 문서에 대한 정보에 관련된 내용을 입력하고 <body> 태그에는 화면에 출력할 내용을 입력합니다 .

KUN 역시 mHTML 형식을 고스란히 따르고 있습니다 . 단지 mHTML보다 더 많은 HTML 태그들을 지원합니다 . 예를 들어 mHTML 은 표에 다양한 속성들을 지원하지 않으므로 표를 이용해서 문서를 꾸밀 수 없지만 KUN 은 표에 다양한 속성을 지원하므로 표를 이용해서 문서를 꾸밀 수 있습니다 .

mHTML 과 KUN 의 가장 큰 특징은 KUN 에서는 문서를 구성하는 레이아웃에 표를 이용한다는 점이라고 말할 수 있습니다 .

mHTML 언어 살펴보기mHTML 언어 살펴보기 <html> <head>

</head> <body>  내용 </body></html>

mHTML 기본 구조


mHTML 언어 살펴보기mHTML 언어 살펴보기

<html> <head> </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><tr><td height="1" bgcolor="#FF00FF"></td></tr> </table> 본문내용 <br> </body></html>

표를 이용하는 KUN 기본 구조


mHTML 문서 열기 mHTML 문서 열기 ● ME 브라우저로 문서 열기 메모장과 같은 텍스트 편집 프로그램을 사용해서 소스를 편집하고 HTML 형식으로 문서를저장한 후 [KTF_ME] 시뮬레이터롤 문서를 열어 볼 수 있습니다 .

1. 메모장을 실행한 다음 mHTML 소스를 입력합니다 .


mHTML 문서 열기mHTML 문서 열기

2.[ 파일 > 저장 ] 메뉴를 클릭해서 문서를 저장합니다 . 이때 파일 형식은 [ 모든 파일 ] 을 선택하고 [ 파일 이름 ] 항목에는 ' 파일이름 .html' 식으로 입력합니다 .



3.[KTF_ME] 시뮬레이터 프로그램을 실행한 다음 [File>Open] 메뉴를 누릅니다 .



4.[ 열기 ] 대화상자가 나타나면 문서를 저장한 폴더와 파일을 선택한 다음 [ 열기 ] 단추를

클릭합니다 .



5. 결과 화면이 출력됩니다 .



● KUN 브라우저로 문서 열기[KUN] 시뮬레이터는 내 컴퓨터에 저장된 문서를 불러 올 수 없으므로 엠누리 등모바일용 계정에 올린 후 문서를 확인해야 합니다 .

1.엠누리에 만든 자신의 계정에 작업한 문서를 전송합니다 .



2.[KUN] 시뮬레이터를 실행한 다음 [URL] 목록을 선택합니다 .



3.[URL 입력 ] 페이지가 나오면 문서를 올린 주소를 입력하고 [ 이동 ] 단추를 선택합니다 .



4. 작업한 내용이 열립니다 .



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 기본태그5-2. mHTML 기본태그


문단 태그 <p> / <div> 문단 태그 <p> / <div>

문단을 정의해주는 태그들 입니다 . align 속성을 사용해서 문단을 정렬합

니다 . <div> 태그는 KUN 브라우저에서 동작합니다 .

<p align=" "> 내용 </p><div align=" "> 내용 </ div>

align : 정렬을 설정합니다 . left, center, right


문단 태그 <p> / <div>문단 태그 <p> / <div>

[ 예제 5-2-1]글자 입력 글을 입력하고 <p> 와 <div> 태그를 사용해서 문단을 정의하고 align 속성을 이

용해서 정렬을 해보도록 하겠습니다 .

<html><head></head><body><p align="center">애니빌더 </p><div align="right"> 애니빌더는 각종 모바일 언어로 무선 인터넷 폰페이지를 제작해주는 도구입니다 .</div>

</body></html>


문단 태그 <p> / <div>문단 태그 <p> / <div>

ME 브라우저 KUN 브라우저


글자 속성 관련 태그 글자 속성 관련 태그 글자를 꾸며주는 속성 태그입니다 . ME 브라우저에서는 동작하지 않으며 KUN 브라우저에서는

지원하지만 브라우저에 탑재되어 있는 글꼴에 따라 적용되지 않을 수 있습니다 .

[ 예제 5-2-2]글자 속성

글자 속성을 설정해주는 태그를 이용해서 문서에 입력한 글자를 꾸미는 예제입니다 .

<html> <head> </head> <body> <center> 태 권 도 </center> <p><b> 태권도 </b> 는 무술로서 만이 아닌 무예로서의 <br> <cite>철학적 정신세계 </cite> 가 내재된 <strong> 우리 겨레의 고유한 전통적 산물 </str

ong><br> 이라 할 수 있다 . 지구상에는 각기 다른 많은 민족들이 <br> 생존경쟁의 역사 속에서 발전을 거듭해 왔으며 그 중 <br> 우리 민족은 5,000년이라는 유구한 역사와 전통성을 <br> 유지해 오면서 <blockquote>민족의 정신을 계승 발전 <blockquote> 시켜 왔다 . </p> </body> </html>


글자 속성 관련 태그글자 속성 관련 태그

Me 브라우저 KUN 브라우저


글자 크기 태그 <h1>~<h6> 글자 크기 태그 <h1>~<h6>

글자의 크기를 h1 에서 h6까지 6 단계로 조절합니다 . 숫자가 클수록 글자

는 작아 집니다 . KUN 브라우저에서 동작하나 브라우저에 탑재된 폰트의

크기에 따라 지원 여부가 결정됩니다 .

<hn> 문장 </hn>

n: 1~6


글자 크기 태그 <h1>~<h6>글자 크기 태그 <h1>~<h6>[ 예제 5-2-3]글자 크기

<hn> 속성을 이용해서 글자 크기를 설정합니다 . 이 기능은 휴대폰에 따라 지원되기도 하고 지원하지 않기 도 합니다 .

<html> <head> </head> <body> <h1>애니빌더 </h1><br> <h3>애니빌더 폰피에 오신 것을 환영합니다 .</h3> </body> </html>


문서 속성 태그 <body> 문서 속성 태그 <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>문서 속성 태그 <body>

▼색 입력값 16 컬러나 4 가지 색 컬러는 다음의 색을 지원합니다 . 색에 해당되는

이름을 적어주면 색을 표현해줍니다 .

256 컬러 이상은 HTML 코드값을 사용합니다 . 컬러액정 휴대폰은 256컬러 이상의 색을 지원하며 KUN 에서도 트루컬러의 색을 모두 지원합니다 . HTML 코드값은 포토삽 등의 그래픽 프로그램에서 HTML코드값을알 수 있습니다 . HTML코드값은 # 기호와 함께 숫자와 알파벳으로 구성된 6 자리 기호로 구성되어 있습니다 .


문서 속성 태그 <body>문서 속성 태그 <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 속성 배경 이미지 넣어주는 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 속성배경 이미지 넣어주는 background 속성[ 예제 5-2-5] 문서 배경 가운데에 그림 넣기

<body> 태그에 background 속성을 사용해서 배경 그림을 문서 가운데에 배치하게 만든 예제입니다 . 문서를 스크롤해도 항상 그림이 문서 가운데에 위치합니다 .

<body background="bg.jpg" halign="center" valign="middle" repeat="no">

내용 </body>


글자 속성 태그 <font> 글자 속성 태그 <font>

글자의 속성을 설정합니다 . 태그 안에 size 와 color 속성을 사용해서 색과 크기 값을 설정합니다 . <font> 태그에 설정한 내용이 <body> 태그에서 설정한 속성보다 우선적으로 설정됩니다 . <font> 태그는 KUN 브라우저에서 지원하며 글자 크기는 브라우저에 탑재되어 있는 글꼴에 따라 지원 여부가 결정됩니다 .

<font size=“ ” color=“ ”> 문장 </font>


글자 속성 태그 <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>

5 부 mhtml/kun 언어 배우기

Documents