1996. 3. 18. 04:36
내발자국[동호회]
------------------------------------
제 목 : [9510]www가 기가막혀(12)
------------------------------------
열한 번째 예제
어떤 웹 사이트를 가보면 자신의 웹에 대한 만족도를 상.중/하
로 매겨 달라고 즉 라디오 버튼으로 제공하는 사람들도 있지만
대개는 다음 예에서 보는 바와 같이 글자를 쓸 수 있는 흑판을
제공해서 사람들이 의견을 제시할 수 있도록 제공하고 있다. 이
러한 흑판을 웹에서는 textarea라고 부르며 와 같이 줄과
열의 수를 지정할 수 있다.
----------- EXAMPLE11.HTML -----------------------
Fill-Out Form Example #11
This is another fill-out form example, with multiline text entry
areas.
---------------------------------------------
그림 파일명 : 14ex11.gif 그림 파일명 : 14ex11r.gif
----- <그림 12> example11.html 수행한 예 ---------------
열두 번째 예
뒤에 sensitive map이라는 구조를 보겠지만 CGI를 이용해서 화
면에서 마우스가 클릭한 좌표를 알아낼 수 있다. 일단 좌표를 알
아내면 좌표를 이용하여 버튼의 위치에 해당하면 원하는 action
을 할 수 있게 된다. 아무튼 와 같이 쓰면 externals
/smarr-small.gif파일을 읽어서 화면에 표시하고 마우스로 클릭하
면 그 위치를 서버의 프로그램에게 넘겨주게 된다.
-------- EXAMPLE12.HTML --------------------------
Fill-Out Form Example #12
This is another fill-out form example, with image maps.
Fill-Out Form Example w/ Hidden Elements (#13)</<BR> TITLE><BR> <H1>Fill-Out Form Example w/ Hidden Elements (#13)</H1><BR> This is a very simple fill-out form example. <P><BR> <FORM METHOD="POST" ACTION=<BR> "http://casaturn.kaist.ac.kr/cgi-bin/post-query"><BR> A single text entry field goes here: <INPUT NAME="entry"> <BR> <P><BR> There are two "hidden" form elements which are not displayed <BR> located here:<BR> <INPUT TYPE="hidden" NAME="hidden element#1" VALUE="<BR> blah"><BR> <INPUT TYPE="hidden" NAME="hidden element#2" VALUE="<BR> foobar"><BR> <p><BR> These are created via TYPE="hidden" and can contain arbitrar<BR> y <BR> NAME/VALUE pairs. These can easily be used to maintain a <BR> form<BR> of "state" in multiple connections with a server. <p><BR> To submit the query (including hidden data), press this button: <BR> <INPUT TYPE="submit" VALUE="Submit Query">. <P><BR><BR> 그림 파일명 : 14test13.gif 그림 파일명 : 14test13b.gif <BR> ----- <그림 14> example13.html 수행한 예 ---------------<BR> 2 버튼만 누르면(sensitive map) 되게 만들기<BR> 이번에는 imagemap이라는 CGI 프로그램을 이용하는 예를 살<BR> 펴보기로 한다. imagemap은 사용자가 브라우저에게 보여지는 화<BR> 면을 보고 그것이 만약 메뉴판이라고 했을 때 메뉴를 마우스로 <BR> 클릭하면 원하는 action을 취하도록 도와주는 프로그램이다. 예를 <BR> 들어 내가 만들고 싶은 것은 다음과 같다.<BR><BR> 그림 파일명 : 14test6.gif<BR> <그림 15> project.html을 실행한 예 <BR> 그럼 이렇게 만들기 위해서 해야 할 것을 단계별로 나누어 설<BR> 명하기로 한다. 일단 다음과 같이 HTMl문서를 작성한다. 물론 <BR> 열 때는 netscape http://casaturn.kaist.ac.kr:8000/internet/project/<BR> project.html과 같이 하면 된다.<BR><BR> 단계 1: HTML문서 작성<BR><BR> ----------- PROJECT.HTML -------------------------<BR> <!-- this is comment --><BR> <HTML><BR> <HEAD><BR> <TITLE> This is Project Test Home Page in KAIST </TITL<BR> E> <a name = "sc"> </a><BR> <H1> Project test Home PAGE </H1><BR> </HEAD><BR> <BODY><BR> <a href="http://casaturn/cgi-bin/imagemap/test2"> <BR> <img src="pppd.gif" ismap> </a><BR> <h1> POST QUERY TEST </h1><BR> <FORM method = "post" ACTION=<BR> "http://casaturn.kaist.ac.kr/cgi-bin/post-query"><BR> Note that it has no default value. <P><BR> TEXT entry : <INPUT TYPE="TEST" NAME=<BR> "firstinput" VALUE="original"> <P><BR> checkbox entry : <INPUT TYPE="checkbox" NAME=<BR> "firstcheck" VALUE="check"> <P><BR> To submit the query, press this button:<BR> <INPUT TYPE="submit" VALUE="Submit Query">. <P><BR> </FORM><BR> <h1> Image QUERY test </h1><BR> <FORM method = "post" ACTION=<BR> "http://casaturn.kaist.ac.kr/cgi-bin/post-query"><BR> <INPUT TYPE="image" SRC="test.gif"><BR> <H1> Get Query test </H1><BR> </FORM><BR> <form method = "get" action = <BR> "http://casaturn.kaist.ac.kr:8000/cgi-bin/query"><BR> TEXT entry : <INPUT TYPE="TEST" NAME="text"> <P><BR> PASSWD entry : <INPUT TYPE="PASSWORD" NAME="password"> <P><BR> checkbox entry : <INPUT TYPE="checkbox" NAME="check<BR> "> <P><BR> radio entry : <INPUT TYPE="radio" NAME="radio"> <P><BR> <select name="menu"><BR> <option> first option<BR> <option> second option<BR> </select> <P><BR> To submit <INPUT TYPE="submit" VALUE="Submit Query<BR> ">. <P><BR> </FORM><BR> </BODY><BR> </HTML><BR> ----------------------------------------------------<BR> 위에서 http://casaturn/cgi-bin/imagemap/test2의 의미는 casat<BR> urn에 http 프로토콜로 접속하여, /cgi-bin/imagemap이라는 CGI <BR> 프로그램을 실행하는데 파라미터는 test2로 하라는 의미이다.<BR><BR> 단계 2: pppd.gif라는 그림 만들기<BR> 위와 같이 메뉴판을 디자인하는 경우에 가장 좋은 것은 필자의 <BR> 견해로는 아도브 포토샵을 쓸 것을 권장한다. <BR><BR> 단계 3: 지도를 만든다.<BR> 그림 한 장에서 어떤 부분을 누르면 어떤 것을 부르고 하는 것<BR> 을 만들려면 어떤 부분은 어떻고 하는 것을 지정해 주는 파일이 <BR> 있어야 하는데, 그 파일을 map 파일이라고 하며 보통 testmap.m<BR> ap의 이름을 가지게 된다. 그렇다면 위에서 보면 http://casaturn/<BR> cgi-bin/imagemap/test2에서 test2로 지정하였는데 먼 곳에서 접<BR> 속하면 먼저 시스템 설정 파일 중에서 imagemap.conf를 찾게 되<BR> 며 그 파일에는 다음과 같이 적혀 있다.<BR><BR> ----------------------------------------------------<BR> #test<BR> test : /mm/gunhan/httpd/htdocs/project/testmap.map<BR> test2: /mm/gunhan/httpd/htdocs/internet/project/testmap.map<BR> #test<BR> ----------------------------------------------------<BR> 즉 test2로 들어오게 되면 map파일은 /mm/gunhan/httpd/htdocs/i<BR> nternet/project/testmap.map을 쓰라고 지정하는 것이다. 이제 /m<BR> m/gunhan/httpd/htdocs/internet/project/testmap.map을 보면<BR><BR> ----------------------------------------------------<BR> default /internet/project/none.html # charming woman<BR> rect /internet/project/woman.html 77,105 267,294<BR> # intro section <BR> rect /internet/project/intro.html 308,109 506,175<BR> # service section<BR> rect /internet/project/service.html 313,239 505,290<BR> # register section<BR> rect /internet/project/register.html 311,346 498,397<BR> # just tricky way<BR> circle /internet/project/area.html 152,359 100,100<BR> ----------------------------------------------------<BR> 로 되어 있는데 의미는 쉽게 이해가 갈 테지만 예를 들어 rect /i<BR> nternet/project/woman.html 77,105 267,294의 의미는 그림에서 왼<BR> 쪽 위 가장자리가 77,105이고 오른쪽 밑의 위치가 267,294인 사각<BR> 형 안에서 마우스를 클릭하면 /internet/project/woman.html이라<BR> 는 HTML파일을 불러라 라는 의미이다. <BR> circle /internet/project/area.html 152,359 100,100은 그 지정 영<BR> 역 중심점이 152,359이고, 가로, 세로 반지름이 100,100인 타원형 <BR> 지점 중에서 마우스를 클릭하면 /internet/project/area.html를 부<BR> 르라는 의미이다. 이중에서 아무 위치도 아닌 곳에서 클릭되면, d<BR> efault에 의해 /internet/project/none.html이 불려지게 된다. 이제 <BR> 다시 그림을 새로 그려서 즐겨 보기 바란다. 이제는 그럼 이런 C<BR> GI 프로그램을 어떻게 만드는지에 대해서 궁금할 것이고 서두에 <BR> 설명되었듯이 CGI 프로그램은 사용자에게서 입력을 받아서 자신<BR> 이 만든 정보를 HTML로 보내는 것이 주임무이기 때문에 UNIX<BR> 에서는 표준 입력(stdin)을 받아서 표준 출력(stdout)으로 HTML <BR> 문서를 내보내는 프로그램을 만들면 된다.<BR> .......... <BR><BR><BR></div>
<!-- System - START -->
<!-- System - END -->
<div class="container_postbtn #post_button_group">
<div class="postbtn_like"><script>window.ReactionButtonType = 'reaction';
window.ReactionApiUrl = '//solaromi.tistory.com/reaction';
window.ReactionReqBody = {
entryId: 2331
}</script>
<div class="wrap_btn" id="reaction-2331" data-tistory-react-app="Reaction"></div><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-thumbnail-url="https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png" data-title="[HTML] WWW이 기가 막혀! (11)-HTML문서(6)" data-description="------------------------------------ 제 목 : [9510]www가 기가막혀(12) ------------------------------------ 열한 번째 예제 어떤 웹 사이트를 가보면 자신의 웹에 대한 만족도를 상.중/하 로 매겨 달라고 즉 라디오 버튼으로 제공하는 사람들도 있지만 대개는 다음 예에서 보는 바와 같이 글자를 쓸 수 있는 흑판을 제공해서 사람들이 의견을 제시할 수 있도록 제공하고 있다. 이 러한 흑판을 웹에서는 textarea라고 부르며 와 같이 줄과 열의 수를 지정할 수 있다. ----------- EXAMPLE11.HTML ----------------------- Fill-Out Form Example #11 Fill-Out Form Example .." data-profile-image="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" data-profile-name="松巖" data-pc-url="https://solaromi.tistory.com/2331" data-relative-pc-url="/2331" data-blog-title="솔아로미"><span class="ico_postbtn ico_share">공유하기</span></button>
<div class="layer_post" id="tistorySnsLayer"></div>
</div><div class="wrap_btn wrap_btn_etc" data-entry-id="2331" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button>
<div class="layer_post" id="tistoryEtcLayer"></div>
</div></div>
<button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="974711" data-url="https://solaromi.tistory.com/2331" data-device="web_pc" data-tiara-action-name="구독 버튼_클릭"><em class="txt_state"></em><strong class="txt_tool_id">솔아로미</strong><span class="img_common_tistory ico_check_type1"></span></button> <div data-tistory-react-app="SupportButton"></div>
</div>
<!-- PostListinCategory - START -->
<div class="another_category another_category_color_gray">
<h4>'<a href="/category/%EB%82%B4%EB%B0%9C%EC%9E%90%EA%B5%AD%5B%EB%8F%99%ED%98%B8%ED%9A%8C%5D">내발자국[동호회]</a>' 카테고리의 다른 글</h4>
<table>
<tr>
<th><a href="/2333">[HTML] WWW이 기가 막혀! (13)-HTML문서(8)</a> <span>(0)</span></th>
<td>1996.03.18</td>
</tr>
<tr>
<th><a href="/2332">[HTML] WWW이 기가 막혀! (12)-HTML문서(7)</a> <span>(0)</span></th>
<td>1996.03.18</td>
</tr>
<tr>
<th><a href="/2330">[HTML] WWW이 기가 막혀! (10)-HTML문서(5)</a> <span>(0)</span></th>
<td>1996.03.18</td>
</tr>
<tr>
<th><a href="/2329">[HTML] WWW 이 기가 막혀! (9)-HTML문서(4)</a> <span>(0)</span></th>
<td>1996.03.18</td>
</tr>
<tr>
<th><a href="/1043">[기사] WWW 이 기가 막혀! (5)(6)(9)~(13)</a> <span>(0)</span></th>
<td>1996.03.18</td>
</tr>
</table>
</div>
<!-- PostListinCategory - END -->
</div>
<!-- close article -->
<div class="author">
<span class="text">posted by</span>
松巖
</div>
<!-- 태그트레일 -->
<div class="actionTrail">
<a href="#tb" onclick="" title="트랙백" class="wrapTrackback">
</a>
<a href="#rp" onclick="" title="댓글" class="wrapComment">
</a>
</div>
<!-- 트랙백 -->
<div data-tistory-react-app="Namecard"></div>
</div>
</div><!-- close entry -->
<!-- 페이지 -->
</div>
<!-- close content -->
</div>
<!-- close body --><hr/>
<div id="footer">
<!-- 푸터메뉴 -->
<div id="footMenu">
<!-- RSS 링크 -->
<div id="btnRSS">
<a href="https://solaromi.tistory.com/rss" onclick="window.open(this.href); return false" title="솔아로미 구독하기">RSS FEED</a>
</div>
</div>
<!-- 카피라이트 -->
<div id="copyright">
<a href="https://solaromi.tistory.com/">松巖</a>'s Blog is powered by <a href="http://daum.net" onclick="window.open(this.href); return false" title="Daum 바로가기">DAUM</a>
/ designed by <a href="http://www.tistory.com" title="Tistory 바로가기">TISTORY</a>
</div>
</div>
<!-- close footer -->
</div>
</div>
<!-- close container /container2 -->
<div class="#menubar menu_toolbar ">
<h2 class="screen_out">티스토리툴바</h2>
</div>
<div class="#menubar menu_toolbar "></div>
<div class="layer_tooltip">
<div class="inner_layer_tooltip">
<p class="desc_g"></p>
</div>
</div>
<div id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px"></div>
<!-- CallBack - START -->
<script> (function () {
var blogTitle = '솔아로미';
(function () {
function isShortContents () {
return window.getSelection().toString().length < 30;
}
function isCommentLink (elementID) {
return elementID === 'commentLinkClipboardInput'
}
function copyWithSource (event) {
if (isShortContents() || isCommentLink(event.target.id)) {
return;
}
var range = window.getSelection().getRangeAt(0);
var contents = range.cloneContents();
var temp = document.createElement('div');
temp.appendChild(contents);
var url = document.location.href;
var decodedUrl = decodeURI(url);
var postfix = ' [' + blogTitle + ':티스토리]';
event.clipboardData.setData('text/plain', temp.innerText + '\n출처: ' + decodedUrl + postfix);
event.clipboardData.setData('text/html', '<pre data-ke-type="codeblock">' + temp.innerHTML + '</pre>' + '출처: <a href="' + url + '">' + decodedUrl + '</a>' + postfix);
event.preventDefault();
}
document.addEventListener('copy', copyWithSource);
})()
})()</script>
<!-- CallBack - END -->
<!-- DragSearchHandler - START -->
<script src="//search1.daumcdn.net/search/statics/common/js/g/search_dragselection.min.js"></script>
<!-- DragSearchHandler - END -->
<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-9b39e501cfa58eeb992c6807fdf4fea5b7937b59/static/script/common.js"></script>
<script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script>
<script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script>
<script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"974711-2331","customProps":{"userId":"0","blogId":"974711","entryId":"2331","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"2331","entryTitle":"[HTML] WWW이 기가 막혀! (11)-HTML문서(6)","entryType":"POST","categoryName":"내발자국[동호회]","categoryId":"449181","serviceCategoryName":null,"serviceCategoryId":null,"author":"706554","authorNickname":"松巖","blogNmae":"솔아로미","image":"","plink":"/2331","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script>
<script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script>
<script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script>
<script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script>
</body>
</html>
제 목 : [9510]www가 기가막혀(12)
------------------------------------
열한 번째 예제
어떤 웹 사이트를 가보면 자신의 웹에 대한 만족도를 상.중/하
로 매겨 달라고 즉 라디오 버튼으로 제공하는 사람들도 있지만
대개는 다음 예에서 보는 바와 같이 글자를 쓸 수 있는 흑판을
제공해서 사람들이 의견을 제시할 수 있도록 제공하고 있다. 이
러한 흑판을 웹에서는 textarea라고 부르며 와 같이 줄과
열의 수를 지정할 수 있다.
----------- EXAMPLE11.HTML -----------------------
Fill-Out Form Example #11
This is another fill-out form example, with multiline text entry
areas.
---------------------------------------------
그림 파일명 : 14ex11.gif 그림 파일명 : 14ex11r.gif
----- <그림 12> example11.html 수행한 예 ---------------
열두 번째 예
뒤에 sensitive map이라는 구조를 보겠지만 CGI를 이용해서 화
면에서 마우스가 클릭한 좌표를 알아낼 수 있다. 일단 좌표를 알
아내면 좌표를 이용하여 버튼의 위치에 해당하면 원하는 action
을 할 수 있게 된다. 아무튼 와 같이 쓰면 externals
/smarr-small.gif파일을 읽어서 화면에 표시하고 마우스로 클릭하
면 그 위치를 서버의 프로그램에게 넘겨주게 된다.
-------- EXAMPLE12.HTML --------------------------
Fill-Out Form Example #12
This is another fill-out form example, with image maps.
그림 파일명 : 14ex12.gif 그림 파일명 : 14ex12r.gif
----- <그림 13> example12.html 수행한 예 ---------------
열세 번째 예제
이번에는 입력을 받을 때 어떤 입력 요소는 감추고 입력을 하
고 싶을 때의 예를 보이기로 한다. ME="hidden element#1" VALUE="blah">와 같이 쓰면 사용자에
게는 안 보이지만 실제로 서버측의 프로그램에게 전해지게 된다.
하지만 netscape에 있는 view source라는 메뉴를 고르게 되면 쉽
게 알 수 있다.
-------- EXAMPLE13.HTML --------------------------