[WML 기초강좌] 17. 이미지의 삽입과 여려가지 옵션들

* 이미지 삽입



<열일곱번째 예제>



<?xml version="1.0" encoding="ks_c_5601-1987"?>

<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN" "http://www.phone.com/dtd/wml11.dtd">

<wml>

<card>

<p>

<img alt="어솨요" src="top.wbmp" />

<select>

<option><img alt="열쇠" src="" localsrc="key" />일번</option>

<option><img alt="꽃" src="rose.wbmp" />이번</option>

</select>

</p>

<do type="options">

<go href="home.wml" />

<img alt="home" src="" localsrc="house" />

</do>

</card>

</wml>



이번장은 이미지입니다. wml에서는 wbmp라는 이미지형식을 사용합니다.

흑백으로 된 이미지로 용량이 매우 작습니다.

기존의 bmp같은 그림파일을 wbmp로 변환시켜주는 유틸이 있는데..Download란에 올려놓겠습니다.



우리는 예제를 하나하나 뜯어 살펴봅시다.



우선 이미지는 <img> 태그를 사용하여 표현을 합니다.

위 예제에서 가장 먼저 나온 <img alt="어솨요" src="top.wbmp" /> 이부분이

가장 기본적인 img태그의 사용법입니다.



alt 속성은 src로 지정한 그림파일을 찾을수 없을경우 그림파일대신

나타나는 문장을 지정하는 속성입니다. 저의 top.wbmp는 실행화면의 사람얼굴 그림인데요..

저 top.wbmp라는 파일이 없다면 사람얼굴 그림대신 어솨요라는 문구가 출력이 되겠지요.



src속성은 말그래도 이미지의 소스 파일입니다.

여러분이 표현할 이미지 파일을 지정해 주시면 되겠지요?



자 다음에선 option내에서 이미지를 구현하였습니다.

이번에는 <img alt="열쇠" src="" localsrc="key" /> 이런 표현이 나왔군요.

그림 파일 소스가 공백이군요.. 대신 localsrc 라는 것이 나왔습니다. localsrc가 무엇이냐!



음..보통 휴대폰 서비스 업자들은요 휴대폰안에 몇몇개 혹은 몇십, 몇백개의 기본적인

그림파일을 미리 저장해 놓습니다. 이러한 그림파일들을 이용하는 명령이 localsrc입니다.

이런것을 이용하려면 미리 저장된 이미지를 사용하려는 브라우져나 핸드폰에서

어떠한 값으로 어떠한 아이콘을 지원하는 지를 다 알고 있어야 이용이 가능하겠죠.

우선은 localsrc라는 속성으로 이렇게 저장된 이미지를 이용한다는 것을 알아두세요..



자, 우리는 현재 up.browser로 wml을 돌려보고 있습니다.

이 브라우져에는 약 150개 정도되는 아이콘이 기본적으로 저장되어 있는데요..

그중 key라는 값을 가진 아이콘이 바로 저 열쇠모양의 아이콘입니다. 이젠 이해되시죠?

(150개가 무엇무엇인지 적혀있는 구성표는 나중에 입수하면 바로 등록하겠습니다..^^)



그 다음에는 <img alt="꽃" src="rose.wbmp" /> 이런표현이 나왔습니다.

하지만 실행화면을 보면 나타난 이미지가 없습니다..

예 그렇습니다.. rose.wbmp라는 파일이 없으므로 아무 이미지가 뜨지 않았습니다.



그럼 공부 잘 하신분들은 의문점이 하나 생기겠지요?

alt로 꽃이란 값을 주었으니까 이미지가 없으면 꽃이란 글씨가 나와야 하지않느냐!..

하고 의문점이 생기시겠죠? 이렇게 의문이 생겨야 공부 잘하신겁니다..짝짝...ㅡ_ㅡ;;



음..맞는 말인데요..지금 제가 돌리고 있는 up.browser의 버젼은 4.0입니다.

그런데 이 버젼은 alt기능을 이렇게 지원하지 않더라구요..

그냥 이미지에 달린 이름표 정도로만 구현합니다..

하지만 '대부분'의 브라우져 또는 핸드폰에서는 rose.wbmp라는 파일이 없으므로

꽃이라는 텍스트가 화면이 표시될 것입니다.

이렇게 가끔 브라우져 버젼따라 조금씩 다를수 있습니다.. 잘 유념해두세요..^^



마지막 <do>와 <go> 조합으로 option버튼에 링크를 거는것..강좌 초반부에 했었는데요..

이 부분에도 위 예제와 같이 그림파일 삽입이 가능합니다~!

잘 이용하면 나름대로 이쁘장한 폰페이지 구축이 가능하겠지요? ^^



자. 이것으로 해서 WML의 기본적인 태그에 대한 공부는 어느정도 끝났습니다. 수고하셨습니다.^^

지금까지 열심히 공부하셨다면 기본적인 페이지를 꾸미는데는 자신감이 생기셨을 겁니다.^^



다음 강좌에서는 조금 더 발전된 활용법으로

서버페이지 언어인 ASP와 DB(SQL)과의 연동 소스를 살펴보겠습니다.

그럼 다음 강좌 때까지 모두=_= 안녕~ ^^/