NATE CP 가이드 1. WML 페이지에서줄바꿈문제 WML 페이지에서줄바꿈은명시적으로 <br/> 태그를사용하여야한다. 그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 <br/> 태그가없어, 그림 1 과같이줄바꿈이되지않고한줄로보여짐. [ 그림 1] 비정상 [ 그림 2] 정상 <card id="main"> <p mode="nowrap"> Card styles <select> <option onpick="#f1">ordered False</option> <option onpick="#f2">ordered True</option> </select> <do type = "vnd.up"> <go href = "test1.wml" /> </do> </p> </card> 1
( 수정 ) <card id="main"> <p mode="nowrap"> Card styles <br/> <- 명시적인 br 추가필요 <select> <option onpick="#f1">ordered False</option> <option onpick="#f2">ordered True</option> </select> </p> </card> <do type = "vnd.up"> <go href = "test1.wml" /> </do> 2. WML 테스트페이지에서문자열이표시되지않고짤리는현상. WML p 태그의 Mode 는문자열길이가길경우문장을자르거나, 자르지않는것을결정한다. <p mode= wrap nowrap > 에따라문자열의길이가길경우 wrap mode 는문자열을아래로자르는것을, nowrap mode 는문자열을자르지않음 [ 그림 3] nowrap mode [ 그림 4] wrap mode <wml> <card id="main"> <p mode="nowrap"> Card Newcontext 가 TRUE 이면이동후히스토리및변수값이사라지므로이전으로이동불가 ( 메뉴히스토리와는별개임 ) <select> <option onpick="#f1">context is FALSE</option> 2
<option onpick="#f2">context is TRUE</option> </select> <do type = "vnd.up"> <go href = "test1.wml" /> </do> </p> </card>... 이하생략함. </wml> 3. WML 페이지에서 DTD 문법오류발생함. WML 페이지에서 DTD 문법오류발생 <u><strike>strike</strike></u> 를지원하지않아 DTD 오류발생함. DocType 이 XHTML Basic 이면 WML20 으로보기때문에 DocType 을다음과같이 XHTML MP 로바꾸면 DTD Error 는나지않음. <?xml version="1.0" encoding="ks_c_5601-1987"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.wapforum.org/dtd/xhtml-mobile11.dtd"> <u><strike>strike</strike></u> 의결과가 strike 와같이나오지않는것에대해서는 NGB3.0 에서도지원하지않았던부분인데, 오류가발생하지않도록처리하였으나 NGB4.0 에서는지원하지않는태그에대한오류발생되도록함. 따라서 strike> 태그는페이지에서삭제수정되어야함. [ 그림 5] NGB4.0(E5) [ 그림 6] NGB3.0(E4) <?xml version="1.0" encoding="ks_c_5601-1987"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/tr/xhtml-basic/xhtml-basic10.dtd"> <!-- SKTelecom NGB test page. by RoCode Inc.--> <html> 3
[ 설명 :u ]<br/>underline [ 시험 ]<br/> <br/> <u> <a href="./testpage.xhtml"> 링크 </a><br/> <abbr>abbr</abbr><br/> <acronym>acronym</acronym><br/> <b>b</b><br/> <big>big</big><br/> <cite>cite</cite><br/> <code>code</code><br/> <dfn>dfn</dfn><br/> <em>em</em><br/> <i>i</i><br/> <img src="./etc/nate.bmp"/><br/> <kbd>kbd</kbd><br/> <samp>samp</samp><br/> <small>small</small><br/> <strike>strike</strike><br/> <strong>strong</strong><br/> <var>var</var><br/> </u> <a href="tr.xhtml"> 이전 </a> <a href="index17.xhtml"> 목록 </a> </html> 4. a> 태그에서의밑줄표시되는현상. <a> 태그에 underline 이생기는현상 WEB(HTML/XHTML MP) 규격의지원으로 WEB 상의 <a> 태그의 default 는 underline 이그려짐 NGB3.0 의 WAP(WML1.x/WML2.x/ XHTML basic) 규격은 <a> 에대한 Under Line 표시여부가규격상정의되어있지않아 NGB3.0 에서는표시하지않고있음 4
[ 그림 7] NGB3.0(E4) [ 그림 8] NGB4.0(E5) <a> 태그에밑줄이생기지않도록하기위해서는아래와같이 <a> 태그의 style 속성에 text-decoration:none 을주면 <a> 태그에밑줄이생기지않음 <a href= URL style= text-decoration:none >TEST</a><br/> 5. URL Link 에 full url 쓰는문제 각태그의 URL link 에 full url 보다는 server name 을빼고상대 path 와 file name 만사용한다. anchor tag 또는여러번반복적으로사용되는 Image File 의 url link 에 full url 을쓸경우속도저하의요인이된다. <a href= http://mobile.embider.com/dev/testpage.html > full url </a> <img src= http://mobile.embider.com/dev/img/test.png /> ( 수정 ) <a href= testpage.html > full url </a> <img src= img/test.png /> 6. Image File 갯수문제 Image 파일의개수를최대한줄이도록한다. 5
자주변경되는 Image 가아니라면위치상으로떨어져있는이미지라도 background 속성을사용해하나로만들어잘라붙이도록한다. Image File 의개수가많은것은속도저하의요인이된다. 아래 [ 그림 9] 같은경우쉽게 Image 파일이두개가나올수있는것이지만, 고정영역이기때문에하나로만든뒤 [ 그림 10] 처럼표현하였다. [ 그림 9]Image File [ 그림 10] 적용된컨텐트화면 : Image File 3개 <img src="image/photo_ title.png" width=168 /> <img src="image/photo_image.png" width=168 /> <img src="image/photo_arrow.png" width=168 /> ( 수정 ) : Image File 2개 (1개-고정, 1개-가변 ) <div style="height:25;background-image:url(image/photo_title.png);"> PH000012 <img src="image/photo_image.png" width=168 /> <div style="height:19;background-image:url(image/photo_title.png); background-position-x:0;background-position-y:-25;"> 7. Table 태그보다는 Div 태그사용을권장 table 태그는연산량및예외동작이많기때문에가급적사용을자제해야한다. Table 태그는내부적으로연산량이많고, 예외처리가많다. 따라서 table 을굳이안쓰고간단히해결할수있다면 table 태그의사용을피하는것이좋다. <table> 6
<tr><td>(0,0)</td><td>(1,0)</td></tr> <tr><td>(0,1)</td><td>(1,1)</td></tr> </table> ( 수정 ) <span>(0,0)</span> <span>(1,0)</span><br> <span>(0,1)</span> <span>(1,1)</span> 8. 코드유지보수를위한주석은제거할것 주석은페이지의용량을증가시킬뿐만아니라, 불필요한연산을필요로하므로실제서비스컨텐츠에서는주석을제거하도록한다. 일반적으로컨텐츠상에유지보수를위해주석 (<!-- --> ) 을다는것이정설이다. 하지만, 모바일환경에서는이런주석들이차지하는용량자체도신경을써야한다. 또한주석도연산과정에서예외로처리되기때문에성능에영향을미치게된다. 따라서개발단계가아닌실제서비스에들어가기전에컨텐츠상에서불필요한주석은모두제거하도록한다. <script> <!-- Document.writeln( Test ); --> </script> <!-- Link 들 --> <a href= http://wap.nate.com >NATE</a><br> ( 수정 ) <script> <!-- Document.writeln( Test ); --> </script> <= 불필요한주석제거 <a href= http://wap.nate.com >NATE</a><br> 9. CSS Selector 가적용되는 tag 가많은경우는신중히 inline 형식의 style sheet 대신 selector 로처리할경우페이지로딩속도에영향을줄수있다. inline(tag 상에 style attribute 로쓰는방법 ) 형식의 style sheet 대신 selector 를사용할경우 text 의용량은줄어드는대신 tag 들이많아지면연산속도가급격히떨어질수있다. inline 으로 1 차작업을하고 selector 로변경해서속도가떨어지지않는지확인후사용해야함 7
selector 를써서용량을줄인효과로다운로드속도가개선되지만역효과로연산속도가느려지기때문에항상확인후사용해야함 <style type=css/text>.mystyle { background-color:#ff0000; width:100; height:100; } </style>.. 생략.. <div class=mystyle> <div class=mystyle>... 생략.. <div class=mystyle> ( 수정 ) 같은스타일의 div 가몇개가있는지에따라 inline 스타일이빠를수도있고, selector 를쓰는방법이빠를수도있다. <div style= background-color:#ff0000;width:100;height:100 > <div style= background-color:#ff0000;width:100;height:100 >... 생략.. <div style= background-color:#ff0000;width:100;height:100 > 10. Image 데이터는미리접근해둔다. 페이지내에이미지가사용될경우, 가능한페이지상단에이미지를사용하는코드를넣어두면페이지로딩속도가개선될수있다. 이미지는상대적으로용량이큰편이다. 따라서미리이미지데이터를망 (network) 에요청해놓고, 이미지데이터를기다리는동안페이지의분석을진행할수있도록구성해주면사용된이미지의용량및개수에따라페이지로딩속도가개선될수있다. <html> <img src= image/test.png /> <img src= image/test2.png /> </html> ( 수정 ) 실제로이미지가필요한부분보다, 미리더미 (dummy) 로해당이미지를접근한다. 예제에사용된 dumyimage 는단순히이미지데이터요청을위해임시로생성할뿐, 실제로사용되지는않는다. <html> <script> 8
Var dummyimage=new Image(); dummyimage.src= image/test.png ; dummyimage.src= image/test2.png ; </script> <img src= image/test.png /> <img src= image/test2.png /> </html> 11. 동적인 Mobile Flash 는 Div 안에넣어서사용하도록한다. Mobile Flash 를사용하는경우 object 태그를 div 태그로다시한번감싸줄것을권장한다. Mobile Flash 스스로가다시그려질 (draw) 필요가있을경우, 그와이웃한 sibling 들도다시그려지는경우가있다. 이때 object 태그와 sibling 관계의있는요소들도다시그려지는것은불필요한연산이다. 따라서 object 태그만을담고있는 div 태그를만들어불필요한연산을줄일수있다. 아래의경우 태그에둘러싸인 <a> 태그들도 Mobile Flash 자체의변경때문에다시그려질수있다. <object classid=clsname:mfinlinerender2 data=flash/m.dmf type=application/plugin /> <a href= >object 의 sibling 의 child 입니다.</a> <a href= >object 의 sibling 의 child 입니다.</a> <a href= >object 의 sibling 의 child 입니다.</a> ( 수정 ) 아래와같이 object 태그의 sibling 이였던 div 를 object 와분리함으로서문제를해결할수있다. <object classid=clsname:mfinlinerender2 data=flash/m.dmf type=application/plugin /> <a href= >object 의 parent 의 sibling 의 child 입니다.</a> <a href= >object 의 parent 의 sibling 의 child 입니다.</a> <a href= >object 의 parent 의 sibling 의 child 입니다.</a> 9