java, c# , linux, program devloper: 웹표준 카테고리 글 목록
http://blog1.phps.kr/
blog.visualp.com
2021-05-28T19:41:52+09:00
Textcube 1.10.7 : Tempo primo
html5 - 숫자패드
java, tomcat, c#
http://blog1.phps.kr/714
2016-12-01T11:08:21+09:00
2016-12-01T11:08:17+09:00
<input type="number" pattern="[0-9]*" inputmode="numeric" placeholder=""><p><strong><a href="http://blog1.phps.kr/714?commentInput=true#entry714WriteComment">댓글 쓰기</a></strong></p>
css, hack , ie hack selector
java, tomcat, c#
http://blog1.phps.kr/470
2012-03-29T13:51:08+09:00
2012-03-29T13:51:05+09:00
<H4>Target ALL VERSIONS of IE</H4><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]--></FONT></SPAN></CODE></PRE>
<H4>Target everything EXCEPT IE</H4><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if !IE]><!--></FONT></SPAN><SPAN class=pln>
<FONT color=#dfc484> </FONT></SPAN><FONT color=#dfc484><SPAN class=tag><link</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>rel</SPAN></FONT><SPAN class=pun><FONT color=#eeeeee>=</FONT></SPAN><SPAN class=atv><FONT color=#8e9c5c>"stylesheet"</FONT></SPAN><FONT color=#dfc484><SPAN class=pln> </SPAN><SPAN class=atn>type</SPAN></FONT><SPAN class=pun><FONT color=#eeeeee>=</FONT></SPAN><SPAN class=atv><FONT color=#8e9c5c>"text/css"</FONT></SPAN><FONT color=#dfc484><SPAN class=pln> </SPAN><SPAN class=atn>href</SPAN></FONT><SPAN class=pun><FONT color=#eeeeee>=</FONT></SPAN><SPAN class=atv><FONT color=#8e9c5c>"not-ie.css"</FONT></SPAN><FONT color=#dfc484><SPAN class=pln> </SPAN><SPAN class=tag>/></SPAN></FONT><SPAN class=pln>
<FONT color=#dfc484> </FONT></SPAN><SPAN class=com><FONT color=#999999><!--<![endif]--></FONT></SPAN></CODE></PRE>
<H4>Target IE 7 ONLY</H4><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]--></FONT></SPAN></CODE></PRE>
<H4>Target IE 6 ONLY</H4><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]--></FONT></SPAN></CODE></PRE>
<H4>Target IE 5 ONLY</H4><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]--></FONT></SPAN></CODE></PRE>
<H4>Target IE 5.5 ONLY</H4><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]--></FONT></SPAN></CODE></PRE>
<H4>Target IE 6 and LOWER</H4><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]--></FONT></SPAN></CODE></PRE><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]--></FONT></SPAN></CODE></PRE>
<H4>Target IE 7 and LOWER</H4><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]--></FONT></SPAN></CODE></PRE><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]--></FONT></SPAN></CODE></PRE>
<H4>Target IE 8 and LOWER</H4><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]--></FONT></SPAN></CODE></PRE><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]--></FONT></SPAN></CODE></PRE>
<H4>Target IE 6 and HIGHER</H4><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]--></FONT></SPAN></CODE></PRE><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]--></FONT></SPAN></CODE></PRE>
<H4>Target IE 7 and HIGHER</H4><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]--></FONT></SPAN></CODE></PRE><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]--></FONT></SPAN></CODE></PRE>
<H4>Target IE 8 and HIGHER</H4><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]--></FONT></SPAN></CODE></PRE><PRE class=prettyprint><CODE><SPAN class=com><FONT color=#999999><!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]--><BR><BR><BR>Universal IE 6 CSS<P sizset="12" sizcache06203399732814406="3">Dealing with IE 6 and below is
always an extra-special challenge. These days people are dropping support for it
right and left, including major businesses, major web apps, and even
governments. There is a better solution than just letting the site go to hell,
and that is to server IE 6 and below a special stripped-down stylesheet, and
then serve IE 7 and above (and all other browsers) the regular CSS. This is been
coined the <A href="http://css-tricks.com/snippets/html/universal-ie6-css/" nodeIndex="1"><FONT color=#000000>universal IE 6 CSS</FONT></A>. </P><PRE class=prettyprint><CODE class=html><SPAN class=com><!--[if !IE 6]><!--></SPAN><SPAN class=pln>
<FONT color=#dfc484> </FONT></SPAN><FONT color=#dfc484><SPAN class=tag><link</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>rel</SPAN></FONT><SPAN class=pun><FONT color=#eeeeee>=</FONT></SPAN><SPAN class=atv><FONT color=#8e9c5c>"stylesheet"</FONT></SPAN><FONT color=#dfc484><SPAN class=pln> </SPAN><SPAN class=atn>type</SPAN></FONT><SPAN class=pun><FONT color=#eeeeee>=</FONT></SPAN><SPAN class=atv><FONT color=#8e9c5c>"text/css"</FONT></SPAN><FONT color=#dfc484><SPAN class=pln> </SPAN><SPAN class=atn>media</SPAN></FONT><SPAN class=pun><FONT color=#eeeeee>=</FONT></SPAN><SPAN class=atv><FONT color=#8e9c5c>"screen, projection"</FONT></SPAN><FONT color=#dfc484><SPAN class=pln> </SPAN><SPAN class=atn>href</SPAN></FONT><SPAN class=pun><FONT color=#eeeeee>=</FONT></SPAN><SPAN class=atv><FONT color=#8e9c5c>"REGULAR-STYLESHEET.css"</FONT></SPAN><FONT color=#dfc484><SPAN class=pln> </SPAN><SPAN class=tag>/></SPAN></FONT><SPAN class=pln>
</SPAN><SPAN class=com><!--<![endif]--></SPAN><SPAN class=pln>
</SPAN><SPAN class=com><!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]--></SPAN><SPAN class=pln>
</SPAN><SPAN class=com><!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]--></SPAN></CODE></PRE><H3>Hacks</H3><P>If you must...</P><H4>IE-6 ONLY</H4><PRE class=prettyprint><CODE><SPAN class=pun><FONT color=#eeeeee>*</FONT></SPAN><SPAN class=pln><FONT color=#dfc484> html </FONT></SPAN><SPAN class=com>#div {</SPAN><SPAN class=pln>
<FONT color=#dfc484> height</FONT></SPAN><SPAN class=pun><FONT color=#eeeeee>:</FONT></SPAN><SPAN class=pln><FONT color=#dfc484> </FONT></SPAN><SPAN class=lit><FONT color=#c9783e>300px</FONT></SPAN><SPAN class=pun><FONT color=#eeeeee>;</FONT></SPAN><SPAN class=pln>
</SPAN><SPAN class=pun><FONT color=#eeeeee>}</FONT></SPAN></CODE></PRE><H4>IE-7 ONLY</H4><PRE class=prettyprint><CODE><SPAN class=pun><FONT color=#eeeeee>*+</FONT></SPAN><SPAN class=pln><FONT color=#dfc484>html </FONT></SPAN><SPAN class=com>#div {</SPAN><SPAN class=pln>
<FONT color=#dfc484> height</FONT></SPAN><SPAN class=pun><FONT color=#eeeeee>:</FONT></SPAN><SPAN class=pln><FONT color=#dfc484> </FONT></SPAN><SPAN class=lit><FONT color=#c9783e>300px</FONT></SPAN><SPAN class=pun><FONT color=#eeeeee>;</FONT></SPAN><SPAN class=pln>
</SPAN><SPAN class=pun><FONT color=#eeeeee>}</FONT></SPAN></CODE></PRE><H4>IE-8 ONLY</H4><PRE class=prettyprint><CODE><SPAN class=com>#div {</SPAN><SPAN class=pln>
<FONT color=#dfc484> height</FONT></SPAN><SPAN class=pun><FONT color=#eeeeee>:</FONT></SPAN><SPAN class=pln><FONT color=#dfc484> </FONT></SPAN><SPAN class=lit><FONT color=#c9783e>300px</FONT></SPAN><SPAN class=pln><FONT color=#dfc484>\0</FONT></SPAN><SPAN class=pun><FONT color=#eeeeee>/;</FONT></SPAN><SPAN class=pln>
</SPAN><SPAN class=pun><FONT color=#eeeeee>}</FONT></SPAN></CODE></PRE><H4>IE-7 & IE-8</H4><PRE class=prettyprint><CODE><SPAN class=com>#div {</SPAN><SPAN class=pln>
<FONT color=#dfc484> height</FONT></SPAN><SPAN class=pun><FONT color=#eeeeee>:</FONT></SPAN><SPAN class=pln><FONT color=#dfc484> </FONT></SPAN><SPAN class=lit><FONT color=#c9783e>300px</FONT></SPAN><SPAN class=pln><FONT color=#dfc484>\9</FONT></SPAN><SPAN class=pun><FONT color=#eeeeee>;</FONT></SPAN><SPAN class=pln>
</SPAN><SPAN class=pun><FONT color=#eeeeee>}</FONT></SPAN></CODE></PRE><H4>NON IE-7 ONLY:</H4><PRE class=prettyprint><CODE><SPAN class=com>#div {</SPAN><SPAN class=pln>
<FONT color=#dfc484> _height</FONT></SPAN><SPAN class=pun><FONT color=#eeeeee>:</FONT></SPAN><SPAN class=pln><FONT color=#dfc484> </FONT></SPAN><SPAN class=lit><FONT color=#c9783e>300px</FONT></SPAN><SPAN class=pun><FONT color=#eeeeee>;</FONT></SPAN><SPAN class=pln>
</SPAN><SPAN class=pun><FONT color=#eeeeee>}</FONT></SPAN></CODE></PRE><H4>Hide from IE 6 and LOWER:</H4><PRE class=prettyprint><CODE><SPAN class=com>#div {</SPAN><SPAN class=pln>
<FONT color=#dfc484> height</FONT></SPAN><SPAN class=com>/**/</SPAN><SPAN class=pun><FONT color=#eeeeee>:</FONT></SPAN><SPAN class=pln><FONT color=#dfc484> </FONT></SPAN><SPAN class=lit><FONT color=#c9783e>300px</FONT></SPAN><SPAN class=pun><FONT color=#eeeeee>;</FONT></SPAN><SPAN class=pln>
</SPAN><SPAN class=pun><FONT color=#eeeeee>}</FONT></SPAN></CODE></PRE><PRE class=prettyprint><CODE><SPAN class=pln><FONT color=#dfc484>html </FONT></SPAN><SPAN class=pun><FONT color=#eeeeee>></FONT></SPAN><SPAN class=pln><FONT color=#dfc484> body </FONT></SPAN><SPAN class=com>#div {</SPAN><SPAN class=pln>
<FONT color=#dfc484> height</FONT></SPAN><SPAN class=pun><FONT color=#eeeeee>:</FONT></SPAN><SPAN class=pln><FONT color=#dfc484> </FONT></SPAN><SPAN class=lit><FONT color=#c9783e>300px</FONT></SPAN><SPAN class=pun><FONT color=#eeeeee>;</FONT></SPAN><SPAN class=pln>
</SPAN><SPAN class=pun><FONT color=#eeeeee>}</FONT></SPAN></CODE><BR><BR><BR></FONT></SPAN></CODE></PRE></PRE><p><strong><a href="http://blog1.phps.kr/470?commentInput=true#entry470WriteComment">댓글 쓰기</a></strong></p>
jquery vaildator 사용방법
java, tomcat, c#
http://blog1.phps.kr/310
2010-09-15T10:25:01+09:00
2010-09-15T10:24:57+09:00
[원문] : <A href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95">http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95</A>3<BR><BR><BR><BR>
<DIV class=entry-content sizset="1" sizcache="1">
<P><A href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target=_blank>jQuery의 validation(검증) 플러그인</A>이다. 일단 데모 페이지부터 보면 어떤 건지 알 수 있을 것이다.</P>
<P><A href="http://jquery.bassistance.de/validate/demo/" target=_blank>validation 플러그인 데모 페이지</A></P>
<P>사용법은 사실 데모 페이지 긁어와서 이름만 고치는 정도로도 알 수 있을 텐데, 몇 가지 써 보자.</P>
<P>두 가지 방법으로 사용할 수 있다. 첫 번째는 심플한 방법이다.</P>
<H2>첫 번째 방법</H2>
<P>이 방법은 위 데모 페이지에서 위쪽에 있는 예시에 사용된 방법이다.</P>
<P>
<DIV class="imageblock center" style="CLEAR: both; TEXT-ALIGN: center" sizset="7" sizcache="1"><IMG style="WIDTH: 544px; HEIGHT: 330px" alt="" src="http://fs.textcube.com/blog/1/16142/attach/XOnVJH0fER.png">
<P class=cap1>△이 첫 번째 방법은 javascript 코드가 간단하다는 장점이 있는 반면, 메시지가 영어로 나오고, html 코드에 들어갈 게 많아진다는 단점이 있다. 비표준 어트리뷰트가 사용된다는 점도 단점이다.</P></DIV>
<DIV class="syntaxhighlighter " id=highlighter_286825>
<DIV class=bar>
<DIV class=toolbar><A class="item viewSource" title="view source" style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#viewSource" commandName="viewSource" highlighterId="highlighter_286825">view source</A>
<DIV class="item copyToClipboard">
<OBJECT id=highlighter_286825_clipboard title="copy to clipboard" codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0 type=application/x-shockwave-flash height=16 width=16 classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000><PARAM NAME="_cx" VALUE="423"><PARAM NAME="_cy" VALUE="423"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="Src" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="-1"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="0"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"></OBJECT></DIV><A class="item printSource" title=print style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#printSource" commandName="printSource" highlighterId="highlighter_286825">print</A><A class="item about" title=? style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#about" commandName="about" highlighterId="highlighter_286825">?</A></DIV></DIV>
<DIV class=lines>
<DIV class="line alt1"><CODE class=number>1.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>$(</CODE><CODE class=keyword>function</CODE><CODE class=plain>(){ </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>2.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 14px! important"><CODE class=comments>// submit 시켰을 때 #form을 검증합니다. </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>3.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 14px! important"><CODE class=plain>$(</CODE><CODE class=string>"#form"</CODE><CODE class=plain>).validate(); </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>4.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>});</CODE></SPAN></SPAN></DIV></DIV></DIV>
<P>javascript 코드에는 위와 같이 쓰고(물론 jquery.js를 위 코드 전에 호출해야 하는 건 당연하다.) html에는 이렇게 적는 것이다.</P>
<DIV class="syntaxhighlighter " id=highlighter_962050>
<DIV class="bar ">
<DIV class=toolbar><A class="item viewSource" title="view source" style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#viewSource" commandName="viewSource" highlighterId="highlighter_962050">view source</A>
<DIV class="item copyToClipboard">
<OBJECT id=highlighter_962050_clipboard title="copy to clipboard" codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0 type=application/x-shockwave-flash height=16 width=16 classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000><PARAM NAME="_cx" VALUE="423"><PARAM NAME="_cy" VALUE="423"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="Src" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="0"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="0"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"></OBJECT></DIV><A class="item printSource" title=print style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#printSource" commandName="printSource" highlighterId="highlighter_962050">print</A><A class="item about" title=? style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#about" commandName="about" highlighterId="highlighter_962050">?</A></DIV></DIV>
<DIV class=lines>
<DIV class="line alt1"><CODE class=number>01.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain><</CODE><CODE class=keyword>form</CODE> <CODE class=color1>id</CODE><CODE class=plain>=</CODE><CODE class=string>"form"</CODE> <CODE class=color1>method</CODE><CODE class=plain>=</CODE><CODE class=string>"get"</CODE> <CODE class=color1>action</CODE><CODE class=plain>=</CODE><CODE class=string>""</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>02.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain><</CODE><CODE class=keyword>fieldset</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>03.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain><</CODE><CODE class=keyword>legend</CODE><CODE class=plain>>잘 적어 주세요</</CODE><CODE class=keyword>legend</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>04.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain><</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>05.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 84px! important"><CODE class=plain><</CODE><CODE class=keyword>label</CODE> <CODE class=color1>for</CODE><CODE class=plain>=</CODE><CODE class=string>"cname"</CODE><CODE class=plain>>이름 (필수, 최소 2글자)</</CODE><CODE class=keyword>label</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>06.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 84px! important"><CODE class=plain><</CODE><CODE class=keyword>input</CODE> <CODE class=color1>id</CODE><CODE class=plain>=</CODE><CODE class=string>"cname"</CODE> <CODE class=color1>name</CODE><CODE class=plain>=</CODE><CODE class=string>"name"</CODE> <CODE class=color1>class</CODE><CODE class=plain>=</CODE><CODE class=string>"required"</CODE> <CODE class=color1>minlength</CODE><CODE class=plain>=</CODE><CODE class=string>"2"</CODE> <CODE class=plain>/> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>07.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain><</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>08.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 84px! important"><CODE class=plain><</CODE><CODE class=keyword>label</CODE> <CODE class=color1>for</CODE><CODE class=plain>=</CODE><CODE class=string>"cemail"</CODE><CODE class=plain>>E-Mail (필수)</</CODE><CODE class=keyword>label</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>09.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 84px! important"><CODE class=plain><</CODE><CODE class=keyword>input</CODE> <CODE class=color1>id</CODE><CODE class=plain>=</CODE><CODE class=string>"cemail"</CODE> <CODE class=color1>name</CODE><CODE class=plain>=</CODE><CODE class=string>"email"</CODE> <CODE class=color1>class</CODE><CODE class=plain>=</CODE><CODE class=string>"required email"</CODE> <CODE class=plain>/> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>10.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain></</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>11.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain><</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>12.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 84px! important"><CODE class=plain><</CODE><CODE class=keyword>label</CODE> <CODE class=color1>for</CODE><CODE class=plain>=</CODE><CODE class=string>"curl"</CODE><CODE class=plain>>URL (선택)</</CODE><CODE class=keyword>label</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>13.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 84px! important"><CODE class=plain><</CODE><CODE class=keyword>input</CODE> <CODE class=color1>id</CODE><CODE class=plain>=</CODE><CODE class=string>"curl"</CODE> <CODE class=color1>name</CODE><CODE class=plain>=</CODE><CODE class=string>"url"</CODE> <CODE class=color1>class</CODE><CODE class=plain>=</CODE><CODE class=string>"url"</CODE> <CODE class=color1>value</CODE><CODE class=plain>=</CODE><CODE class=string>""</CODE> <CODE class=plain>/> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>14.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain></</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>15.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain><</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>16.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 84px! important"><CODE class=plain><</CODE><CODE class=keyword>label</CODE> <CODE class=color1>for</CODE><CODE class=plain>=</CODE><CODE class=string>"ccomment"</CODE><CODE class=plain>>남기실 말씀 (필수)</</CODE><CODE class=keyword>label</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>17.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 84px! important"><CODE class=plain><</CODE><CODE class=keyword>textarea</CODE> <CODE class=color1>id</CODE><CODE class=plain>=</CODE><CODE class=string>"ccomment"</CODE> <CODE class=color1>name</CODE><CODE class=plain>=</CODE><CODE class=string>"comment"</CODE> <CODE class=color1>class</CODE><CODE class=plain>=</CODE><CODE class=string>"required"</CODE><CODE class=plain>></</CODE><CODE class=keyword>textarea</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>18.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain></</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>19.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain><</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>20.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 84px! important"><CODE class=plain><</CODE><CODE class=keyword>input</CODE> <CODE class=color1>class</CODE><CODE class=plain>=</CODE><CODE class=string>"submit"</CODE> <CODE class=color1>type</CODE><CODE class=plain>=</CODE><CODE class=string>"submit"</CODE> <CODE class=color1>value</CODE><CODE class=plain>=</CODE><CODE class=string>"Submit"</CODE><CODE class=plain>/> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>21.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain></</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>22.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain></</CODE><CODE class=keyword>fieldset</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>23.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain></</CODE><CODE class=keyword>form</CODE><CODE class=plain>></CODE></SPAN></SPAN></DIV></DIV></DIV>
<P>위 코드에서 볼 수 있는 것처럼, html코드에 적어 주면 된다. 정리하면 다음과 같다.</P>
<UL>
<LI>필수요소인 경우 class="required" 라고 쓴다.
<LI>email 검증을 해야 하는 경우 class="email"이라고 쓴다.
<LI>필수이면서 이메일 검증을 해야 하는 경우에는 복수 클래스 병기하는 방법을 따라 class="required email" 이라고 적으면 되고 나머지도 마찬가지다.
<LI>최소 글자수가 있는 경우 minlength="숫자" 형태로 적는다.</LI></UL>
<P>위와 같은 방법으로 했을 때의 최대 단점은 메시지가 영어로 나온다는 점이다. 필수 요소인데 안 적은 경우 'This field is required.'라는 메세지가 뜬다. 메세지를 한국어로 하고 싶다면 두 번째 방법을 사용하라.</P>
<P>다른 단점도 있다. minlength 라는 어트리뷰트는 웹표준 검증기를 통과하지 못한다. 표준 점수를 깎아먹을 수 있다는 것이다. 그게 사용성보다 중요한 요소는 아니지만, 웹을 잘 모르는 상관들에게는 중요할지 모른다.</P>
<H2>두 번째 방법</H2>
<P>
<DIV class="imageblock center" style="CLEAR: both; TEXT-ALIGN: center"><A href="http://fs.textcube.com/blog/1/16142/attach/XTW60UXCbY.png" target=_blank rel=lightbox><IMG style="WIDTH: 540px; HEIGHT: 460px" alt="" src="http://fs.textcube.com/blog/1/16142/attach/XTW60UXCbY.png"></A></DIV>
<P>이 방법은 모든 요소를 javascript 단에서 처리하기 때문에 가장 깔끔한 코드를 생산할 수 있다.</P>
<P>일단 코드를 보자.</P>
<DIV class="syntaxhighlighter " id=highlighter_86820>
<DIV class="bar ">
<DIV class=toolbar><A class="item viewSource" title="view source" style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#viewSource" commandName="viewSource" highlighterId="highlighter_86820">view source</A>
<DIV class="item copyToClipboard">
<OBJECT id=highlighter_86820_clipboard title="copy to clipboard" codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0 type=application/x-shockwave-flash height=16 width=16 classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000><PARAM NAME="_cx" VALUE="423"><PARAM NAME="_cy" VALUE="423"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="Src" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="0"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="0"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"></OBJECT></DIV><A class="item printSource" title=print style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#printSource" commandName="printSource" highlighterId="highlighter_86820">print</A><A class="item about" title=? style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#about" commandName="about" highlighterId="highlighter_86820">?</A></DIV></DIV>
<DIV class=lines>
<DIV class="line alt1"><CODE class=number>01.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>$(</CODE><CODE class=keyword>function</CODE><CODE class=plain>(){ </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>02.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 14px! important"><CODE class=comments>// validate signup form on keyup and submit </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>03.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 14px! important"><CODE class=plain>$(</CODE><CODE class=string>"#signupForm"</CODE><CODE class=plain>).validate({ </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>04.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain>rules: { </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>05.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>name: </CODE><CODE class=string>"required"</CODE><CODE class=plain>, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>06.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>password: { </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>07.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain>required: </CODE><CODE class=keyword>true</CODE><CODE class=plain>, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>08.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain>minlength: 8 </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>09.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>}, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>10.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>confirm_password: { </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>11.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain>required: </CODE><CODE class=keyword>true</CODE><CODE class=plain>, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>12.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain>minlength: 8, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>13.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain>equalTo: </CODE><CODE class=string>"#password"</CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>14.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>}, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>15.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>email: { </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>16.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain>required: </CODE><CODE class=keyword>true</CODE><CODE class=plain>, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>17.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain>email: </CODE><CODE class=keyword>true</CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>18.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>}, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>19.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>topic: { </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>20.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain>required: </CODE><CODE class=string>"#newsletter:checked"</CODE><CODE class=plain>, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>21.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain>minlength: 2 </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>22.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>}, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>23.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>agree: </CODE><CODE class=string>"required"</CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>24.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain>}, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>25.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain>messages: { </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>26.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>name: </CODE><CODE class=string>"이름을 입력해 주세요"</CODE><CODE class=plain>, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>27.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>password: { </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>28.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain>required: </CODE><CODE class=string>"암호를 입력해 주세요"</CODE><CODE class=plain>, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>29.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain>minlength: </CODE><CODE class=string>"암호는 8자 이상이어야 합니다."</CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>30.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>}, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>31.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>confirm_password: { </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>32.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain>required: </CODE><CODE class=string>"암호를 한 번 더 입력해 주세요"</CODE><CODE class=plain>, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>33.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain>minlength: </CODE><CODE class=string>"암호는 8자 이상이어야 합니다."</CODE><CODE class=plain>, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>34.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 56px! important"><CODE class=plain>equalTo: </CODE><CODE class=string>"암호가 일치하지 않습니다."</CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>35.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>}, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>36.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>email: </CODE><CODE class=string>"형식에 맞는 이메일을 입력해 주세요."</CODE><CODE class=plain>, </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>37.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain>agree: </CODE><CODE class=string>"정책 동의에 체크해 주세요"</CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>38.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain>} </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>39.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 14px! important"><CODE class=plain>}); </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>40.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>});</CODE></SPAN></SPAN></DIV></DIV></DIV>
<P>위에서 눈여겨 볼 점은 validate 안에 들어있는 {} 안쪽 부분이다. 여기 옵션이 들어간다.</P>
<P>이 옵션 중 핵심적으로 사용된 것인 rules 옵션이다.</P>
<DIV class="syntaxhighlighter " id=highlighter_628728>
<DIV class=bar>
<DIV class=toolbar><A class="item viewSource" title="view source" style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#viewSource" commandName="viewSource" highlighterId="highlighter_628728">view source</A>
<DIV class="item copyToClipboard">
<OBJECT id=highlighter_628728_clipboard title="copy to clipboard" codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0 type=application/x-shockwave-flash height=16 width=16 classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000><PARAM NAME="_cx" VALUE="423"><PARAM NAME="_cy" VALUE="423"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="Src" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="-1"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="0"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"></OBJECT></DIV><A class="item printSource" title=print style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#printSource" commandName="printSource" highlighterId="highlighter_628728">print</A><A class="item about" title=? style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#about" commandName="about" highlighterId="highlighter_628728">?</A></DIV></DIV>
<DIV class=lines>
<DIV class="line alt1"><CODE class=number>1.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>rules: {옵션오브젝트}</CODE></SPAN></SPAN></DIV></DIV></DIV>
<P>이런 형식으로 사용된다. 옵션 오브젝트는 어떻게 구성되는지 보자.</P>
<DIV class="syntaxhighlighter " id=highlighter_699750>
<DIV class=bar>
<DIV class=toolbar><A class="item viewSource" title="view source" style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#viewSource" commandName="viewSource" highlighterId="highlighter_699750">view source</A>
<DIV class="item copyToClipboard">
<OBJECT id=highlighter_699750_clipboard title="copy to clipboard" codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0 type=application/x-shockwave-flash height=16 width=16 classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000><PARAM NAME="_cx" VALUE="423"><PARAM NAME="_cy" VALUE="423"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="Src" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="-1"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="0"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"></OBJECT></DIV><A class="item printSource" title=print style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#printSource" commandName="printSource" highlighterId="highlighter_699750">print</A><A class="item about" title=? style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#about" commandName="about" highlighterId="highlighter_699750">?</A></DIV></DIV>
<DIV class=lines>
<DIV class="line alt1"><CODE class=number>1.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>{name: </CODE><CODE class=string>"required"</CODE><CODE class=plain>}</CODE></SPAN></SPAN></DIV></DIV></DIV>
<P>이렇게 씌인 게 있다. 이것은 name이 "name"인 놈은 필수라는 뜻이다. 다른 방식으로 적용할 수도 있는데 한 input(혹은 textarea)에 여러 개의 옵션을 걸 때다.</P>
<DIV class="syntaxhighlighter " id=highlighter_794924>
<DIV class=bar>
<DIV class=toolbar><A class="item viewSource" title="view source" style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#viewSource" commandName="viewSource" highlighterId="highlighter_794924">view source</A>
<DIV class="item copyToClipboard">
<OBJECT id=highlighter_794924_clipboard title="copy to clipboard" codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0 type=application/x-shockwave-flash height=16 width=16 classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000><PARAM NAME="_cx" VALUE="423"><PARAM NAME="_cy" VALUE="423"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="Src" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="-1"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="0"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"></OBJECT></DIV><A class="item printSource" title=print style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#printSource" commandName="printSource" highlighterId="highlighter_794924">print</A><A class="item about" title=? style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#about" commandName="about" highlighterId="highlighter_794924">?</A></DIV></DIV>
<DIV class=lines>
<DIV class="line alt1"><CODE class=number>1.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>email: {required: </CODE><CODE class=keyword>true</CODE><CODE class=plain>, email: </CODE><CODE class=keyword>true</CODE><CODE class=plain>}</CODE></SPAN></SPAN></DIV></DIV></DIV>
<P>이런 식으로 들어가는데, 이 때 email: true 항목은 당연히 이메일형식 검증을 하겠다는 뜻이다.</P>
<P>rules 옵션 아래쪽에 있는 message 옵션은 rules에 대응되는 메시지들을 적어주면 된다. 위 형식을 참고하면 될 것이므로 굳이 일일이 설명하지 않겠다.</P>
<P>다음 html 코드를 보자.</P>
<DIV class="syntaxhighlighter " id=highlighter_474377>
<DIV class="bar ">
<DIV class=toolbar><A class="item viewSource" title="view source" style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#viewSource" commandName="viewSource" highlighterId="highlighter_474377">view source</A>
<DIV class="item copyToClipboard">
<OBJECT id=highlighter_474377_clipboard title="copy to clipboard" codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0 type=application/x-shockwave-flash height=16 width=16 classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000><PARAM NAME="_cx" VALUE="423"><PARAM NAME="_cy" VALUE="423"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="Src" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="0"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="0"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"></OBJECT></DIV><A class="item printSource" title=print style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#printSource" commandName="printSource" highlighterId="highlighter_474377">print</A><A class="item about" title=? style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#about" commandName="about" highlighterId="highlighter_474377">?</A></DIV></DIV>
<DIV class=lines>
<DIV class="line alt1"><CODE class=number>01.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain><</CODE><CODE class=keyword>form</CODE> <CODE class=color1>id</CODE><CODE class=plain>=</CODE><CODE class=string>"signupForm"</CODE> <CODE class=color1>method</CODE><CODE class=plain>=</CODE><CODE class=string>"get"</CODE> <CODE class=color1>action</CODE><CODE class=plain>=</CODE><CODE class=string>""</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>02.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 14px! important"><CODE class=plain><</CODE><CODE class=keyword>fieldset</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>03.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain><</CODE><CODE class=keyword>legend</CODE><CODE class=plain>>정보를 입력해 주세요</</CODE><CODE class=keyword>legend</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>04.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain><</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>05.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain><</CODE><CODE class=keyword>label</CODE> <CODE class=color1>for</CODE><CODE class=plain>=</CODE><CODE class=string>"name"</CODE><CODE class=plain>>Lastname</</CODE><CODE class=keyword>label</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>06.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain><</CODE><CODE class=keyword>input</CODE> <CODE class=color1>id</CODE><CODE class=plain>=</CODE><CODE class=string>"name"</CODE> <CODE class=color1>name</CODE><CODE class=plain>=</CODE><CODE class=string>"name"</CODE> <CODE class=plain>/> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>07.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain></</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>08.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain><</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>09.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain><</CODE><CODE class=keyword>label</CODE> <CODE class=color1>for</CODE><CODE class=plain>=</CODE><CODE class=string>"password"</CODE><CODE class=plain>>암호</</CODE><CODE class=keyword>label</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>10.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain><</CODE><CODE class=keyword>input</CODE> <CODE class=color1>id</CODE><CODE class=plain>=</CODE><CODE class=string>"password"</CODE> <CODE class=color1>name</CODE><CODE class=plain>=</CODE><CODE class=string>"password"</CODE> <CODE class=color1>type</CODE><CODE class=plain>=</CODE><CODE class=string>"password"</CODE> <CODE class=plain>/> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>11.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain></</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>12.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain><</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>13.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain><</CODE><CODE class=keyword>label</CODE> <CODE class=color1>for</CODE><CODE class=plain>=</CODE><CODE class=string>"confirm_password"</CODE><CODE class=plain>>암호확인</</CODE><CODE class=keyword>label</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>14.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain><</CODE><CODE class=keyword>input</CODE> <CODE class=color1>id</CODE><CODE class=plain>=</CODE><CODE class=string>"confirm_password"</CODE> <CODE class=color1>name</CODE><CODE class=plain>=</CODE><CODE class=string>"confirm_password"</CODE> <CODE class=color1>type</CODE><CODE class=plain>=</CODE><CODE class=string>"password"</CODE> <CODE class=plain>/> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>15.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain></</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>16.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain><</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>17.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain><</CODE><CODE class=keyword>label</CODE> <CODE class=color1>for</CODE><CODE class=plain>=</CODE><CODE class=string>"email"</CODE><CODE class=plain>>Email</</CODE><CODE class=keyword>label</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>18.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain><</CODE><CODE class=keyword>input</CODE> <CODE class=color1>id</CODE><CODE class=plain>=</CODE><CODE class=string>"email"</CODE> <CODE class=color1>name</CODE><CODE class=plain>=</CODE><CODE class=string>"email"</CODE> <CODE class=plain>/> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>19.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain></</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>20.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain><</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>21.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain><</CODE><CODE class=keyword>label</CODE> <CODE class=color1>for</CODE><CODE class=plain>=</CODE><CODE class=string>"agree"</CODE><CODE class=plain>>개인정보 보호정책 동의</</CODE><CODE class=keyword>label</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>22.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain><</CODE><CODE class=keyword>input</CODE> <CODE class=color1>type</CODE><CODE class=plain>=</CODE><CODE class=string>"checkbox"</CODE> <CODE class=color1>class</CODE><CODE class=plain>=</CODE><CODE class=string>"checkbox"</CODE> <CODE class=color1>id</CODE><CODE class=plain>=</CODE><CODE class=string>"agree"</CODE> <CODE class=color1>name</CODE><CODE class=plain>=</CODE><CODE class=string>"agree"</CODE> <CODE class=plain>/> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>23.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain></</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>24.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain><</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>25.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 42px! important"><CODE class=plain><</CODE><CODE class=keyword>input</CODE> <CODE class=color1>class</CODE><CODE class=plain>=</CODE><CODE class=string>"submit"</CODE> <CODE class=color1>type</CODE><CODE class=plain>=</CODE><CODE class=string>"submit"</CODE> <CODE class=color1>value</CODE><CODE class=plain>=</CODE><CODE class=string>"제출"</CODE><CODE class=plain>/> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>26.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 28px! important"><CODE class=plain></</CODE><CODE class=keyword>p</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>27.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 14px! important"><CODE class=plain></</CODE><CODE class=keyword>fieldset</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>28.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain></</CODE><CODE class=keyword>form</CODE><CODE class=plain>></CODE></SPAN></SPAN></DIV></DIV></DIV>
<P>위 코드는 html 검증을 통과할 수 있는 깔끔한 코드다. <A href="http://www.w3schools.com/tags/att_label_for.asp" target=_blank>label에 있는 for 어트리뷰트</A>는 웹표준에 맞는 어트리뷰트다. 이 라벨이 어떤 인풋에 대한 것인지, 해당 인풋의 id를 써 주는 부분이다.</P>
<P>그러나 jQuery 검증 플러그인의 자바스크립트 코드에서 위 폼을 인식할 때는 name 어트리뷰트를 기준으로 하는 것이므로, name을 신경쓰면 된다. 즉, label은 선택이니 너무 눈 돌아가지 않아도 된다는 말이다.</P>
<P>name을 바탕으로 하므로 checkbox나 radio 같은 것도 검증이 가능하게 된다.</P>
<H2>필수다! 하는 메시지의 스타일</H2>
<P>자, 그럼 required 라고 써준 input에 입력을 안 하고 submit 버튼을 눌렀을 때(이 경우를 '에러가 났을 때'라고 표현하자.) 나올 스타일은 어디서 결정할까?</P>
<P>그건 따로 써줘야 한다. 미리 준비된 css는 제공하고 있지 않은 듯하다.</P>
<P>사용되는 페이지의 head 부분에 아래처럼 써 주면 된다.</P>
<P>두 경우를 제공하겠다. 첫 번째 것은 메시지가 input의 오른쪽에 나오는 디자인이다. 두 번째 것은 메시지가 input의 하단에 나오는 디자인이다. 둘 다 input의 테두리가 빨간 점선으로 변하고, 메시지도 빨간 색으로 뜬다. css 지식이 조금만 있다면 수정해서 자신이 원하는대로 사용할 수 있을 것이다.</P>
<DIV class="syntaxhighlighter " id=highlighter_545776>
<DIV class="bar ">
<DIV class=toolbar><A class="item viewSource" title="view source" style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#viewSource" commandName="viewSource" highlighterId="highlighter_545776">view source</A>
<DIV class="item copyToClipboard">
<OBJECT id=highlighter_545776_clipboard title="copy to clipboard" codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0 type=application/x-shockwave-flash height=16 width=16 classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000><PARAM NAME="_cx" VALUE="423"><PARAM NAME="_cy" VALUE="423"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="Src" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="0"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="0"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"></OBJECT></DIV><A class="item printSource" title=print style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#printSource" commandName="printSource" highlighterId="highlighter_545776">print</A><A class="item about" title=? style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#about" commandName="about" highlighterId="highlighter_545776">?</A></DIV></DIV>
<DIV class=lines>
<DIV class="line alt1"><CODE class=number>01.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain><style type=</CODE><CODE class=string>"text/css"</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>02.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>input.error, textarea.error{ </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>03.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 14px! important"><CODE class=keyword>border</CODE><CODE class=plain>:</CODE><CODE class=value>1px</CODE> <CODE class=value>dashed</CODE> <CODE class=value>red</CODE><CODE class=plain>; </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>04.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>} </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>05.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>label.error{ </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>06.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 14px! important"><CODE class=keyword>margin-left</CODE><CODE class=plain>:</CODE><CODE class=value>10px</CODE><CODE class=plain>; </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>07.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 14px! important"><CODE class=keyword>color</CODE><CODE class=plain>:</CODE><CODE class=value>red</CODE><CODE class=plain>; </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>08.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>} </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>09.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain></style></CODE></SPAN></SPAN></DIV></DIV></DIV>
<P>위 스타일이 에러메시지를 input 오른쪽 공간에 띄워 주는 스타일이다.</P>
<DIV class="syntaxhighlighter " id=highlighter_882787>
<DIV class=bar>
<DIV class=toolbar><A class="item viewSource" title="view source" style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#viewSource" commandName="viewSource" highlighterId="highlighter_882787">view source</A>
<DIV class="item copyToClipboard">
<OBJECT id=highlighter_882787_clipboard title="copy to clipboard" codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0 type=application/x-shockwave-flash height=16 width=16 classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000><PARAM NAME="_cx" VALUE="423"><PARAM NAME="_cy" VALUE="423"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="Src" VALUE="http://rs.textcube.com/service/blog/script/plugins/codehighlighter/clipboard.swf"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="-1"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="0"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"></OBJECT></DIV><A class="item printSource" title=print style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#printSource" commandName="printSource" highlighterId="highlighter_882787">print</A><A class="item about" title=? style="WIDTH: 16px; HEIGHT: 16px" href="http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%95#about" commandName="about" highlighterId="highlighter_882787">?</A></DIV></DIV>
<DIV class=lines>
<DIV class="line alt1"><CODE class=number>01.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain><style type=</CODE><CODE class=string>"text/css"</CODE><CODE class=plain>> </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>02.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>input.error, textarea.error{ </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>03.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 14px! important"><CODE class=keyword>border</CODE><CODE class=plain>:</CODE><CODE class=value>1px</CODE> <CODE class=value>dashed</CODE> <CODE class=value>red</CODE><CODE class=plain>; </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>04.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>} </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>05.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>label.error{ </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>06.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 14px! important"><CODE class=keyword>display</CODE><CODE class=plain>:</CODE><CODE class=value>block</CODE><CODE class=plain>; </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>07.</CODE><SPAN class=content><CODE class=spaces> </CODE><SPAN class=block style="MARGIN-LEFT: 14px! important"><CODE class=keyword>color</CODE><CODE class=plain>:</CODE><CODE class=value>red</CODE><CODE class=plain>; </CODE></SPAN></SPAN></DIV>
<DIV class="line alt2"><CODE class=number>08.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain>} </CODE></SPAN></SPAN></DIV>
<DIV class="line alt1"><CODE class=number>09.</CODE><SPAN class=content><SPAN class=block style="MARGIN-LEFT: 0px! important"><CODE class=plain></style></CODE></SPAN></SPAN></DIV></DIV></DIV>
<P>이 스타일은 에러메시지를 input 하단에 띄워 주는 스타일이다.</P>
<H2>jQuery Validation Plugin API 문서</H2>
<P>API 문서를 보는 건 항상 귀찮은 일이지만, 유용한 일이기도 하다.</P>
<P>내가 보기에 API 문서 중 핵심은 rules다.</P>
<P>다양한 옵션의 API가 나와있는 주소를 곧장 링크할 테니 참고해서 보기 바란다.</P>
<P><A href="http://docs.jquery.com/Plugins/Validation/validate#options" target=_blank>jQuery 검증 플러그인 API 문서 : validate 함수의 option 사용법</A></P></DIV><!-- 구글 애드센스3 --><p><strong><a href="http://blog1.phps.kr/310?commentInput=true#entry310WriteComment">댓글 쓰기</a></strong></p>
png24 배경 사용
java, tomcat, c#
http://blog1.phps.kr/245
2010-04-18T00:30:34+09:00
2010-04-18T00:02:35+09:00
<P><CODE style="BORDER-BOTTOM: rgb(204,204,204) 1px dotted; BORDER-LEFT: rgb(204,204,204) 1px dotted; PADDING-BOTTOM: 5px; BACKGROUND-COLOR: rgb(238,238,238); PADDING-LEFT: 5px; PADDING-RIGHT: 5px; DISPLAY: block; FONT: 11px Courier New; BORDER-TOP: rgb(204,204,204) 1px dotted; BORDER-RIGHT: rgb(204,204,204) 1px dotted; PADDING-TOP: 5px; font-size-adjust: none; font-stretch: normal" class=prettyprint><SPAN class=pln>background</SPAN><SPAN class=pun>:</SPAN><SPAN class=pln> url</SPAN><SPAN class=pun>(..</SPAN><SPAN class=str>/images/</SPAN><SPAN class=pln>asdf</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>png</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln> no</SPAN><SPAN class=pun>-</SPAN><SPAN class=pln>repeat center top</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln><BR></SPAN><SPAN class=com>//CSS문서 위치를 중심으로 이미지 경로를 따질것</SPAN><SPAN class=pln><BR><BR>background</SPAN><SPAN class=pun>-</SPAN><SPAN class=pln>image </SPAN><SPAN class=pun>:</SPAN><SPAN class=pln> none</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln><BR>filter</SPAN><SPAN class=pun>:</SPAN><SPAN class=pln> progid</SPAN><SPAN class=pun>:</SPAN><SPAN class=typ>DXImageTransform</SPAN><SPAN class=pun>.</SPAN><SPAN class=typ>Microsoft</SPAN><SPAN class=pun>.</SPAN><SPAN class=typ>AlphaImageLoader</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>src</SPAN><SPAN class=pun>=</SPAN><SPAN class=str>'../images/asdf.png'</SPAN><SPAN class=pun>,</SPAN><SPAN class=pln>sizingMethod</SPAN><SPAN class=pun>=</SPAN><SPAN class=str>'scale'</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><BR></SPAN><SPAN class=com>//실제 읽어들이는 페이지를 중심으로 이미지 경로를 따질것</SPAN><SPAN class=pln><BR></SPAN></CODE></P>
<DIV class=autosourcing-stub>
<P style="PADDING-BOTTOM: 0px; FONT-STYLE: normal; MARGIN: 11px 0px 7px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-FAMILY: Dotum; FONT-SIZE: 12px; FONT-WEIGHT: normal; PADDING-TOP: 0px"><STRONG style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 7px; PADDING-TOP: 0px">[출처]</STRONG> <A href="http://blog.naver.com/cowboyjs/120048526053" target=_blank>IE6 PNG background없애기</A><SPAN style="PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 7px; PADDING-TOP: 0px">|</SPAN><STRONG style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 7px; PADDING-TOP: 0px">작성자</STRONG> <A href="http://blog.naver.com/cowboyjs" target=_blank>스파이크</A></P></DIV><p><strong><a href="http://blog1.phps.kr/245?commentInput=true#entry245WriteComment">댓글 쓰기</a></strong></p>
PNG-24 사용 가이드
java, tomcat, c#
http://blog1.phps.kr/225
2010-03-18T13:18:31+09:00
2010-03-18T13:18:27+09:00
[원문] - <A href="http://hylaweb.net/guide/html/04_image/image03.php">http://hylaweb.net/guide/html/04_image/image03.php</A><BR><BR>
<H3>PNG-24 사용 가이드</H3>
<P>png 이미지를 사용시 ie6에서 배경이 회색으로 보이는 현상이 있습니다.<BR>많이 알려진 htc 로는 no-repeat 이되서 배경을 원하는 위치에 두거나 반복적인 효과를 줄수없습니다.<BR>iepngfix.htc와 iepngfix.js 를 이용해 ie6에서도 정상적이게 보일수있게 합니다.</P>
<H4>첨부파일</H4>
<BLOCKQUOTE>
<UL>
<LI><A href="http://hylaweb.net/xe/files/attach/images/47/760/blank.gif">blank.gif</A> - 49Byte</LI>
<LI><A href="http://hylaweb.net/xe/?module=file&act=procFileDownload&file_srl=762&sid=4982531bc7eeaf6db14989465ecac717">iepngfix.htc</A> - 5.1KB</LI>
<LI><A href="http://hylaweb.net/xe/?module=file&act=procFileDownload&file_srl=763&sid=b125d94dc116c003a259957ce888c190">iepngfix.js</A> - 4.2KB</LI></UL><CITE>출처 : <A href="http://www.twinhelix.com/css/iepngfix/">http://www.twinhelix.com/css/iepngfix/ <IMG alt=새창 src="http://hylaweb.net/guide/img/common/icon_blank.gif"></A></CITE> </BLOCKQUOTE>
<P>ie6 이하의 버전을 위한 핵이므로 css 는 따로 해주시는게 좋습니다.</P>
<H4>샘플1. png 이미지를 <img>로 사용</H4>
<DIV id=sample01><IMG class=png24 alt="" src="http://hylaweb.net/guide/html/04_image/img/text.png"> </DIV>
<H5>코드뷰</H5>
<DIV class=codeTextarea><style type="text/css"><BR>#sample01 {width:200px; height:100px; background:#333;}<BR>.png24 {behavior:url(iepngfix/iepngfix.htc)}<BR></style><BR><BR><div id="sample01"><BR><img src="img/text.png" class="png24" alt="" /><BR></div> </DIV>
<H4>샘플2. png 이미지를 배경으로 사용 (고정배경으로 사용시는 htc와 js 필요없이 filter를 쓰시면됩니다.)</H4>
<H5>코드뷰</H5>
<DIV class=codeTextarea><style type="text/css"><BR>#sample02 {width:200px; height:100px; background:#ddd url(img/text.png) no-repeat;}<BR></style><BR><!--[if lt ie 7]><BR><style type="text/css"><BR>#sample02 {background:#ddd; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/text.png', sizingMethod='crop');}<BR></style><BR><![endif]--><BR><BR><div id="sample02"><BR></div> </DIV>
<H4>샘플3. png 이미지를 배경으로 반복(repeat) 또는 위치지정</H4>
<H5>코드뷰</H5>
<DIV class=codeTextarea><script type="text/javascript" src="iepngfix/iepngfix.js"></script><BR><BR><style type="text/css"><BR>#sample03 {width:200px; height:100px; background:#ddd url(img/text.png) repeat-y;}<BR></style><BR><!--[if lt ie 7]><BR><style type="text/css"><BR>#sample03 {background:#ddd url(img/text.png) repeat-y; behavior:url(iepngfix/iepngfix.htc);}<BR></style><BR><![endif]--><BR><BR><div id="sample03"><BR><img src="img/text.png" class="png24" alt="" /><BR></div> </DIV><p><strong><a href="http://blog1.phps.kr/225?commentInput=true#entry225WriteComment">댓글 쓰기</a></strong></p>
XML선언
java, tomcat, c#
http://blog1.phps.kr/8
2009-07-17T19:12:01+09:00
2009-07-17T19:11:59+09:00
XHTML은 XML어플리케이션의 한 종류이기 때문에 문서의 처음 부분에 XML선언을 기술한다ㅏ.<BR><BR><?xml version="1.0" encoding="UTF-8"?><BR><html><BR> <head><BR> 문서의 기본정보<BR> </head><BR> <body><BR> 문서의 본문<BR> </body><BR></html><BR><BR>버전 속송은 필수 속성이며 XHTML 버전이 아닌 xml 버전임으로 XHTML1.0 이든 XHTML1.1이든 상관없이 1.0 으로 지정한다.<BR><BR>한글이 깨질 경우 UTF-8 --> EUC-KR 지정 한다.<p><strong><a href="http://blog1.phps.kr/8?commentInput=true#entry8WriteComment">댓글 쓰기</a></strong></p>
문서형 선언
java, tomcat, c#
http://blog1.phps.kr/7
2009-07-17T19:11:46+09:00
2009-07-17T19:11:43+09:00
XHTML에는 여러 버전이 있음으로 이문서가 어떤 버전의 XHTML로 작성 되었다는 것을 명시 하기 위해서 xml 버전 선헌후 바로 문서형 선언을 하면 된다.<BR><BR>Xhtml에는 strict,Transitional, Frameset 이 있으며 각각 HTML4.01의 Strict, Transitional, Frameset을 이어 받는다. 그러나 XHTML 1.1버전에서 Transitional, Frameset 폐지 되고 Strict에 해당하는 것만 존재 함으로 Strict를 문서 형으로 선언 해야 한다. <BR><BR><?xml version="1.0" encoding="UTF-8"?><BR><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<BR> "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><U><FONT color=#0066cc>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</FONT></U></A>"><BR><html><BR> <head><BR> 문서의 기본정보<BR> </head><BR> <body><BR> 문서의 본문<BR> </body><BR></html><BR><BR><BR><p><strong><a href="http://blog1.phps.kr/7?commentInput=true#entry7WriteComment">댓글 쓰기</a></strong></p>
네임스페이스 , 언어코드 지정
java, tomcat, c#
http://blog1.phps.kr/6
2009-07-17T19:11:24+09:00
2009-07-17T19:11:21+09:00
네임스페이스는 xmlns 속성으로 지정 <BR>XHTML에서는 "<A href="http://www.w3.org/1999/xhtml"><U><FONT color=#0066cc>http://www.w3.org/1999/xhtml</FONT></U></A>" 이 네임 스페이스로 부여 되어 있음<BR><BR>언어 코드는 xml:lang 속성으로 지정<BR>한국어 : ko<BR>영 어 : en<BR>미 국 : en-us<BR>프랑스 : fr<BR>중 국 : zh<BR><BR>XHTML1.0에서는 하위 호환성을 고려하여 xml:lang 속성 같은 값을 지정 한다.<BR>XHTML1.1에서는 lang속성을 인정하지 않기 때문에 xml:lang 속성만으로 문자코드를 지정한다.<BR><BR><?xml version="1.0" encoding="UTF-8"?><BR><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<BR>"<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><U><FONT color=#0066cc>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</FONT></U></A>"><BR><BR><BR><html xmlns="<A href="http://www.w3.org/1999/xhtml"><U><FONT color=#0066cc>http://www.w3.org/1999/xhtml</FONT></U></A>" xml:lang="ko" lang="ko" ><BR> <head><BR> 문서의 기본정보<BR> </head><BR> <body><BR> 문서의 본문<BR> </body><BR></html><BR><BR><p><strong><a href="http://blog1.phps.kr/6?commentInput=true#entry6WriteComment">댓글 쓰기</a></strong></p>
title , 타이틀 지정
java, tomcat, c#
http://blog1.phps.kr/5
2009-07-17T19:11:03+09:00
2009-07-17T19:11:00+09:00
XHTML 문서에서 타이틀은 반드시 한 번만 지정 해야 한다. <BR>중복 지정은 인정 되지 않음.<BR>타이틀 지정시 뜻살려서 시정 <BR>예 X) 3장<BR>예 O) 3장 DML 사용 하기 - 실습<BR><BR>이페이지가 어떤 페이지 인지 나타낼 수 있도록 명확히 표시 하도록 하자.<BR> <BR><BR><?xml version="1.0" encoding="UTF-8"?><BR><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<BR>"<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><U><FONT color=#0066cc>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</FONT></U></A>"><BR><BR><BR><html xmlns="<A href="http://www.w3.org/1999/xhtml"><U><FONT color=#0066cc>http://www.w3.org/1999/xhtml</FONT></U></A>" xml:lang="ko" lang="ko" ><BR> <head><BR> <title>장 DML 사용 하기 - 실습</title><BR> </head><BR> <body><BR> 문서의 본문<BR> </body><BR></html><BR><BR><p><strong><a href="http://blog1.phps.kr/5?commentInput=true#entry5WriteComment">댓글 쓰기</a></strong></p>
link 요소
java, tomcat, c#
http://blog1.phps.kr/4
2009-07-17T19:10:38+09:00
2009-07-17T19:10:35+09:00
<P>외부 스타일 시트 지정 <BR><link rel="stylesheet" type="text/css" media="screen" href="./css/default.css" /><BR><link rel="stylesheet" type="text/css" media="print" href="./css/print.css" /><BR><BR><BR>작성자 지정 - 주로 이메일 지정시 사용<BR><link rev="made" href=<A href="mailto:rhqudaks@nate.com"><U><FONT color=#0066cc>mailto:rhqudaks@nate.com</FONT></U></A>" /></P><p><strong><a href="http://blog1.phps.kr/4?commentInput=true#entry4WriteComment">댓글 쓰기</a></strong></p>