110 pending comments from Eric, Phil, Eric, Eric, Eric are awaiting approval.
Jace 2008-02-29 02:17:17
현석님이 bass를 연주하셨었구나... 한때 머리를 길었던 자로서 동경합니다.
윤정근 2008-02-27 03:18:18
뉴건담~
신현상 2008-02-26 20:11:11
택배왔다! 백식하고 뉴건담 중 하나 고르셈!! 아마 선택하기 어려울 것임... ㅋㅋ
이군 2008-02-26 04:19:19
당신은 웹의 선구자들 중의 한명! 각종 언론과 서적에 자주 비치는 당신! 욕심쟁이 우후훗!!
강군 2008-02-24 07:22:22
현석님 IE 를 제외하곤 헤더에 오류 코드를 인식하지 않는 가요 ? 아님 오류코드를 인식하지 않는 브라우져가 정상인가요 ? HTTP/1.0 403 을 주었는데.. IE를 제외하곤 전부 오류코드를 무시하는 것 같습니다. 혹시 오류코드를 인식하게 하는 방법이 없을까요?
2008-02-20 21:12:12
글은 도배 하셔도 상관 없습니다. ㅎㅎ
2008-02-20 21:12:12
버튼 요소가 쓰기가 참 애매한 요소 같습니다. 스펙에서는 스크립팅과 같이 사용하는 것을 얘기 하고 있는데 이 부분은 저도 좀 혼란스럽네요.
강군 2008-02-20 06:21:21
그냥 폼의 상단에 전송 버튼 하나를 추가 배치했습니다. 폼이 넓게 쓰이다 보니 상단에도 전송버튼이 있는 것에 문제가 없겠지요. ? 문제가 생길려나 ? 오늘도 도배를 하고 갑니다. ^^ 누군가 글을 많이 남기면 ~ 도배 하는 것을 삼가하도록 하겠습니다. ^^
강군 2008-02-20 05:20:20
DTD 표기대로라면 button 인것 같은데... 어쩔수 없이 하위 호환성을 위하여 input type=submit 가 있는 것 같은데요.
강군 2008-02-20 05:20:20
button 값에 대한 전송 방법이 ie는 버전별로 지 맘대로 전송하네요. button 을 쓰면 아무래도 input 과 결합하지 않아 css 에서 편할텐데...나 참..
강군 2008-02-20 05:20:20
그리고 <button type='submit' name='zzz' value='xxx'>바부</button> 일때 ie는 희안하게도 value 값 전송이 아닌 innerText 를 전송하네요. 혹시 이걸 말씀하셨던 거였나요 ?
강군 2008-02-20 05:20:20
단 ie 3 에선 안 보이네요..button 이..
강군 2008-02-20 05:20:20
DTD 에 보니... button 에 type 설정이 되어 있던데..
강군 2008-02-20 05:20:20
현석님 ~ <input type='submit' 가 아니라 <button type='submit' 가 맞는게 아닌가요 ?
강군 2008-02-20 03:18:18
Enterkey 를 누르면 어디서든 폼이 전송되는 이걸 막기 위해선 자바스크립트 없이는 불가능 한가요 ?
강군 2008-02-20 02:17:17
폼에 submit 이 있어야 submit이 되는 거지 input 상태에서도 엔터키를 누르면 submit 되게 만든 이건 잘못되었다고 생각합니다.
강군 2008-02-20 02:17:17
저 밑에 현석님께서 말씀하신 뜻을 이제야 이해하겠네요. 버튼을 클릭하지 않을 때는 IE는 submit 값을 전송하지 않네요. 즉 말하자면 모든 입력도 input submit 인데.. 이건 브라우져 모두가 잘못된게 아닐런지 !! 소송 걸고 싶습니다.
강군 2008-02-20 02:17:17
아 ~ 안되네요. 생각대로 tabindex 가 안되네요. 정말 황당하게 되어 버렸네요.
강군 2008-02-20 02:17:17
[취소] [전송] 이 submit 이고 폼 안에 input 이 하나인 경우에 ~ 엔터를 치면 tabindex 가 없으면 첫번째 취소 submit 를 click 이벤트가 활성화 됩니다. 근데 tabindex 가 있는 경우에는 우선 순위의 submit가 전송되네요. 예전부터 tabindex가 있었지만 ~ 기본에 충실하지 않고 JavaScript 으로 하던 그것을 버리지 못한 ~ 쯧쯧 참으로 제가 어처구니가 없습니다. 아직도 폼의 전송을 막기위해서 key 13을 체크하는 어리석은 사람들이 많은데.. tabindex을 유용하게 사용한다면 이런문제가 없을 거라 생각됩니다. ^^
강군 2008-02-20 02:17:17
너무 복잡하게 생각했네요. tabindex 가 있었네요.
강군 2008-02-20 02:17:17
혹시 submit button 우선순위에 대한 뾰족한 해결 방법이 없을 까요 ?
강군 2008-02-20 02:17:17
현석님 ~ submit 버튼이 여러개 일때 ~ 문제가 생기네요. 우선 순위를 결정해 줘야 할 듯 한데요.
dohoons 2008-02-19 08:23:23
이름, 내용 달랑 두개 (....) 스팸 쌓이면 어떻게 되나연.. 우왕ㅋ굳ㅋ
dohoons 2008-02-19 08:23:23
오.. 여긴 상당히 신선한 코멘트 공간이군요
강군 2008-02-19 06:21:21
넵 ~ ~ ^^ ..저두 공부 많이 하고 있습니다. 하여튼 이 사이트의 녹색불은 참 감명 깊은데... 이 내용란을 input 으로 한 것이 안탁깝습니다. textarea 로 했다면 좀 더 편했을 건데요. ^^ 삭제가 안되는 것도 맘에 듭니다.
2008-02-19 05:20:20
아~ 저도 input type image가 좋은 용도로 쓰일수 있다는 것에는 동감합니다. image input에 대한 얘기를 한 것이 아니라요. 다른 브라우저들은 좌표값 외에 name value 쌍의 값도 전송해 주는데 유독 IE만 전송하지 않는 것을 얘기한 것입니다. 글로 이야기 하다 보니 서로 잘못 이해한 부분이 있는 것 같습니다. 강군님 덕분에 많은 생각을 하게 됐고 공부도 많이 됐습니다. 감사합니다. 또 좋은 토론거리 있으면 올려 주세요. :)
강군 2008-02-19 04:19:19
아 ~ 그리고 주소 지도에 대한 것만 했는데 예제가 하나 더 있네요. 색상입니다. RGB 컬러를 이미지로 해두고 해당하는 위치를 클릭합니다. 무슨 색을 선택했는지... 물런 보조수단으로 RGB값 입력상자도 필요하겠죠. 그 옆에는 전송버튼도 필요하구요. 이미지를 클릭했을때는 ~ 만약 submit 버튼의 이름이 설정되어 있는지 체크해서 있다면 설정 없다면 image 에 선택된 RGB 값이 있다면 그걸 선택하면 되겠죠.
아 ^^ 정말 많이 적었군요. 생각의 차이일수도 있을 겁니다. 하여튼 제 생각엔 변함없이 image input submit type은 훌령하다고 생각됩니다. 다만 이것이 graphical submit hidden input 이었다면 더 좋았겠죠...^^ 이렇게 논쟁이 필요없을 테니깐요.
강군 2008-02-19 03:18:18
그리고 ~ 키보드를 사용하는 사람들을 위하여 전송버튼도 하나 만들어 두어 이미지를 클릭했는지 전송 버튼을 클릭했는지 여부를 알 수 있을겁니다.
강군 2008-02-19 03:18:18
그리고 캡차(처음 들어본 용어라..^^)를 검색해보니 이미지를 보고 입력이라고 생각할게요. 사실 포인팅을 하는 것이 더 났지 않을 런지...물런 대체수단은 있어야 한다고 생각합니다. 모눈종이 방식이죠. 즉 이미지를 불러올때 모눈종이처럼 좌표값이 있는 이미지를 불러와 해당하는 'A'가 있는 이미지 좌표값을 입력하라고 하는 거죠. 물런 이 경우 좌표값입력은 보조수단이라 생각합니다. 서버에선 입력 활당 시간마다 랜덤으로 바꿔줘야 겠죠.
강군 2008-02-19 03:18:18
만약 이 경우를 무시한 경우라면 이미지 서브밋 버튼은 잘못 짜여진 type 이라 생각됩니다. w3c 가 여유롭게 각 브라우져를 위하여 button type 을 제공하는 것이 javascript 남발에 대한 쓰잘데기 없는 것이지 image type 버튼은 절대 잘 못 만들어진 node 가 아니라 생각합니다.
강군 2008-02-19 03:18:18
그리고 참고로 image 타입을 클릭했을때는 php 인 경우 이미지이름_x=위치, 이미지이름_y=위치, 다른 입력값이 있는 경우 다른 입력값을 같이 전송해줍니다. 단 !! submit 버튼의 값들은 이미지 서브밋을 클릭했으므로 전송하지 않습니다.
강군 2008-02-19 03:18:18
포인팅기기는 대체수단입니다. 일일이 주소를 키보드로 입력하시는 분들보다 자기동네를 전도에서 한번에 클릭하시는 분이 더 많을 거라 생각합니다. 지도에서 자기의 동네를 한번 클릭함으로 AJAX 에서 자동으로 주소를 불러와 주소입력란을 맞추어 줍니다. (자바스크립트가 아닌 경우 휴대폰 키패드에 약하신 분들은 더욱 편리하게 사용가능..) 물런 그 지도 밑에는 주소입력란이 있어 키보드 사용자를 위하여 대체해둡니다. 이런 경우 ~ 좌표입력은 상당히 편리한 능력으로 사용될거라 짐작합니다.
강군 2008-02-19 03:18:18
그리고 이미지 서브밋인 경우 다른 텍스트 서브밋의 전송 버튼은 클릭되어선 안됩니다. 왜냐면 스텝으로 이용될 수도 있기 때문이죠. 즉 텍스트 서브밋이 3개있고 이미지 서브밋이 한개이면 이미지서브밋 클릭했을땐 그 이미지 서브밋의 이름값과 좌표값이 넘어오고 텍스트 서브밋을 클릭한 경우 텍스트 서브밋의 이름과 버튼이름이 전송되어야 하죠. 물런 IE(Multiple IE Serize) 와 Opera, FF 에서 테스트 한 결과 동일하게 작동합니다. 단지 전송을 위하여 사용한다면 좌표값 Submit 이 아닌 일반버튼 Submit 을 사용하는 것이라 생각됩니다.
강군 2008-02-19 03:18:18
포인팅 기기가 아니어도 전송은 되어야 한다는 것에는 동감합니다만...좌표를 넘기기 전에 폼의 SELECT 와 HIDDEN , CHECK 값과 동시에 좌표를 요구한다면요 ? 무조건 키보드로만 모든 작업을 끝낼 수 있어야 한다에는 동감하지 않습니다. (물런 그것은 키보드에 능숙한 사람들의 생각이 아닐런지...저같은..) 하지만 장애를 가지신 분, PDA, 다른 모바일 기기,휴대폰(키패드 자체로 커서가 가능)등은 포인팅으로 하는 작업이 더 수월할 수도 있습니다. 키보드의 포커스로 모든 영역을 이동하여 돌아 온다는 것은 이미 포인팅 기기가 있고 키보드를 사용하는 사람들의 생각이 아닐까요 ? 물런 다른 대체 수단은 필요할 겁니다. 경우에 따라서... 이미지 버튼은 말씀하신데로 폼을 전송하기 위하여 구현했으며 좌표값을 넘기는 경우에만 사용해서는 안됩니다. 밑에 좌표이야기만 했는지 모르겠지만...좌표와 동시에 입력이 필요한 경우이죠. 일일이 타자를 치는 것보다 더 편한것은 한번의 클릭일 수도 있습니다. 키보드로 서밋을 할 수 있게 만들 어 놓은 이미지 서브밋은 W3C의 최소한의 배려가 아닐런지요. 무조건 전송을 불가능하게 하는 것보다 ... 손가락 장애를 가지신 분이 이미지 위치 클릭하는 것이 편할까요. 입으로 일일이 주소를 치는 것이 편할까요 ? 보조역활로 이미지 서브밋은 훌령한 역활을 할거라 생각합니다. 단 포인터 좌표만의 전송이 아닌 포인트 좌표를 필요로 하는 부과적인 요소인 타입으로 보는 것이 적절하지 않을 까 생각합니다.
2008-02-19 02:17:17
캡차는 말씀하신 것처럼 문제점을 내포하고 있어서 사용에 유의하여야 하는 기능이라고 생각합니다. 야후나 구글은 캡차를 사용했어도 다른 대체 수단을 같이 제공하고 있죠.
2008-02-19 02:17:17
이미지 서밋 버튼이라고 하여도 포인팅 기기가 아닌 키보드로도 서밋을 할 수 있게 되어 있습니다. 좌표값만을 사용하는 기능으로 고안되지 않은 것입니다.
2008-02-19 02:17:17
좌표를 넘기는 기능은 폼을 사용하지 않아도 서버측 이미지 맵을 사용하면 됩니다. 그래픽 서밋 버튼은 폼을 서밋하기 위한 용도로 고안된 것이기 때문에 좌표값을 넘기는 경우에만 사용해야 한다고 보기는 힘듭니다. 그렇게 봤을때 서밋 버튼도 폼안의 컨트롤인데 다른 컨트롤에서는 제공되는 값을 사용할 수 없는 것이 구현이 덜 된 것으로 여겨지는 것입니다.
강군 2008-02-19 01:16:16
그리고 문자열 submit 과 포인터 submit 은 ~ 항상 찍은 값에 대한 값이 넘어가야 한다고 생각합니다. 즉 이미지를 찍었다면 이미지 x,y 지점이 넘어가야 하고.. 문자열 submit 버튼을 클릭했다면 문자열 submit 버튼의 값이 넘어가는 것이 맞지 않을까요 ? 즉 액션이 취한 값을 넘겨야 하지 액션이 없는 데 값을 넘기는 것은 올바른 전송방법이 아니라고 생각합니다.
강군 2008-02-19 01:16:16
다음은 보니 계산을 하라고 하던데...제가 워낙에 계산을 못하시는 분들은 많이 보아서 (^^) 이런건 정말 아니라고 생각됩니다. 즉 쉽게는 더하기 어렵게는 곱하기를 못하는 사람은 카페에 가입도 하지 말라는 말씀...이런건 하루 빨리 고쳐져야 한다고 봅니다.
강군 2008-02-19 01:16:16
말씀하신대로 graphical submit button 이지 text submit button 이 아니라고 생각합니다. 포인트 x,y 를 넘겨주는 즉 type=image 이지 이걸 type=submit 처럼 단순히 버튼이라 생각하시는 것보다 type=image 즉 이미지 Binary 를 넘겨주는 것보다 x,y 를 넘겨주는 것이 훌령하다고 생각됩니다. 예를 들면 요즘 image 를 문자열로 노출해서 안에 있는 글자를 입력하라고 하는데..서버의 이미지 만들기의 낭비벽이 아닐런지.. 이럴때 image 의 xy 지점 즉 이미지 안에 동그라미,세모,네모가 있고 해당하는 문자열을 찍어 달라고 한 후 그 x,y 지점을 계산해서 올바른 위치를 찍었는지 노출하는 것이 제대로 된 사용법이 아닐런지요. 그림을 좀 복잡하게 만들어 A-Z 가-하 까지 만들어 놓고(물런 이미지는 서너장을 써서) 이미지의 포인트를 찍어 해당하는 포인트가 맞는 경우 저장 아닌 경우 다른 프로그램의 무분별한 등록..등 이미지를 단순한 버튼이 아닌 이미지 포인트 서브밋이라 생각하는 것이 옳지 않을 까요 ? 그럼 name 과 value 가 없다는 생각은 버릴테니깐요. 즉 value 가 x,y 좌표가 되니깐요.
2008-02-18 23:14:14
type image의 경우도 서밋버튼(graphical submit button)이기 때문에 값을 전송할 수 있어야 할 것 같습니다. image 버튼도 하나의 input 컨트롤이기 때문에 값이 넘어가야 하지 않을까요? 스펙(http://www.w3.org/TR/html4/interact/forms.html#h-17.4.1)에서 x, y 값에 대한 설명만 있고 name, value 값은 넘긴다, 안넘긴다 명시가 안되어 있어서 애매하기는 하네요.
강군 2008-02-18 21:12:12
아 ~ 제가 조만간 사용할 x,y 지점에 대한거 지도 그림을 두고 어디에 사느냐를 묻고 싶을때... 이미지를 쓰는게 적절하지 않은 가 싶습니다. 즉 ~ 대한민국 지도에 서울시 무슨동까지 나오니..우편번호 검색시에 그것이 더 적절하지 않을 까요. 물런 지도에는 다 좌표가 존재해야 겠죠. 누군가 좌표 DB만 있다면 우편번호 검색이 수월 할텐데요.. ^^
강군 2008-02-18 21:12:12
^^ 네.. 이미지는 x,y 지점을 알때만 쓰는 버튼으로 알고 있습니다. 여자의 신체중에 어디를 찍었나..그럴경우.. 물런 value값보다 x,y 지점이 있는게 당연하다고 생각하구요. button타입(단 버튼 노드는 제외) 은 존재의 이유를 모르겠습니다. submit 에 이름을 달고 그위에 CSS 로 백그라운드 그리고 사이즈 border 다 조절해주면 이미지버튼 처럼 보일텐데요. 이미지버튼은 x,y 지점을 알기위해 쓰는게 적절하지 그냥 폼의 데이타 전송으로 적절하진 않다고 생각합니다.
2008-02-18 21:12:12
아, 제가 잠시 착각을 했습니다. submit 버튼이 아니라 image 버튼을 IE6가 지원하지 않습니다. 서밋버튼 쓰다보면 이미지 버튼을 많이 쓰게 되는데 이경우 서밋버튼의 값을 IE가 인식하지 못하는 버그가 있습니다. value의 값이 넘어가지 않고 눌린 좌표가 어레이로 넘어가요.
강군 2008-02-18 20:11:11
클릭한 버튼의 이름=값을 넘기는 것은 당연한 거라 생각합니다. 클릭하지 않은 버튼의 이름=값은 radio 에서 cheked 를 여러개 선택하게 하고 던져주는 거랑 같은게 아닐런지요. 혹 submit 에 대해서 문제점이 있는 브라우져 지적바랍니다. 모바일이라도 괜찮습니다.
강군 2008-02-18 20:11:11
submit 는 ie 3 , ie 4 , ie 5, ie 5.5 ie 6 (Multiple IEs) , ff 2.0.0.12 , opera 9.25 , ie 7 에서 되네요. 모바일이나 그외 브라우져는 아직 테스트를 못해보았습니다. 참고로 프로토타입은 사용하지 않지만 프로토타입의 $() 는 제 임의로 만들어 사용합니다. 프로토타입은 아무래도 저사향 시스템에선 브라우져의 계산이 많아지므로 ~ 될수 있는 한 함수등으로 하고 필요한 경우에는 element 자체를 객체로 사용하고 있습니다.
2008-02-18 08:23:23
프로토타입을 사용해 보셨으면 $()함수가 굉장히 유용하다는 것을 경험하셨을 텐데요. $$()도 같은 개념의 함수인 것 같습니다. getElementsBySelector부터 시작해서 프로토타입의 $()까지 왔는데 제 생각에도 꼭 필요한 함수 같습니다. 스크립트 내용은 저도 내공이 부족해서 잘 모르겠네요. :)
2008-02-18 08:23:23
제 기억에, submit 버튼의 name을 이용하는 방식은 브라우저에서 지원하지 않는 경우가 있습니다. IE6가 그랬던 것 같은데, 해결책으로 사용하신 것과 같이 스크립트를 같이 사용하면 되지만 약간 불안한게 사실이죠.
강군 2008-02-18 01:16:16
그리고 w3c 페이지를 보던중에 $$() 라는 자바스크립트 함수를 보게 되었는데.. Unobtrusive Javascript 방식에서 꼭 필요한 함수더군요. 그거와는 사용법이 틀리지만..$$('div.classname div input.classname') 또는 $$('#idname elementname') 로...사용할 수 있는 함수입니다. 문제점이 있을수도 있으나 보시고 지적해주시기 바랍니다... function $tn(tn,p){var af=[];p=(!p)?document:$(p);if(!tn){af.push(document);return af;}if(tn.charAt(0)=='#'){af.push($(tn.substr(1)));return af;}var cc=tn.indexOf('.'),cs=null;if(cc>-1){cs=tn.substr(cc+1);tn=tn.substr(0,cc);}af=$fnd(p,tn,cs);return af;}function $tns(tn,ps){var fa=[];if(!tn)return fa;if(!ps)ps=document.childNodes;for(var i=0;i<ps.length;i++)fa=fa.concat($tn(tn,ps[i]));return fa;}function $$(a,f){if(!a)return [];var a=a.split(' '),e=null;for(var i=0;i<a.length;i++)e=$tns(a[i],e);if(f&&e.length){for(var i=0;i<e.length;i++){if(e[i])f(e[i]);}}return e;}function $fnd(p,tn,cs){var f=[],e;if(!p)p=document;for(var i=0;i<p.childNodes.length;i++){e=p.childNodes[i];if(e.nodeName.toLowerCase()==tn||!tn){if(cs){if(e.className==cs)f.push(e);}else f.push(e);}f=f.concat($fnd(e,tn,cs));}return f;}
그냥 쓰다 보니 의미전달이 잘 안되는 부분이 있는 것 같아서 핵심은 하나의 폼안에 submit 버튼에 name 속성을 지정해주고 서버에서는 어떤 submit 버튼의 이름값이 존재하는지 체크한후에 응답을 하면 될것 같습니다. cancel,send,diradd 처럼 submit 버튼이 여러개더라도 눌려진 버튼의 이름이 서버로 전송됩니다. 물런 폼안에 값도 같이요.
강군 2008-02-18 01:16:16
^^ 방법을 찾았습니다. input type='submit' name='cancel' value='취소' 입니다. cancel 값이 폼으로 전송된 경우 hidden 으로 숨겨둔 이전 페이지값을 location 해줍니다. (체크 잘해야 할 부분인듯...^^) 그외 다중 카테고리 선택등에도 submit 로 name 값만 바꾸어 서버로 전송을 날립니다. 그럴경우 post,get 에 들어온 폼값을 체크하여 각 값을 수정, 쓰기등에서 다시 재활용합니다. 즉 모바일 같은 곳에서 카테고리선택하다 글이 날라가면 황당하겠죠. post로 받은 값을 다시 content에 넣어 줍니다. subject 도 그렇고.. 자바스크립트가 안되면 전부 서버로 값을 넘깁니다. 자바스크립트가 되는 경우 해당폼의 이름의 값에 적절한 조치(AJAX 나 폼 체크등..)를 합니다. 물런 서버로 넘어온 경우 각 폼의 어떤 버튼이 클릭되었는지도 체크합니다. 하나의 전송에 하나의 폼에 ~필요한 버튼은 input type='submit' 로 다 집어넣습니다. 카테고리 넣고 추가 삭제 역시 POST를 받아가면서 처리하는 거죠. 어떤가요 ? STANDARD 맞는 거 같은 가요 ? ^^
2008-02-17 03:18:18
저라면 취소 버튼을 <a>로 하고 스타일로 모양을 맞췄을 것 같습니다. :)
강군 2008-02-15 03:18:18
[다음으로] [취소] 이렇게 버튼이 두개 있다면 취소는 어떻게 해야 하죠 ? 그렇다고 a 로 할려니 ~ 보기가 흉하고.. 그렇다고 폼을 전송하는 [다음으로] 이걸 a 로 걸면 폼이 전송이 안되고...방법이 있을까요 ?
강군 2008-02-15 03:18:18
현석님 ~ input 버튼은 결국 폼을 전송과 RESET 인데.. reset 이 아닌 link 를 거는 방법은 없을 까요 ?
강군 2008-02-14 21:12:12
마크업은 마크업만이 존재하고 스크립트는 스크립트만이 존재...정말 퍼펙트 하네요. 요즘 그런것이 가능할수 있을 런지....하여튼 자바스크립트를 쓰는걸 밥먹는 것보다 좋아하는 저로서 한번 도전해보아야 겠네요.
강군 2008-02-14 21:12:12
데려 묻는 것에 대하여 반문하게 되네요..ㅋㅋㅋ 아마 표준 휴유증이 시작된것 같습니다.
강군 2008-02-14 21:12:12
Unobtrusive Javascript 뿐만 아니라 스타일도 분리..맞다고 생각합니다. 하지만 좀만 생각하면 알수 있지 않을 까요 ? history.go(-1) 같은 경우 자주쓰이죠 .. 하지만 REFERER 주소를 받아보면 이전페이지는 알수 있습니다. 그것도 잘 요리해주면 이전을 초기페이지로 갈수도 있게 해주고요. 궂이 쓸데없는 자바스크립트는 생략하는게 옳고 필요한 경우 페이지마다 스크립트를 두는것도 옳다고 봅니다. 배보다 배꼽이 커지는 경우가 생기더라도...다만 내공으로 그런걸 감안해주어야 하겠죠.
2008-02-14 19:10:10
Unobtrusive Javascript라고 하는 개념입니다. 스크립트와 마크업이 완전히 분리되는 것을 말합니다. 정답은 없지만, 마크업에 이벤트 핸들러가 없으니 코드도 간결해지고 보기도 편하죠. 반면 간단한 이벤트의 경우 배보다 배꼽이 더 커질 수도 있고요.
강군 2008-02-14 02:17:17
아랫글이 이해가 안될까 싶어 다시 씁니다. w3c에는 마크업만이 되어있고..onclick 같은 이벤트 속성은 없더군요. onclick을 스크립트 파일에서 일일이 지정해야 할까요 ?
강군 2008-02-14 02:17:17
아 분리를 하다보니 onclick 이벤트가 또 문제네요.. w3c 사이트에 보니 onclick='이벤트' 이것보다. id.onclick=function(){....} 이렇게 하는 구문이 보이던데...이것도 자바스크립트로 빼야 할까요 ?
2008-02-14 01:16:16
스크립트도 CSS와 분리를 하는 것이 좋습니다. CSS는 되고 스크립트가 안될때도 고려하면 분리가 완전하게 되겠죠. :)
2008-02-14 01:16:16
onclick='javascript:...'는 폐기된(deprecated) 구문입니다. 바로 쓰시는게 맞아요.
강군 2008-02-14 01:16:16
그리고 자바스크립트에서 대부분 STYLE을 씁니다. style='display:none' 으로 해놓고 자바스크립트에서 display:block 을 해줍니다. 만약에 CSS는 먹히고 JS는 안먹힐 경우 ~ 문제가 발생하지 않을 까요 ?물런 그런 브라우져는 흔치 않지만 만약에 ...이럴 경우 display:none 설정을 JS 로 설정을 해주어야 하는 걸까요 ? JS는 흔히 이벤트 위주의 코드이기에 ~ 난감하기 이를때 없습니다. 어떤 방법이 없을 까요 ?
강군 2008-02-14 01:16:16
onclick='javascript:...' 이 표현이 맞을까요 ? onclick='...' 이런 표현이 맞을까요 ? 궂이 javascript를 다음에서 명시해주던데..그 차이점은 무엇인가요 ? 아무도 글을 안남기길래 들어온 김에 글 남기고 갑니다. ~
2008-02-13 00:15:15
W3C의 마크업 검사 페이지도 폼을 제작할 때 테이블을 사용한 것을 보실 수 있습니다. 무조건 테이블을 빼는게 좋은게 아닌것 같습니다. 하위호환성 문제도 있고요.
강군 2008-02-12 23:14:14
오늘 또 한가지 배웁니다. style을 빼면 ie3에서 볼때 처럼 이뻐야 한다. 음~ table을 너무 안쓰는 것은 죄악이라 생각됩니다. 요즘은 표준이란답시고 무식하게 table을 빼는데...그건 아닌것 같네요.
강군 2008-02-12 22:13:13
다시 맘이 바뀌었습니다. http://validator.w3.org/ 이 사이트에서 p 로 input 버튼 을 감싸는 군요. http://validator.w3.org/ 이 사이트의 마퀴업을 배우는게 좋겠네요.
강군 2008-02-12 22:13:13
그냥 div 로 하기로 맘 먹었습니다. p는 문자 내용을 감쌀때 ...쓰는게 맞겠네요.
강군 2008-02-12 22:13:13
style 이 없을때 p가 여백으로 더욱 참신하게 나옵니다. div보다...하지만 p는 block 중에 문자열에 해당하는 것 같기도 하구요. 문자열이 아닌 글입력 input 을 감쌀때 p를 써도 괜찮을 까요 ?
강군 2008-02-11 21:12:12
동감합니다. 좋은 모범 사이트가 되도록 노력하겠습니다. 그럼 ~ 차후에 제가 만든 사이트에 태클 많이 부탁드립니다.
2008-02-11 21:12:12
아, 그리고 굳이 국내와 국외를 비교한 것은 아니고 국내에는 이러한 것들의 연구가 너무 안되어 있어서 관련 자료가 거의 없거든요. 그래서 자연스럽게 국외 자료를 생각했는데, 국내도 국내 실정에 맞게, 특히나 이 부분은 우리가 더 경험이 많으니까 좋은 자료들이 많이 나왔으면 좋겠습니다.
2008-02-11 21:12:12
말씀하신대로 무조건 스크립트를 쓰지 않아야 한다고 생각하는 것은 아닙니다. 관련해서 Graceful degradation이라는 것과 Progressive Enhancement라는 개념이 있는데, 이러한 것들이 잘 고려되면 스크립트를 쓰든 Active-X를 쓰든 괜찮다고 생각합니다. 단지 요즘은 기본보다 꼼수가 더 중요시되고 있는것 같아서 좀 강하게 말하는 것입니다. :)
강군 2008-02-11 20:11:11
드디어 local 테스트에 녹색불이 오긴 했지만..버려야 할것들...가져가야 할것들...하지만 기초에 충실해지니 더 많은 것이 보이기도 하네요. 자주 들러서 좋은 내용 배워가겠습니다. 스크립트를 과도하게 쓰는걸 나쁘게는 생각하진 않죠 ? 현석님 ~? 다만 스크립트를 쓰더라도 표준에 출력과 입력에 문제를 주지 않아야 된다 이죠 ? 넵 ~ 국내와 해외를 비교하는 것은 또 좀 그러네요. 국내는 국내고 해외는 해외인데 국내가 해외를 따라가는 것은 그렇다고 생각합니다. 다만 표준을 준수하고 그 표준에 맞게 코딩해라 ~ 하지만 표준을 준수 하지 못하면 웹브라우져에 맞게 또 다른 페이지를 제공해줄수도 있는 문제이고..중요한 것은 만드는 사람의 입장이 어떤 것이 정도인가를 생각해보는 것이 좋은 것이 아닌지..
2008-02-11 20:11:11
A2님, 새해 복 많이 받으세요~ :)
2008-02-11 20:11:11
강군님, UI에 스크립트를 과도하게 사용하는 것은 거의 국내에서만 있는 현상이어서 참고 사이트 같은것을 본적이 없네요. 가장 중요한 것은 스크립트 없이 HTML 컨트롤로 기능을 구현하는 것 같습니다. 상황마다 달라서 절대적인 해답은 찾기 힘든 것 같고요. 코멘트 많이 올리셔도 됩니다. :)
A2 2008-02-11 19:10:10
생각나서 들렸습니다. 새해 복 많이 받으세요. ^^
강군 2008-02-10 22:13:13
제가 현석님의 블로그에 코멘트를 남발했네요.. -,.-;; 엥커와 이벤트차이를 절묘하게 이끌수 있는 좋은 방법들 많이 게시해주세요.
강군 2008-02-10 21:12:12
아 ~ 혹시 이것에 대하여 좀 더 자세히 알 수 있는 예제 사이트가 없을 까요 ?
강군 2008-02-10 21:12:12
문제는 AJAX 를 이용한다고 하면 ~STEP 이 필요없을 거구..그걸 파확하는 방법은 ???
강군 2008-02-10 21:12:12
하지만 Standard를 위해서 두 방식을 채택을 해야겠는데..
강군 2008-02-10 21:12:12
고작 글을 쓰는 것 뿐인데.. STEP 을 가지는 것은 -,.-;;...음...
강군 2008-02-10 21:12:12
음 결국 우편번호 선택방식의 폼과 AJAX 두개를 동시에 사용하라는 말씀 -.,-;;
2008-02-10 07:22:22
이런경우 통상적으로는 페이지를 단계적으로 나누는 방법을 사용합니다. 한화면에서 모든 단계를 선택하는 것이 아니라 페이지가 계속 바뀌면서 선택을 하게 되는 것이지요. 우편번호 선택하는 것과도 비슷합니다. 하지만 글쓰는데 카테고리 선택 때문에 폼이 여러 페이지로 나뉜다면 매우 불편하겠죠. AJAX로 UI를 개선하는 아주 좋은 케이스가 될 것 같습니다. :)
강군 2008-02-09 20:11:11
한번에 로딩하기에는 상당히 무리가 있습니다.
강군 2008-02-09 20:11:11
글쓰기에 depth 도 있어서 select -> select -> select 입니다.
강군 2008-02-09 20:11:11
동적 select 그러니깐 AJAX에서 로딩해서 불러와 데이타를 채워주는 부분인데..이게 카테고리가 많습니다. 이건 어떻게 하죠 ???
강군 2008-02-09 01:16:16
onclick 에 대해서 return false 를 쓰면 되는 군요. 너무 어렵게 생각했습니다.
강군 2008-02-09 01:16:16
물런 자바스크립트 없이 만들 수 있습니다. 저는 다만 href의 주소도 중요시 하면서 자바스크립트의 활용성을 더욱 높이고 싶습니다. 그것에 대한 팁이나 다양한 방법은 없는 가요 ? 자바스크립트 없이 만들고 자바스크립트를 얹어라 ~ 하지만 사용자의 편의를 위하여 비밀번호 박스를 페이지 이동하여 입력하는 거와 레이어로 뛰우는거 어느 것이 편할까요 ? 전 두가지 다 이용하고 싶습니다. 물런 자바스크립트가 무력화일 경우 페이지 이동 자바스크립트가 활성일 경우 이 자바스크립트로 이용하고 싶습니다. 그것이 가능하게 하는 여러가지 방법이 있을까요 ?
Jace 2008-02-29 02:17:17
현석님이 bass를 연주하셨었구나... 한때 머리를 길었던 자로서 동경합니다.
윤정근 2008-02-27 03:18:18
뉴건담~
신현상 2008-02-26 20:11:11
택배왔다! 백식하고 뉴건담 중 하나 고르셈!! 아마 선택하기 어려울 것임... ㅋㅋ
이군 2008-02-26 04:19:19
당신은 웹의 선구자들 중의 한명! 각종 언론과 서적에 자주 비치는 당신! 욕심쟁이 우후훗!!
강군 2008-02-24 07:22:22
현석님 IE 를 제외하곤 헤더에 오류 코드를 인식하지 않는 가요 ? 아님 오류코드를 인식하지 않는 브라우져가 정상인가요 ? HTTP/1.0 403 을 주었는데.. IE를 제외하곤 전부 오류코드를 무시하는 것 같습니다. 혹시 오류코드를 인식하게 하는 방법이 없을까요?
글은 도배 하셔도 상관 없습니다. ㅎㅎ
버튼 요소가 쓰기가 참 애매한 요소 같습니다. 스펙에서는 스크립팅과 같이 사용하는 것을 얘기 하고 있는데 이 부분은 저도 좀 혼란스럽네요.
강군 2008-02-20 06:21:21
그냥 폼의 상단에 전송 버튼 하나를 추가 배치했습니다. 폼이 넓게 쓰이다 보니 상단에도 전송버튼이 있는 것에 문제가 없겠지요. ? 문제가 생길려나 ? 오늘도 도배를 하고 갑니다. ^^ 누군가 글을 많이 남기면 ~ 도배 하는 것을 삼가하도록 하겠습니다. ^^
강군 2008-02-20 05:20:20
DTD 표기대로라면 button 인것 같은데... 어쩔수 없이 하위 호환성을 위하여 input type=submit 가 있는 것 같은데요.
강군 2008-02-20 05:20:20
button 값에 대한 전송 방법이 ie는 버전별로 지 맘대로 전송하네요. button 을 쓰면 아무래도 input 과 결합하지 않아 css 에서 편할텐데...나 참..
강군 2008-02-20 05:20:20
그리고 <button type='submit' name='zzz' value='xxx'>바부</button> 일때 ie는 희안하게도 value 값 전송이 아닌 innerText 를 전송하네요. 혹시 이걸 말씀하셨던 거였나요 ?
강군 2008-02-20 05:20:20
단 ie 3 에선 안 보이네요..button 이..
강군 2008-02-20 05:20:20
DTD 에 보니... button 에 type 설정이 되어 있던데..
강군 2008-02-20 05:20:20
현석님 ~ <input type='submit' 가 아니라 <button type='submit' 가 맞는게 아닌가요 ?
강군 2008-02-20 03:18:18
Enterkey 를 누르면 어디서든 폼이 전송되는 이걸 막기 위해선 자바스크립트 없이는 불가능 한가요 ?
강군 2008-02-20 02:17:17
폼에 submit 이 있어야 submit이 되는 거지 input 상태에서도 엔터키를 누르면 submit 되게 만든 이건 잘못되었다고 생각합니다.
강군 2008-02-20 02:17:17
저 밑에 현석님께서 말씀하신 뜻을 이제야 이해하겠네요. 버튼을 클릭하지 않을 때는 IE는 submit 값을 전송하지 않네요. 즉 말하자면 모든 입력도 input submit 인데.. 이건 브라우져 모두가 잘못된게 아닐런지 !! 소송 걸고 싶습니다.
강군 2008-02-20 02:17:17
아 ~ 안되네요. 생각대로 tabindex 가 안되네요. 정말 황당하게 되어 버렸네요.
강군 2008-02-20 02:17:17
[취소] [전송] 이 submit 이고 폼 안에 input 이 하나인 경우에 ~ 엔터를 치면 tabindex 가 없으면 첫번째 취소 submit 를 click 이벤트가 활성화 됩니다. 근데 tabindex 가 있는 경우에는 우선 순위의 submit가 전송되네요. 예전부터 tabindex가 있었지만 ~ 기본에 충실하지 않고 JavaScript 으로 하던 그것을 버리지 못한 ~ 쯧쯧 참으로 제가 어처구니가 없습니다. 아직도 폼의 전송을 막기위해서 key 13을 체크하는 어리석은 사람들이 많은데.. tabindex을 유용하게 사용한다면 이런문제가 없을 거라 생각됩니다. ^^
강군 2008-02-20 02:17:17
너무 복잡하게 생각했네요. tabindex 가 있었네요.
강군 2008-02-20 02:17:17
혹시 submit button 우선순위에 대한 뾰족한 해결 방법이 없을 까요 ?
강군 2008-02-20 02:17:17
현석님 ~ submit 버튼이 여러개 일때 ~ 문제가 생기네요. 우선 순위를 결정해 줘야 할 듯 한데요.
dohoons 2008-02-19 08:23:23
이름, 내용 달랑 두개 (....) 스팸 쌓이면 어떻게 되나연.. 우왕ㅋ굳ㅋ
dohoons 2008-02-19 08:23:23
오.. 여긴 상당히 신선한 코멘트 공간이군요
강군 2008-02-19 06:21:21
넵 ~ ~ ^^ ..저두 공부 많이 하고 있습니다. 하여튼 이 사이트의 녹색불은 참 감명 깊은데... 이 내용란을 input 으로 한 것이 안탁깝습니다. textarea 로 했다면 좀 더 편했을 건데요. ^^ 삭제가 안되는 것도 맘에 듭니다.
아~ 저도 input type image가 좋은 용도로 쓰일수 있다는 것에는 동감합니다. image input에 대한 얘기를 한 것이 아니라요. 다른 브라우저들은 좌표값 외에 name value 쌍의 값도 전송해 주는데 유독 IE만 전송하지 않는 것을 얘기한 것입니다. 글로 이야기 하다 보니 서로 잘못 이해한 부분이 있는 것 같습니다. 강군님 덕분에 많은 생각을 하게 됐고 공부도 많이 됐습니다. 감사합니다. 또 좋은 토론거리 있으면 올려 주세요. :)
강군 2008-02-19 04:19:19
아 ~ 그리고 주소 지도에 대한 것만 했는데 예제가 하나 더 있네요. 색상입니다. RGB 컬러를 이미지로 해두고 해당하는 위치를 클릭합니다. 무슨 색을 선택했는지... 물런 보조수단으로 RGB값 입력상자도 필요하겠죠. 그 옆에는 전송버튼도 필요하구요. 이미지를 클릭했을때는 ~ 만약 submit 버튼의 이름이 설정되어 있는지 체크해서 있다면 설정 없다면 image 에 선택된 RGB 값이 있다면 그걸 선택하면 되겠죠.
강군 2008-02-19 03:18:18
graphical submit hidden input -> 정정 합니다. -> graphical hidden input
강군 2008-02-19 03:18:18
아 ^^ 정말 많이 적었군요. 생각의 차이일수도 있을 겁니다. 하여튼 제 생각엔 변함없이 image input submit type은 훌령하다고 생각됩니다. 다만 이것이 graphical submit hidden input 이었다면 더 좋았겠죠...^^ 이렇게 논쟁이 필요없을 테니깐요.
강군 2008-02-19 03:18:18
그리고 ~ 키보드를 사용하는 사람들을 위하여 전송버튼도 하나 만들어 두어 이미지를 클릭했는지 전송 버튼을 클릭했는지 여부를 알 수 있을겁니다.
강군 2008-02-19 03:18:18
그리고 캡차(처음 들어본 용어라..^^)를 검색해보니 이미지를 보고 입력이라고 생각할게요. 사실 포인팅을 하는 것이 더 났지 않을 런지...물런 대체수단은 있어야 한다고 생각합니다. 모눈종이 방식이죠. 즉 이미지를 불러올때 모눈종이처럼 좌표값이 있는 이미지를 불러와 해당하는 'A'가 있는 이미지 좌표값을 입력하라고 하는 거죠. 물런 이 경우 좌표값입력은 보조수단이라 생각합니다. 서버에선 입력 활당 시간마다 랜덤으로 바꿔줘야 겠죠.
강군 2008-02-19 03:18:18
만약 이 경우를 무시한 경우라면 이미지 서브밋 버튼은 잘못 짜여진 type 이라 생각됩니다. w3c 가 여유롭게 각 브라우져를 위하여 button type 을 제공하는 것이 javascript 남발에 대한 쓰잘데기 없는 것이지 image type 버튼은 절대 잘 못 만들어진 node 가 아니라 생각합니다.
강군 2008-02-19 03:18:18
그리고 참고로 image 타입을 클릭했을때는 php 인 경우 이미지이름_x=위치, 이미지이름_y=위치, 다른 입력값이 있는 경우 다른 입력값을 같이 전송해줍니다. 단 !! submit 버튼의 값들은 이미지 서브밋을 클릭했으므로 전송하지 않습니다.
강군 2008-02-19 03:18:18
포인팅기기는 대체수단입니다. 일일이 주소를 키보드로 입력하시는 분들보다 자기동네를 전도에서 한번에 클릭하시는 분이 더 많을 거라 생각합니다. 지도에서 자기의 동네를 한번 클릭함으로 AJAX 에서 자동으로 주소를 불러와 주소입력란을 맞추어 줍니다. (자바스크립트가 아닌 경우 휴대폰 키패드에 약하신 분들은 더욱 편리하게 사용가능..) 물런 그 지도 밑에는 주소입력란이 있어 키보드 사용자를 위하여 대체해둡니다. 이런 경우 ~ 좌표입력은 상당히 편리한 능력으로 사용될거라 짐작합니다.
강군 2008-02-19 03:18:18
그리고 이미지 서브밋인 경우 다른 텍스트 서브밋의 전송 버튼은 클릭되어선 안됩니다. 왜냐면 스텝으로 이용될 수도 있기 때문이죠. 즉 텍스트 서브밋이 3개있고 이미지 서브밋이 한개이면 이미지서브밋 클릭했을땐 그 이미지 서브밋의 이름값과 좌표값이 넘어오고 텍스트 서브밋을 클릭한 경우 텍스트 서브밋의 이름과 버튼이름이 전송되어야 하죠. 물런 IE(Multiple IE Serize) 와 Opera, FF 에서 테스트 한 결과 동일하게 작동합니다. 단지 전송을 위하여 사용한다면 좌표값 Submit 이 아닌 일반버튼 Submit 을 사용하는 것이라 생각됩니다.
강군 2008-02-19 03:18:18
포인팅 기기가 아니어도 전송은 되어야 한다는 것에는 동감합니다만...좌표를 넘기기 전에 폼의 SELECT 와 HIDDEN , CHECK 값과 동시에 좌표를 요구한다면요 ? 무조건 키보드로만 모든 작업을 끝낼 수 있어야 한다에는 동감하지 않습니다. (물런 그것은 키보드에 능숙한 사람들의 생각이 아닐런지...저같은..) 하지만 장애를 가지신 분, PDA, 다른 모바일 기기,휴대폰(키패드 자체로 커서가 가능)등은 포인팅으로 하는 작업이 더 수월할 수도 있습니다. 키보드의 포커스로 모든 영역을 이동하여 돌아 온다는 것은 이미 포인팅 기기가 있고 키보드를 사용하는 사람들의 생각이 아닐까요 ? 물런 다른 대체 수단은 필요할 겁니다. 경우에 따라서... 이미지 버튼은 말씀하신데로 폼을 전송하기 위하여 구현했으며 좌표값을 넘기는 경우에만 사용해서는 안됩니다. 밑에 좌표이야기만 했는지 모르겠지만...좌표와 동시에 입력이 필요한 경우이죠. 일일이 타자를 치는 것보다 더 편한것은 한번의 클릭일 수도 있습니다. 키보드로 서밋을 할 수 있게 만들 어 놓은 이미지 서브밋은 W3C의 최소한의 배려가 아닐런지요. 무조건 전송을 불가능하게 하는 것보다 ... 손가락 장애를 가지신 분이 이미지 위치 클릭하는 것이 편할까요. 입으로 일일이 주소를 치는 것이 편할까요 ? 보조역활로 이미지 서브밋은 훌령한 역활을 할거라 생각합니다. 단 포인터 좌표만의 전송이 아닌 포인트 좌표를 필요로 하는 부과적인 요소인 타입으로 보는 것이 적절하지 않을 까 생각합니다.
캡차는 말씀하신 것처럼 문제점을 내포하고 있어서 사용에 유의하여야 하는 기능이라고 생각합니다. 야후나 구글은 캡차를 사용했어도 다른 대체 수단을 같이 제공하고 있죠.
이미지 서밋 버튼이라고 하여도 포인팅 기기가 아닌 키보드로도 서밋을 할 수 있게 되어 있습니다. 좌표값만을 사용하는 기능으로 고안되지 않은 것입니다.
좌표를 넘기는 기능은 폼을 사용하지 않아도 서버측 이미지 맵을 사용하면 됩니다. 그래픽 서밋 버튼은 폼을 서밋하기 위한 용도로 고안된 것이기 때문에 좌표값을 넘기는 경우에만 사용해야 한다고 보기는 힘듭니다. 그렇게 봤을때 서밋 버튼도 폼안의 컨트롤인데 다른 컨트롤에서는 제공되는 값을 사용할 수 없는 것이 구현이 덜 된 것으로 여겨지는 것입니다.
강군 2008-02-19 01:16:16
그리고 문자열 submit 과 포인터 submit 은 ~ 항상 찍은 값에 대한 값이 넘어가야 한다고 생각합니다. 즉 이미지를 찍었다면 이미지 x,y 지점이 넘어가야 하고.. 문자열 submit 버튼을 클릭했다면 문자열 submit 버튼의 값이 넘어가는 것이 맞지 않을까요 ? 즉 액션이 취한 값을 넘겨야 하지 액션이 없는 데 값을 넘기는 것은 올바른 전송방법이 아니라고 생각합니다.
강군 2008-02-19 01:16:16
다음은 보니 계산을 하라고 하던데...제가 워낙에 계산을 못하시는 분들은 많이 보아서 (^^) 이런건 정말 아니라고 생각됩니다. 즉 쉽게는 더하기 어렵게는 곱하기를 못하는 사람은 카페에 가입도 하지 말라는 말씀...이런건 하루 빨리 고쳐져야 한다고 봅니다.
강군 2008-02-19 01:16:16
말씀하신대로 graphical submit button 이지 text submit button 이 아니라고 생각합니다. 포인트 x,y 를 넘겨주는 즉 type=image 이지 이걸 type=submit 처럼 단순히 버튼이라 생각하시는 것보다 type=image 즉 이미지 Binary 를 넘겨주는 것보다 x,y 를 넘겨주는 것이 훌령하다고 생각됩니다. 예를 들면 요즘 image 를 문자열로 노출해서 안에 있는 글자를 입력하라고 하는데..서버의 이미지 만들기의 낭비벽이 아닐런지.. 이럴때 image 의 xy 지점 즉 이미지 안에 동그라미,세모,네모가 있고 해당하는 문자열을 찍어 달라고 한 후 그 x,y 지점을 계산해서 올바른 위치를 찍었는지 노출하는 것이 제대로 된 사용법이 아닐런지요. 그림을 좀 복잡하게 만들어 A-Z 가-하 까지 만들어 놓고(물런 이미지는 서너장을 써서) 이미지의 포인트를 찍어 해당하는 포인트가 맞는 경우 저장 아닌 경우 다른 프로그램의 무분별한 등록..등 이미지를 단순한 버튼이 아닌 이미지 포인트 서브밋이라 생각하는 것이 옳지 않을 까요 ? 그럼 name 과 value 가 없다는 생각은 버릴테니깐요. 즉 value 가 x,y 좌표가 되니깐요.
type image의 경우도 서밋버튼(graphical submit button)이기 때문에 값을 전송할 수 있어야 할 것 같습니다. image 버튼도 하나의 input 컨트롤이기 때문에 값이 넘어가야 하지 않을까요? 스펙(http://www.w3.org/TR/html4/interact/forms.html#h-17.4.1)에서 x, y 값에 대한 설명만 있고 name, value 값은 넘긴다, 안넘긴다 명시가 안되어 있어서 애매하기는 하네요.
강군 2008-02-18 21:12:12
아 ~ 제가 조만간 사용할 x,y 지점에 대한거 지도 그림을 두고 어디에 사느냐를 묻고 싶을때... 이미지를 쓰는게 적절하지 않은 가 싶습니다. 즉 ~ 대한민국 지도에 서울시 무슨동까지 나오니..우편번호 검색시에 그것이 더 적절하지 않을 까요. 물런 지도에는 다 좌표가 존재해야 겠죠. 누군가 좌표 DB만 있다면 우편번호 검색이 수월 할텐데요.. ^^
강군 2008-02-18 21:12:12
^^ 네.. 이미지는 x,y 지점을 알때만 쓰는 버튼으로 알고 있습니다. 여자의 신체중에 어디를 찍었나..그럴경우.. 물런 value값보다 x,y 지점이 있는게 당연하다고 생각하구요. button타입(단 버튼 노드는 제외) 은 존재의 이유를 모르겠습니다. submit 에 이름을 달고 그위에 CSS 로 백그라운드 그리고 사이즈 border 다 조절해주면 이미지버튼 처럼 보일텐데요. 이미지버튼은 x,y 지점을 알기위해 쓰는게 적절하지 그냥 폼의 데이타 전송으로 적절하진 않다고 생각합니다.
아, 제가 잠시 착각을 했습니다. submit 버튼이 아니라 image 버튼을 IE6가 지원하지 않습니다. 서밋버튼 쓰다보면 이미지 버튼을 많이 쓰게 되는데 이경우 서밋버튼의 값을 IE가 인식하지 못하는 버그가 있습니다. value의 값이 넘어가지 않고 눌린 좌표가 어레이로 넘어가요.
강군 2008-02-18 20:11:11
클릭한 버튼의 이름=값을 넘기는 것은 당연한 거라 생각합니다. 클릭하지 않은 버튼의 이름=값은 radio 에서 cheked 를 여러개 선택하게 하고 던져주는 거랑 같은게 아닐런지요. 혹 submit 에 대해서 문제점이 있는 브라우져 지적바랍니다. 모바일이라도 괜찮습니다.
강군 2008-02-18 20:11:11
submit 는 ie 3 , ie 4 , ie 5, ie 5.5 ie 6 (Multiple IEs) , ff 2.0.0.12 , opera 9.25 , ie 7 에서 되네요. 모바일이나 그외 브라우져는 아직 테스트를 못해보았습니다. 참고로 프로토타입은 사용하지 않지만 프로토타입의 $() 는 제 임의로 만들어 사용합니다. 프로토타입은 아무래도 저사향 시스템에선 브라우져의 계산이 많아지므로 ~ 될수 있는 한 함수등으로 하고 필요한 경우에는 element 자체를 객체로 사용하고 있습니다.
프로토타입을 사용해 보셨으면 $()함수가 굉장히 유용하다는 것을 경험하셨을 텐데요. $$()도 같은 개념의 함수인 것 같습니다. getElementsBySelector부터 시작해서 프로토타입의 $()까지 왔는데 제 생각에도 꼭 필요한 함수 같습니다. 스크립트 내용은 저도 내공이 부족해서 잘 모르겠네요. :)
제 기억에, submit 버튼의 name을 이용하는 방식은 브라우저에서 지원하지 않는 경우가 있습니다. IE6가 그랬던 것 같은데, 해결책으로 사용하신 것과 같이 스크립트를 같이 사용하면 되지만 약간 불안한게 사실이죠.
강군 2008-02-18 01:16:16
그리고 w3c 페이지를 보던중에 $$() 라는 자바스크립트 함수를 보게 되었는데.. Unobtrusive Javascript 방식에서 꼭 필요한 함수더군요. 그거와는 사용법이 틀리지만..$$('div.classname div input.classname') 또는 $$('#idname elementname') 로...사용할 수 있는 함수입니다. 문제점이 있을수도 있으나 보시고 지적해주시기 바랍니다... function $tn(tn,p){var af=[];p=(!p)?document:$(p);if(!tn){af.push(document);return af;}if(tn.charAt(0)=='#'){af.push($(tn.substr(1)));return af;}var cc=tn.indexOf('.'),cs=null;if(cc>-1){cs=tn.substr(cc+1);tn=tn.substr(0,cc);}af=$fnd(p,tn,cs);return af;}function $tns(tn,ps){var fa=[];if(!tn)return fa;if(!ps)ps=document.childNodes;for(var i=0;i<ps.length;i++)fa=fa.concat($tn(tn,ps[i]));return fa;}function $$(a,f){if(!a)return [];var a=a.split(' '),e=null;for(var i=0;i<a.length;i++)e=$tns(a[i],e);if(f&&e.length){for(var i=0;i<e.length;i++){if(e[i])f(e[i]);}}return e;}function $fnd(p,tn,cs){var f=[],e;if(!p)p=document;for(var i=0;i<p.childNodes.length;i++){e=p.childNodes[i];if(e.nodeName.toLowerCase()==tn||!tn){if(cs){if(e.className==cs)f.push(e);}else f.push(e);}f=f.concat($fnd(e,tn,cs));}return f;}
강군 2008-02-18 01:16:16
아 ~ 한가지더 submit 버튼마다 자바스크립트를 덮어 버립니다. 말씀하신 Unobtrusive Javascript 방식으로..
강군 2008-02-18 01:16:16
그냥 쓰다 보니 의미전달이 잘 안되는 부분이 있는 것 같아서 핵심은 하나의 폼안에 submit 버튼에 name 속성을 지정해주고 서버에서는 어떤 submit 버튼의 이름값이 존재하는지 체크한후에 응답을 하면 될것 같습니다. cancel,send,diradd 처럼 submit 버튼이 여러개더라도 눌려진 버튼의 이름이 서버로 전송됩니다. 물런 폼안에 값도 같이요.
강군 2008-02-18 01:16:16
^^ 방법을 찾았습니다. input type='submit' name='cancel' value='취소' 입니다. cancel 값이 폼으로 전송된 경우 hidden 으로 숨겨둔 이전 페이지값을 location 해줍니다. (체크 잘해야 할 부분인듯...^^) 그외 다중 카테고리 선택등에도 submit 로 name 값만 바꾸어 서버로 전송을 날립니다. 그럴경우 post,get 에 들어온 폼값을 체크하여 각 값을 수정, 쓰기등에서 다시 재활용합니다. 즉 모바일 같은 곳에서 카테고리선택하다 글이 날라가면 황당하겠죠. post로 받은 값을 다시 content에 넣어 줍니다. subject 도 그렇고.. 자바스크립트가 안되면 전부 서버로 값을 넘깁니다. 자바스크립트가 되는 경우 해당폼의 이름의 값에 적절한 조치(AJAX 나 폼 체크등..)를 합니다. 물런 서버로 넘어온 경우 각 폼의 어떤 버튼이 클릭되었는지도 체크합니다. 하나의 전송에 하나의 폼에 ~필요한 버튼은 input type='submit' 로 다 집어넣습니다. 카테고리 넣고 추가 삭제 역시 POST를 받아가면서 처리하는 거죠. 어떤가요 ? STANDARD 맞는 거 같은 가요 ? ^^
저라면 취소 버튼을 <a>로 하고 스타일로 모양을 맞췄을 것 같습니다. :)
강군 2008-02-15 03:18:18
[다음으로] [취소] 이렇게 버튼이 두개 있다면 취소는 어떻게 해야 하죠 ? 그렇다고 a 로 할려니 ~ 보기가 흉하고.. 그렇다고 폼을 전송하는 [다음으로] 이걸 a 로 걸면 폼이 전송이 안되고...방법이 있을까요 ?
강군 2008-02-15 03:18:18
현석님 ~ input 버튼은 결국 폼을 전송과 RESET 인데.. reset 이 아닌 link 를 거는 방법은 없을 까요 ?
강군 2008-02-14 21:12:12
마크업은 마크업만이 존재하고 스크립트는 스크립트만이 존재...정말 퍼펙트 하네요. 요즘 그런것이 가능할수 있을 런지....하여튼 자바스크립트를 쓰는걸 밥먹는 것보다 좋아하는 저로서 한번 도전해보아야 겠네요.
강군 2008-02-14 21:12:12
데려 묻는 것에 대하여 반문하게 되네요..ㅋㅋㅋ 아마 표준 휴유증이 시작된것 같습니다.
강군 2008-02-14 21:12:12
Unobtrusive Javascript 뿐만 아니라 스타일도 분리..맞다고 생각합니다. 하지만 좀만 생각하면 알수 있지 않을 까요 ? history.go(-1) 같은 경우 자주쓰이죠 .. 하지만 REFERER 주소를 받아보면 이전페이지는 알수 있습니다. 그것도 잘 요리해주면 이전을 초기페이지로 갈수도 있게 해주고요. 궂이 쓸데없는 자바스크립트는 생략하는게 옳고 필요한 경우 페이지마다 스크립트를 두는것도 옳다고 봅니다. 배보다 배꼽이 커지는 경우가 생기더라도...다만 내공으로 그런걸 감안해주어야 하겠죠.
Unobtrusive Javascript라고 하는 개념입니다. 스크립트와 마크업이 완전히 분리되는 것을 말합니다. 정답은 없지만, 마크업에 이벤트 핸들러가 없으니 코드도 간결해지고 보기도 편하죠. 반면 간단한 이벤트의 경우 배보다 배꼽이 더 커질 수도 있고요.
강군 2008-02-14 02:17:17
아랫글이 이해가 안될까 싶어 다시 씁니다. w3c에는 마크업만이 되어있고..onclick 같은 이벤트 속성은 없더군요. onclick을 스크립트 파일에서 일일이 지정해야 할까요 ?
강군 2008-02-14 02:17:17
아 분리를 하다보니 onclick 이벤트가 또 문제네요.. w3c 사이트에 보니 onclick='이벤트' 이것보다. id.onclick=function(){....} 이렇게 하는 구문이 보이던데...이것도 자바스크립트로 빼야 할까요 ?
스크립트도 CSS와 분리를 하는 것이 좋습니다. CSS는 되고 스크립트가 안될때도 고려하면 분리가 완전하게 되겠죠. :)
onclick='javascript:...'는 폐기된(deprecated) 구문입니다. 바로 쓰시는게 맞아요.
강군 2008-02-14 01:16:16
그리고 자바스크립트에서 대부분 STYLE을 씁니다. style='display:none' 으로 해놓고 자바스크립트에서 display:block 을 해줍니다. 만약에 CSS는 먹히고 JS는 안먹힐 경우 ~ 문제가 발생하지 않을 까요 ?물런 그런 브라우져는 흔치 않지만 만약에 ...이럴 경우 display:none 설정을 JS 로 설정을 해주어야 하는 걸까요 ? JS는 흔히 이벤트 위주의 코드이기에 ~ 난감하기 이를때 없습니다. 어떤 방법이 없을 까요 ?
강군 2008-02-14 01:16:16
onclick='javascript:...' 이 표현이 맞을까요 ? onclick='...' 이런 표현이 맞을까요 ? 궂이 javascript를 다음에서 명시해주던데..그 차이점은 무엇인가요 ? 아무도 글을 안남기길래 들어온 김에 글 남기고 갑니다. ~
W3C의 마크업 검사 페이지도 폼을 제작할 때 테이블을 사용한 것을 보실 수 있습니다. 무조건 테이블을 빼는게 좋은게 아닌것 같습니다. 하위호환성 문제도 있고요.
강군 2008-02-12 23:14:14
오늘 또 한가지 배웁니다. style을 빼면 ie3에서 볼때 처럼 이뻐야 한다. 음~ table을 너무 안쓰는 것은 죄악이라 생각됩니다. 요즘은 표준이란답시고 무식하게 table을 빼는데...그건 아닌것 같네요.
강군 2008-02-12 22:13:13
다시 맘이 바뀌었습니다. http://validator.w3.org/ 이 사이트에서 p 로 input 버튼 을 감싸는 군요. http://validator.w3.org/ 이 사이트의 마퀴업을 배우는게 좋겠네요.
강군 2008-02-12 22:13:13
그냥 div 로 하기로 맘 먹었습니다. p는 문자 내용을 감쌀때 ...쓰는게 맞겠네요.
강군 2008-02-12 22:13:13
style 이 없을때 p가 여백으로 더욱 참신하게 나옵니다. div보다...하지만 p는 block 중에 문자열에 해당하는 것 같기도 하구요. 문자열이 아닌 글입력 input 을 감쌀때 p를 써도 괜찮을 까요 ?
강군 2008-02-11 21:12:12
동감합니다. 좋은 모범 사이트가 되도록 노력하겠습니다. 그럼 ~ 차후에 제가 만든 사이트에 태클 많이 부탁드립니다.
아, 그리고 굳이 국내와 국외를 비교한 것은 아니고 국내에는 이러한 것들의 연구가 너무 안되어 있어서 관련 자료가 거의 없거든요. 그래서 자연스럽게 국외 자료를 생각했는데, 국내도 국내 실정에 맞게, 특히나 이 부분은 우리가 더 경험이 많으니까 좋은 자료들이 많이 나왔으면 좋겠습니다.
말씀하신대로 무조건 스크립트를 쓰지 않아야 한다고 생각하는 것은 아닙니다. 관련해서 Graceful degradation이라는 것과 Progressive Enhancement라는 개념이 있는데, 이러한 것들이 잘 고려되면 스크립트를 쓰든 Active-X를 쓰든 괜찮다고 생각합니다. 단지 요즘은 기본보다 꼼수가 더 중요시되고 있는것 같아서 좀 강하게 말하는 것입니다. :)
강군 2008-02-11 20:11:11
드디어 local 테스트에 녹색불이 오긴 했지만..버려야 할것들...가져가야 할것들...하지만 기초에 충실해지니 더 많은 것이 보이기도 하네요. 자주 들러서 좋은 내용 배워가겠습니다. 스크립트를 과도하게 쓰는걸 나쁘게는 생각하진 않죠 ? 현석님 ~? 다만 스크립트를 쓰더라도 표준에 출력과 입력에 문제를 주지 않아야 된다 이죠 ? 넵 ~ 국내와 해외를 비교하는 것은 또 좀 그러네요. 국내는 국내고 해외는 해외인데 국내가 해외를 따라가는 것은 그렇다고 생각합니다. 다만 표준을 준수하고 그 표준에 맞게 코딩해라 ~ 하지만 표준을 준수 하지 못하면 웹브라우져에 맞게 또 다른 페이지를 제공해줄수도 있는 문제이고..중요한 것은 만드는 사람의 입장이 어떤 것이 정도인가를 생각해보는 것이 좋은 것이 아닌지..
A2님, 새해 복 많이 받으세요~ :)
강군님, UI에 스크립트를 과도하게 사용하는 것은 거의 국내에서만 있는 현상이어서 참고 사이트 같은것을 본적이 없네요. 가장 중요한 것은 스크립트 없이 HTML 컨트롤로 기능을 구현하는 것 같습니다. 상황마다 달라서 절대적인 해답은 찾기 힘든 것 같고요. 코멘트 많이 올리셔도 됩니다. :)
A2 2008-02-11 19:10:10
생각나서 들렸습니다. 새해 복 많이 받으세요. ^^
강군 2008-02-10 22:13:13
제가 현석님의 블로그에 코멘트를 남발했네요.. -,.-;; 엥커와 이벤트차이를 절묘하게 이끌수 있는 좋은 방법들 많이 게시해주세요.
강군 2008-02-10 21:12:12
아 ~ 혹시 이것에 대하여 좀 더 자세히 알 수 있는 예제 사이트가 없을 까요 ?
강군 2008-02-10 21:12:12
문제는 AJAX 를 이용한다고 하면 ~STEP 이 필요없을 거구..그걸 파확하는 방법은 ???
강군 2008-02-10 21:12:12
하지만 Standard를 위해서 두 방식을 채택을 해야겠는데..
강군 2008-02-10 21:12:12
고작 글을 쓰는 것 뿐인데.. STEP 을 가지는 것은 -,.-;;...음...
강군 2008-02-10 21:12:12
음 결국 우편번호 선택방식의 폼과 AJAX 두개를 동시에 사용하라는 말씀 -.,-;;
이런경우 통상적으로는 페이지를 단계적으로 나누는 방법을 사용합니다. 한화면에서 모든 단계를 선택하는 것이 아니라 페이지가 계속 바뀌면서 선택을 하게 되는 것이지요. 우편번호 선택하는 것과도 비슷합니다. 하지만 글쓰는데 카테고리 선택 때문에 폼이 여러 페이지로 나뉜다면 매우 불편하겠죠. AJAX로 UI를 개선하는 아주 좋은 케이스가 될 것 같습니다. :)
강군 2008-02-09 20:11:11
한번에 로딩하기에는 상당히 무리가 있습니다.
강군 2008-02-09 20:11:11
글쓰기에 depth 도 있어서 select -> select -> select 입니다.
강군 2008-02-09 20:11:11
동적 select 그러니깐 AJAX에서 로딩해서 불러와 데이타를 채워주는 부분인데..이게 카테고리가 많습니다. 이건 어떻게 하죠 ???
강군 2008-02-09 01:16:16
onclick 에 대해서 return false 를 쓰면 되는 군요. 너무 어렵게 생각했습니다.
강군 2008-02-09 01:16:16
물런 자바스크립트 없이 만들 수 있습니다. 저는 다만 href의 주소도 중요시 하면서 자바스크립트의 활용성을 더욱 높이고 싶습니다. 그것에 대한 팁이나 다양한 방법은 없는 가요 ? 자바스크립트 없이 만들고 자바스크립트를 얹어라 ~ 하지만 사용자의 편의를 위하여 비밀번호 박스를 페이지 이동하여 입력하는 거와 레이어로 뛰우는거 어느 것이 편할까요 ? 전 두가지 다 이용하고 싶습니다. 물런 자바스크립트가 무력화일 경우 페이지 이동 자바스크립트가 활성일 경우 이 자바스크립트로 이용하고 싶습니다. 그것이 가능하게 하는 여러가지 방법이 있을까요 ?
강군 2008-02-09 01:16:16
현석님 ~ 음 href='주소' onclick='될 경우 주소로 이동금지 자바스크립트실행' 가능할까요 ?