달력

32024  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

출처 : http://www.zdnet.co.kr/techupdate/lecture/os/0,39024998,39130016,00.htm

SP2 출시로 인해 윈도우 사용자들은 보안과 설정에 대한 선택권이 보다 넒어졌다. 그러나 기본적인 보안 기능을 강화됨에 따라 웹사이트 개발자들에게는 그 동안 별 문제 없이 사용되던 웹사이트의 기능들이 제한될 수 있다는 점을 유념해야 한다.

윈도우 XP 서비스팩2는 8월 11일 RTM 버전이 출시 되었고, 9월 2일 윈도우 업데이트를 통해 모든 윈도우 XP 사용자에게 배포 되게 된다. 또한, 10월 1일부터는 모든 윈도우 XP를 탑재하는 PC에 기본 탑재돼 출시 된다. 우리 나라가 윈도우 XP 사용자가 해외에 비해 상대적으로 많고, 주요 제한 기능들이 팝업과 액티브X 컨트롤 등 우리 나라에서 큰 거부감 없이 사용되던 기술이어서 갑작스런 변경에 혼란이 야기될 가능성이 있다.

이 글에서는 XP 서비스팩2로 인해 웹사이트에서 발생할 수 있는 주요 기능의 제한점들을 소개하고 이를 보완할 수 있는 해결 방법들을 알려 주고자 한다. 이 방법들은 XP 서비스팩2가 주는 장점들을 제한하는 것이 아니라, 웹사이트 이용자들에게 줄 혼란을 미연에 방지하고, 편의성을 높여 주는 측면에서 제공하는 것이다.

팝업창 차단과 해법
서비스팩2에 포함된 가장 중요한 기능 중 하나가 인터넷 익스플로러에 대한 대대적인 업데이트이다. 이 중 다른 브라우저에 탑재되어 많은 사용자들의 호응을 받았던 기능 중 하나가 팝업창 차단이다. 이 기능이 브라우저에 기본값으로 설정되며, 웹사이트에 따라 브라우저 주소 표시줄 아래에 표시되는 '알림 표시줄'을 통해 사용자가 차단 여부를 선택할 수 있다.

팝업창을 차단한다고 해서 모두 다 차단하는 것은 아니다. onload와 window.open을 통해 자동으로 오픈되는 팝업창만 차단된다. 즉, 사용자의 액션으로 열리는 팝업창이나 인트라넷 영역에서는 팝업이 허용된다.


이렇게 되면, 싸이월드의 경우 주소를 치면 미니 홈피가 자동으로 뜨던 것을 할 수가 없게 된다. 또한 팝업 광고나 알림을 위해 웹사이트에서 띄우는 공지들도 모두 차단되는 것이다.

가장 먼저 할 수 있는 것이 팝업 차단 기능을 해제하거나, 자신의 사이트에서는 팝업을 허용하도록 하는 가이드를 만들어 공지하는 일이다. 그 다음으로 자동으로 뜨는 팝업창이 어떤 액션을 수행하게 될 때 팝업창이 차단되었는지 여부를 확인하여 이에 대한 적절한 경고를 사용자에게 해주는 것이 필요하다.

팝업창이 차단되면 window.open()함수는 리턴 값으로 null을 반환하므로 이를 이용해 차단 여부를 알 수 있다. 아래 내용이 팝업창 차단을 확인해 그 여부를 알려주도록 수정된 자바스크립트 코드다.

수정 전
<script language = "javascript" >
function onLoad()
{

var objPopup = window.open("popup.htm", "");
location.href = "other.html";
}
</script>
<body onload= "onLoad()" >

수정 후
<script language = "javascript">
function onLoad()
{
var objPopup = window.open("popup.htm", "");
if (objPopup == null) {
alert("차단된 팝업창을 허용해 주십시오.");
}
else {
location.href = "other.html";
}
}
</script>
<body onload= "onLoad()" >

예를 들어 팝업창을 자동으로 띄우고 원래 페이지가 다른 페이지로 이동한다거나 창을 닫거나 하는 경우가 있으면 팝업창 차단 여부를 확인하도록 스크립트를 바꿔야 한다.

액티브X 컨트롤 자동 설치 차단과 해법
웹사이트를 돌아다니다 보면 직사각형의 보안 경고창을 흔히 볼 수 있다. 이것은 웹페이지에 추가적인 기능을 부여하는 액티브X 컨트롤을 다운로드 하기 위한 확인창이라 할 수 있다. 대부분의 사용자들이 직관적으로 예를 누르기 때문에 이를 이용하면 악의적인 코드를 담고 있는 프로그램을 PC에 설치할 수 있어 많은 문제가 돼 왔다.

이번 XP 서비스팩2에서는 아예 이러한 창 자체가 뜨지 않는다. 즉 액티브X 기능을 포함하는 페이지의 경우, 현재 보고 있는 페이지에 액티브X가 포함돼 있으며 설치하려면 사용자가 직접 선택하라는 메시지가 '알림 표시줄'에 뜬다.


현재 우리나라에서는 온라임 게임 뿐 아니라 인터넷 뱅킹, 전자 지불, 사이버 트레이딩에 기본적으로 인증용 액티브X가 사용되고 있다는 측면에서 학습되지 않은 사용자들의 고객 문의 폭주가 예상된다고 하겠다. 웹페이지는 정상적으로 표시되지만 액티브X 컨트롤이 안 깔려 있는 상황에서는 알림 표시만 하고, 기능이 정상적으로 동작하지 않게 되기 때문이다.

예를 들어 국세청의 홈택스 서비스의 경우 2~3개 회사의 여러 액티브X가 웹페이지에 포함돼 있어 하나를 설치하더라도 사용자는 메시지를 보내는 알림 표시줄을 통해 아직 설치하지 않은 액티브X를 설치해야 한다. 이럴 경우 아래와 같이 소스코드를 변경해 설치 여부를 확인, 안내 페이지로 옮겨줌으로써 사이트 방문자들이 수동으로 다운로드해 설치하도록 하는 것이 좋다.



수정 전
<body onload ="checkControl()" >
<object id = "objCtl" classid ="...." codebase="xxx.cab">
</object>
</body>
수정 후
<script language = "javascript" >
function checkControl()
{
If (objCtl == null) {
top.location.href = "error.asp"; //필요한 기능을 설치하는 소개 페이지로 이동합니다
}
objCtl.do();
}
</script>
<body onload ="checkControl()" >
<object id = "objCtl" classid ="...." codebase="xxx.cab">
</object>
</body>

또한 SP2는 이제 신뢰되지 않은 게시자가 배포하는 액티브X 프로그램을 원천 차단함으로써 아예 설치할 수 없도록 변경해버렸다. 액티브X 개발사들은 인증 과정과 비용의 번거러움 때문에 테스트 인증서로 서명한 액티브X를 배포하기도 하였는데, SP2가 설치된 PC에서는 베리사인(VeriSign)과 써트(Thawte) 등 글로벌 인증 기관에서 발행한 인증서로 서명된 코드만 설치된다.

따라서 이전에 코드사인 인증서를 가지고 있지 않은 회사는 인증서를 발급 받아 사용해야 한다. 현재 국내에서는 베리사인과 트와트 양사의 코드사인 인증서를 함께 대행하는 웹사이트(www.thawte.co.kr)가 있기 때문에 안내를 받을 수 있다.


창 제한과 해법
팝업창 차단과 함께 포함된 기능이 팝업창 사이즈 제한 기능이다. 이것은 팝업으로 뜬 창이 윈도우 전체에 표시되거나, 사용자가 제어할 수 없는 상황을 막아 주기 위한 것이다. 음란 사이트나 링크 사이트 같은 곳에서 심심치 않게 경험하는 것이다.

이 제한에는 스크립트를 이용한 창 크기 조절을 사용할 수가 없다. 팝업에서의 window.resize 같은 기능이 제한되는 것이다. 그리고 이전에는 팝업 윈도우의 위치를 정할 수 있었지만 이제 이것도 조절된다. fullwindows=yes 같은 스크립트로 화면 전체에 표시하던 기능도 창 최대화 기능으로만 사용된다는 점도 염두해야 한다.

즉 지금까지 사용하던 온라인 전면 광고나 웹사이트 등은 영향을 받을 수 있다. 따라서 이러한 기능을 사용하고 있는 웹사이트들은 수정이 필요하다.



또한 팝업을 만들 때 주소창, 메뉴바, 상태 표시줄 등을 제어할 있었지만 모든 팝업에 상태 표시줄은 꼭 들어가게 된다. 따라서 기존의 팝업 윈도우의 크기에서 상태 표시줄이 표시되는 20~30픽셀 정도의 크기가 더 늘어남에 따라 윈도우 사이즈를 약간 늘여야 모든 컨텐트와 UI를 제대로 표시할 수 있다.

정확한 MIME 핸들링
웹서버에서 브라우저로 데이터를 보낼 때에는 HTTP 헤더에 데이터 컨텐트-타입을 적어주게 돼 있다. 대부분의 아파치 웹서버는 text/plain이 기본으로 설정돼 있으며 MIME 타입에 설정돼 있지 않는 확장자로 데이터를 보내면 웹브라우저는 어떤 형식인지 인식할 수 없게 된다.

여기에 인터넷 익스플로러에는 MIME 스니핑이라는 기능이 내장돼 있어 헤더가 text/plain이더라도 html 구문이 포함돼 있으면 html 문서로 읽어 주는 역할을 해 왔다. 이것은 그림 파일이나 기타 다른 애플리케이션 파일 포맷도 마찬가지다.

SP2에서는 이런 자동적인 MIME 스니핑은 더 이상 작동하지 않는다. MIME 타입이 보내지면 이에 따라서만 데이터를 표시하게 된다. 따라서 HTTP 헤더와 데이터 포맷을 정확히 쓰는 버릇을 들여야 한다.

만약 그렇지 못한 파일이 IE에 전달되면 저장 기능만 작동되며 바로 실행은 이제 불가능하다. 이미 모질라나 오페라 같은 브라우저에서는 이렇게 작동됨으로써 정체 불명의 파일이 다운로드돼 실행되는 것을 막고 있다. 단 MIME 타입을 알 수 없는 경우에는 스니핑이 그대로 동작한다.

로컬 머신 잠금 기능
사용자의 로컬 머신 보안 영역이 인터넷보다 한층 더 높아져 윈도우 XP를 사용해 웹페이지 및 액티브X의 내부 테스트를 하는 데 어려움이 따르게 됐다. 자바스크립트 실행이나 액티브X 실행 자체가 원천적으로 불가능하게 됐기 때문에 윈도우 XP 개발자들은 테스트 진행에 애로를 겪게 될 것이다.

로컬 HTML 파일에 <!-- saved from url=(0022)http://www.yoururl.com --> 이나 <!-- saved from url=(0013)about:internet -->와 같은 주석을 붙임으로써 실행이 가능하긴 하다. 또한 액티브X 컨트롤은 웹으로 올린 후 다운받아 테스트해야 한다.

이번에 출시되는 윈도우 XP 서비스팩 2에는 이 밖에도 몇 가지 제한 사항이 더 포함돼 있다. 모든 설정은 사용자의 레지스트리에서 변경 가능하긴 하지만 기본적으로 설정돼 있는 것 때문에 많은 혼란이 있을 수 있다.

지금까지 살펴 본 바로는 기존의 많은 코드를 다시 살펴봐야 하는 어려움은 따르겠지만 그 동안 등한시 해왔던 보안에 대한 이슈를 해결한다는 측면에서 꼭 필요할 것이다. 특히 서비스팩2에서는 IE와 기존 설치된 애플리케이션, 확장 기능과의 충돌을 확인할 수 있는 기능도 내장돼 있는 등 전반적으로 사용자 웹브라우징의 안정성 및 보안성을 높였다고 볼 수 있다.


그럼에도 불구하고 웹사이트를 방문하는 사용자의 편의성을 위해 개발자나 사이트 운영자들은 서비스팩2의 정식 출시 이전에 미리 설치해 자신의 웹사이트에 대한 테스트를 꼭 해보기를 권장한다. 또한 고객이 오인할 수 있는 팝업 제어나 액티브X 컨트롤 설치 등에 대한 자세한 안내문을 적어주는 것도 필요하다. @
Posted by tornado
|

trim() 메소드 document.forname.AAA.value.trim() 형식으로 쓸수 있습니다. 어디서 본건지 -_-;  

 

 

 String.prototype.trim = function()
 {
  //return this.replace(/^s*(b.*b|)s*$/, "$1"); // 문장의 앞과 뒤의 공백 제거
  a = this
  //alert(a)
  var search = 0
  while ( a.charAt(search) == " "){
    search = search + 1
  }

  a = a.substring(search, (a.length))
  search = a.length - 1
  while (a.charAt(search) ==" ") {
     search = search - 1
  }
  return a.substring(0, search + 1)
 }

Posted by tornado
|

버튼 스타일시트 ^^

DHTML 2004. 10. 20. 11:49

자꾸 까먹어서리 ^^

 

 

 

<style>

.button {
 border:1x

 solid #000000;
 background-Color:#CCDCFB;
 font:15px tahoma;
 color:#3E3E3E;
 width:50;
 height:50
}

</style>

 

 

<input type="button" value="누질러" class="button" />

 

 

 

Posted by tornado
|
눈내린밤(sur1ya) http://cafe.naver.com/scriptbehind/99

게시판의 제목부분이 TD의 width보다 내용이 초과되서 br되서 보일때 쓰는 css입니다.

EX)

 

┏━━━┳━━━━━━━━━━━━━━━━━━━━━━┳━━━┓

┃작성자┃                              내용                              ┃ 날 자 ┃

┣━━━╋━━━━━━━━━━━━━━━━━━━━━━╋━━━┫

┃테스터┃ㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱ┃07.10┃

┃         ┃                              ㄱㄱ                              ┃         ┃

┗━━━┻━━━━━━━━━━━━━━━━━━━━━━┻━━━┛

이렇게 될때..

 

style.css (스타일 시트 파일에서)

 

nobr {width: '내용td의 width'; overflow:hidden;

         text-overflow:ellipsis;}

이렇게 스타일시트에서 지정한후에

 

해당 게시판 asp 파일에서

<td><nobr>ㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱ</nobr></td>

이렇게 하면..

 

┏━━━┳━━━━━━━━━━━━━━━━━━━━━━┳━━━┓

┃작성자┃                              내용                              ┃ 날 자 ┃

┣━━━╋━━━━━━━━━━━━━━━━━━━━━━╋━━━┫

┃테스터┃ㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱ...┃07.10┃

┗━━━┻━━━━━━━━━━━━━━━━━━━━━━┻━━━┛

이렇게 자동으로 바뀝니다.

 

직접입력시

 

<td><nobr style="width:'내용td의 width'; overflow:hidden; text-overflow:ellipsis;">

ㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱ</nobr></td>

이렇게 하시면 됩니다.

 

익스플로러 버전 몇까지 지원하는지는 잘 모르겠으나 웬만해서는 다 될거예요.

 

그래도 하나 올렸으니 쥔장에게 미움은 받지 않겠지..ㅋ

Posted by tornado
|

좀 다듬어서 function 으로 만들어 놓구 쓰면 좋겠네요

 

<form method="post" name="frm">

<select name="a[0]" >

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

<script>
var obj = eval(document.frm['a[0]']);
obj.value=5;
</script>

</select>
<select name="a[1]" >

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

<script>
var obj = eval(document.frm['a[1]']);
obj.value=4;
</script>

</select>
<select name="a[2]" >

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

<script>
var obj = eval(document.frm['a[2]']);
obj.value=3;
</script>

</select>
<select name="a[3]" >

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

<script>
var obj = eval(document.frm['a[3]']);
obj.value=2;
</script>

</select>
<select name="a[4]" >

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

<script>
var obj = eval(document.frm['a[4]']);
obj.value=1;
</script>

</select>

 

</form>

Posted by tornado
|

[펌] 윤년

DHTML 2004. 10. 15. 11:00
자바로 윤년구하는 소스를 내용에 맞게좀 알려주세요
평점 :
0 (0 명)나도 평가하기jinkh00   조회: 138  답변: 1
답변이 완료된 질문입니다. (2004-09-30 07:40 작성)신고하기
2000년 부터 4000년 사이의 모든 윤년을 구하는 자바 프로그램.

힌트)년도를 4로 나누어떨어지면 ====> 윤년 0
그중 100으로도 나누어떨어지면 ====> 윤년 x
그중 400 으로 나누어떨어진다면 ====> 윤년 0

다른 소스는 만은데 ...; 위에 3가지를 적용한 소스를 알수있을까요?
질문자가 선택한 답변
re: 자바로 윤년구하는 소스를 내용에 맞게좀 알려주세요
imsangchin (2004-09-30 07:56 작성)이의제기
질문자 평 

 

안녕하세요.

아래의 if문에 참이면 윤년에 해당합니다.

 

int year;

..

if( year % 4 == 0 || year % 100 != 0 && year % 400 == 0 ){

   //윤년

}

else {

  //윤년아님

}

인쇄하기 | 지식 선물하기 | 스크랩하기 | 내 블로그담기
Posted by tornado
|

fckconfig.js 파일 내부에 만듬 ㅡㅡ

 

FCKConfig.ToolbarSets["Gnd"] = [
 ['Source','-',/*'Save','NewPage',*/'Preview'],
 ['Undo','Redo',/*'-','Find','Replace',*/'-'/*,'SelectAll','RemoveFormat'*/],
 ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
 ['OrderedList','UnorderedList','-','Outdent','Indent'],
 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
 ['Link','Unlink'/*,'Anchor'*/],
 [/*'Image',*/'Table','Rule','SpecialChar'/*,'UniversalKey'*/,'Smiley'],
 /*['Form','Checkbox','Radio','Input','Textarea','Select','Button','ImageButton','Hidden']*/
 /*['ShowTableBorders','ShowDetails','-','Zoom'],*/
 [/*'FontStyleAdv','-','FontStyle','-',*/'FontFormat','-','FontName','-','FontSize'],
 ['TextColor','BGColor']
] ;

 

 

구차니즘으로 인한 주석처리 --_--;

<P> 태그는 우쨔 처리하남.. 으흐흐흐

'DHTML' 카테고리의 다른 글

select 가 배열일 경우 사용...  (0) 2004.10.18
[펌] 윤년  (0) 2004.10.15
[펌] VML 아날로그 시계  (0) 2004.10.05
[msdn] 어렵다 HTML ㅜㅜ  (0) 2004.09.23
[펌] 홈피 관련 태그  (0) 2004.09.19
Posted by tornado
|
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* {behavior:url(#default#VML);}
</style>
<script>
var idRel;
var radDg = Math.PI / 30;
function finRel(){
clearTimeout();
}
function ptRel(){
var d = new Date();
var r;
var ta = d.getSeconds()+ d.getMilliseconds() / 1000;
var ang = (ta - 15) * radDg;
var x = Math.floor(40 * Math.cos (ang));
var y = Math.floor(40 * Math.sin (ang));
document.all("seg").adj.value = x + ',' + y;
ta = d.getMinutes() + ta / 60;
ang = (ta - 15) * radDg;
var x = Math.floor(40 * Math.cos (ang));
var y = Math.floor(40 * Math.sin (ang));
document.all("min").adj.value = x + ',' + y;
ta = (d.getHours() % 12) + ta / 60;
ang = (5 * ta - 15) * radDg;
var x = Math.floor(30 * Math.cos (ang));
var y = Math.floor(30 * Math.sin (ang));
document.all("hrs").adj.value = x + ',' + y;
setTimeout("ptRel()",1);
}
document.onload=setTimeout('ptRel()',1);
document.onUnload=finRel();
</script>
</head>
<body>
<div >
<v:shapetype id="prueba" coordsize="100,100" path="m 50,50 l @0,@1 e">
<v:stroke endcap="round" />
<v:formulas>
<v:f eqn="sum 50 #0 0" />
<v:f eqn="sum 50 #1 0" />
</v:formulas>
</v:shapetype>
</v:shapetype>
<v:group style="width: 100px; height: 100px" coordsize="100,100">
<v:oval style="top:2; left:2; width: 100; height: 100" fillcolor="#9E9E9E" strokecolor="#9E9E9E" />
<v:oval style="width: 100; height: 100" fillcolor="#FF6600" strokecolor="#FF6600" />
<v:oval style="width: 1; height: 1; left: 49; top: 2" fillcolor="#FEF801" strokecolor="#FEF801" />
<v:oval style="width: 1; height: 1; left: 97; top: 49" fillcolor="#FEF801" strokecolor="#FEF801" />
<v:oval style="width: 1; height: 1; left: 2; top: 49" fillcolor="#FEF801" strokecolor="#FEF801" />
<v:oval style="width: 1; height: 1; left: 49; top: 97" fillcolor="#FEF801" strokecolor="#FEF801" />
<v:oval style="width: 1; height: 1; left: 9; top: 25" fillcolor="#FFA940" strokecolor="#FFA940" />
<v:oval style="width: 1; height: 1; left: 73; top: 8" fillcolor="#FFA940" strokecolor="#FFA940" />
<v:oval style="width: 1; height: 1; left: 26; top: 8" fillcolor="#FFA940" strokecolor="#FFA940" />
<v:oval style="width: 1; height: 1; left: 90; top: 25" fillcolor="#FFA940" strokecolor="#FFA940" />
<v:oval style="width: 1; height: 1; left: 9; top: 73" fillcolor="#FFA940" strokecolor="#FFA940" />
<v:oval style="width: 1; height: 1; left: 25; top: 90" fillcolor="#FFA940" strokecolor="#FFA940" />
<v:oval style="width: 1; height: 1; left: 73; top: 90" fillcolor="#FFA940" strokecolor="#FFA940" />
<v:oval style="width: 1; height: 1; left: 90; top: 73" fillcolor="#FFA940" strokecolor="#FFA940" />
<v:oval style="top: 10; left: 13; width: 50; height: 50" fillcolor="#9E9E9E" strokecolor="#9E9E9E" />
<v:oval style="top: 12; left: 15; width: 50; height: 50" fillcolor="#FFFFFF" strokecolor="#FFFFFF" />
<v:shape id="hrs" type="#prueba" style="top:0; left: 0; width: 100; height: 100" adj="0,0" strokeweight="2pt"  strokecolor="#FEF801" />
<v:shape id="min" type="#prueba" style="top:0; left: 0; width: 100; height: 100" adj="0,0" strokeweight="2pt"  strokecolor="#FEF801" />
<v:shape id="seg" type="#prueba" style="top:0; left: 0; width: 100; height: 100" adj="0,0" strokecolor="#F4970B" />
</v:group>
</div>
</body>
</html>
Posted by tornado
|

[msdn] 어렵다 HTML ㅜㅜ

DHTML 2004. 9. 23. 15:38
Posted by tornado
|

[펌] 홈피 관련 태그

DHTML 2004. 9. 19. 21:45

새 로 운 강 좌

(2003 . 08 . 13) <td>에 스크롤바 생성하기
(2003 . 08 . 13)
마우스 오른쪽 단추 클릭시 강제이동시키기
(2003 . 08 . 13)
캐쉬 사용하지 않기
(2003 . 08 . 13)
그림에 마우스 오버만 해도 링크 이동
(2003 . 08 . 13)
시작과 멈춤이 가능한 스크롤 텍스트


이 미 지 텍 스 트

기본적인 이미지 태그
이미지 크기 바꾸기
이미지 슬라이드 <1>
이미지 슬라이드(마우스오버시멈춤)
위로 흐르는 이미지(마우스대면 멈춤)
이미지 슬라이드 <2>
이미지 슬라이드 <3>
이미지 슬라이드 <4>
이미지 슬라이드 <5>
이미지 갤러리 <1>
이미지 갤러리 <2>
롤오버 이미지
은은하게 변하는 롤오버이미지
접속 할 때마다 다른 이미지 띄우기
html문서 없이 새창으로 이미지 띄우기
이미지트렌지션 효과
이미지 체인징
흐려졌다 선명해졌다를 반복하는 이미지
이미지 섬광효과주기
깜빡이는 이미지
이미지 위에 마우스 올리면 테두리 생기게
이미지에 마우스 올라가면 흔들리는 효과
이미지에 마우스 올리면 선명해지게
border값 한꺼번에 0으로 주기
이미지 웨이브
랜덤으로 스트라이핑 효과내기
필터 효과
스포트라이트 효과
박스안에서 회전하는 이미지
이미지가 안뜰경우 다른 이미지 보여주기

글자 크기.글꼴, 줄간격 바꾸기
이탤릭체,글자진하게,타자체
옆으로 쓰러진 글씨
일정 간격으로 텍스트 바꾸기
글자색 그라데이션으로 만들기
글자를 쓰면 텍스트박스 안에 멋지게 입력되게 하기
텍스트 렌덤으로 이동시키기
한글자씩 커지면서 타이핑
타이핑되는 것처럼 글자에 다른색 입히기
깜빡이는 글자
두 문장이 서서히 바뀌게 하기
글씨주변에 그림자 넣기
글자 세로로 나타나게 하기
마우스 오버스 글자 커지게 하기
웹폰트 적용하기
마퀴태그
아래에서 위로 부드럽게 올라가는 글씨
글자가 점점 커지면서 없어지기
글자 테두리 강조하기
폰트 크기를 사용자 마음대로 줄였다 늘렸다 하기
폼필드안에 텍스트를 반짝이기
튀어나와 보이는 글씨,들어가 보이는 글씨
텍스트 네온 효과

마 우 스 스 크 롤 바

마우스를 따라다니는 글자
마우스를 따라다니는 겹치는 글자
마우스 주변을 빙글빙글 도는 점
마우스 주변을 3D처럼 도는 글자
마우스를 따라다니는 그림
마우스 커서 모양 바꾸기
마우스 오른쪽 메뉴 바꾸기
빙글빙글 도는 마우스 커서
마우스를 따라다니는 시계

투명 스크롤바 만들기
화면 위로 자동스크롤
마우스를 따라 자동스크롤
이미지에 마우스커서 올리면 자동 스크롤 업 다운
스크롤바 따라다니는 이미지
스크롤바를 따라다니는 글자
반짝이는 스크롤바
롤오버되는 스크롤바
세이클럽의 Dhtml 스크롤바
이미지 스크롤바
스크롤바 모두 없애기
가로 스크롤바 없애기
세로 스크롤바 없애기
스크롤바 왼쪽에 나오게 하기
스크롤바를 부드럽게 따라다니는 메뉴

메뉴

풀다운 메뉴
상하로 움직이는 메뉴
트리구조형메뉴(부드러운 스크롤효과)
펼침메뉴 만들기

새 창 & 브 라 우 저 메 시 지

새창열기
자동으로 새창띄우기
새창을 하루에 한번씩만 띄우기
마우스 오버시 새창 띄우기
오늘 하루동안 이 창 띄우지 않게하는 버튼 만들기
새창에서 부모창 제어하기
크롬리스 창 열기
이미지 새창 띄우기
화면 흔들기
접속하자 마자 풀스크린으로 창 열리게 하기
링크위에 마우스 커서를 올리면 새창뜨게하기
팝업창 원하는시간에 자동으로 띄운후 닫기

환영 메시지 띄우기
작별 메시지 띄우기
방문 횟수 보여주기
베너 프롬프트 넣기
시간대별로 메세지 보여주기
매일 새로운 메세지 보여주기
happy 바이러스
글을 누르면 정답이 보이게

상 태 바 & 타 이 틀 바 사 운 드

상태표시줄에 글씨 나오게 하기
상태표시줄에 머무른 시간 나타내기
타이틀바에 머문 시간 나타내기
상태표시줄에 현재 시간 나타내기
상태표시줄에 나오는 주소 감추기
상태바 에니메이션
타이틀바 에니메이션
파도를 타는 상태바
양쪽을 왕복하는 상태바

기본적인 음악태그
배경음악 랜덤으로 나오게 하기
하루에 두 번만 바뀌는 배경음악
마우스 오버시 음악연주
음악 선택창 만들기
배경음악 켜고 끄는 버튼 만들기

테 이 블 배 경

투명 테이블 만들기
테이블 테두리 깜박이게 하기
테이블에 링크걸기
테이블에 마우스 오버 적용하기
점선 테이블 만들기
접속할 때마다 테이블 배경 바꾸기
fieldset으로 box 만들기
마우스오버시 테이블 색 서서히 변화주기
테이블에 스크롤바 만들기
<td>에 스크롤바 생성하기

원하는 위치에 고정 배경 깔기
화면에서 이미지 움직이는 효과
이미지 옆으로 날리는 효과
이미지 위에서 아래로 내리는 효과
이미지 아래에서 위로 올라가는 효과
바운딩 이미지
장미가 배경에서 피어나게
색깔 이름을 누르면 그색으로 배경이 바뀌게하기
물방울이 터지는 배경
배경색 부드럽게 계속 바뀌게하기
아이콘을 클릭하면 배경으로 깔리게 하기

링 크

보   안

기본적인 링크태그
링크걸린 부분 글자색 바꾸기
링크걸린 부분 밑줄 없애기
링크걸린 부분에 점선 테두리 없애기
링크걸린 부분 위아래로 밑줄 만들기
그림으로 링크강조하기
링크에 마우스 오버시 박스 생기게 하기
링크에 마우스 오버시 밑줄 생기게 하기
링크에 마우스 올리면 서서히 글자색 변하게 하기
링크에 마우스 올리면 폭죽터지는 효과
링크걸린 부분에 툴팁 적용하기
그라데이션 풍선말
한글자씩 타자치듯 나오는 풍선도움말
링크에 마우스 오버시 버튼효과
<a href=#> 대신에 쓸수 있는 스타일 태그
링크 클릭시 생기는 점선 한번에 없애기
링크걸린곳에 마우스 커서를 올리면 꽃가루 피어나게
그림에 마우스 오버만 해도 링크 이동

키보드 사용못하게 하기
마우스 드래그 금지 & 소스보기금지
오른쪽마우스 클릭하면 메시지창 뜨는 소스
마우스 오른쪽 버튼 누르면 즐겨찾기 창 나오게 하기
홈페이지에 암호걸기
이미지 도구모음 뜨지 않게 만들기
주소창의 이미지 경로 감추기
마우스 오른쪽 단추 클릭시 강제이동시키기

프레임

시간, 날짜

아이프레임 만들기
아이프레임을 이용한 프레임효과
자동 넓이 높이 조절하는 iframe
프레임이 나눠진 문서에 닫기버튼 만들기
노프레임 홈페이지에서 주소 고정시키기
주소 고정 페이지 처음으로 돌아가지 않게
프레임 동시에 두개이상 바뀌게 하기
아이프레임 동시에 두개이상 바뀌게 하기

기념일 계산하기
마지막으로 업데이트 된 날짜 나오게 하기
날짜와 시간 표시소스 1
날짜와 시간 표시소스 2
홈에 머무른 시간 표시

기 타

페이지 여백 없애기
메타태그
줄바꿈 태그 안 쓰고도 줄바꿈 되서 나오게 하기
동영상 넣기
자바스크립트 저장해서 불러오기
css 저장해서 불러오기
스타일로 레이어 만들기
홈페이지 전체를 흑백으로 나오게 하기
이미지를 사용안하고 html문서에 그라데이션 효과주기
뒤로, 앞으로, 새로고침, 창닫기 버튼 만들기
즐겨찾기추가, 시작페이지만들기 버튼 만들기
swf 파일을 배경을 투명하게 삽입하기
페이지 자동 이동 방법 3가지
페이지 이동시 duration 효과
페이지 포워딩 시키기(페이지 이동)
페이지를 주기적으로 새로고침 시키기
시작과 멈춤이 가능한 스크롤 텍스트

MSN대화상대 추가, 메시지 보내기
검색폼 달기
소스가 적용 안되고 그대로 보여지게 하기
파일 첨부시 이미지 미리보여주기
웹페이지에 테두리 두르기
마우스 따라다니는 십자선
프린트 하기
페이지를 열면 자동으로 다운로드 시키기
사용자의 해상도를 알려주는 소스
해상도별로 다른 페이지 보여주기
브라우저, 언어,운영체제 나타내기
같은 글자 반복해서 나타내기
원하는 날짜까지 이미지 보이게 하기
특정 ip차단하기
CD 열리게 하기
캐쉬 사용하지 않기

Posted by tornado
|

주로 입력 폼 필드값의 유효성을 검사하기
위해 쓰이는 함수들을 모아봤습니다.
날짜,시간과 관련된 함수는 다음에 정리되는대로 올리도록
하겠습니다.


/**

 * 자바스크립트 공통함수
*
* 주의: 아래의 모든 메소드는 입력폼의 필드이름(myform.myfield)을
*       파라미터로 받는다. 필드의 값(myform.myfield.value)이 아님을
*       유념할 것.
 */


/**
* 입력값이 NULL인지 체크
*/
function isNull(input) {
    if (input.value == null || input.value == "") {
        return true;
    }
    return false;
}

/**
* 입력값에 스페이스 이외의 의미있는 값이 있는지 체크
* ex) if (isEmpty(form.keyword)) {
*         alert("검색조건을 입력하세요.");
*     }
*/
function isEmpty(input) {
    if (input.value == null || input.value.replace(/ /gi,"") == "") {
        return true;
    }
    return false;
}

/**
* 입력값에 특정 문자(chars)가 있는지 체크
* 특정 문자를 허용하지 않으려 할 때 사용
* ex) if (containsChars(form.name,"!,*&^%$#@~;")) {
*         alert("이름 필드에는 특수 문자를 사용할 수 없습니다.");
*     }
*/
function containsChars(input,chars) {
    for (var inx = 0; inx < input.value.length; inx++) {
       if (chars.indexOf(input.value.charAt(inx)) != -1)
           return true;
    }
    return false;
}

/**
* 입력값이 특정 문자(chars)만으로 되어있는지 체크
* 특정 문자만 허용하려 할 때 사용
* ex) if (!containsCharsOnly(form.blood,"ABO")) {
*         alert("혈액형 필드에는 A,B,O 문자만 사용할 수 있습니다.");
*     }
*/
function containsCharsOnly(input,chars) {
    for (var inx = 0; inx < input.value.length; inx++) {
       if (chars.indexOf(input.value.charAt(inx)) == -1)
           return false;
    }
    return true;
}

/**
* 입력값이 알파벳인지 체크
* 아래 isAlphabet() 부터 isNumComma()까지의 메소드가
* 자주 쓰이는 경우에는 var chars 변수를
* global 변수로 선언하고 사용하도록 한다.
* ex) var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
*     var lowercase = "abcdefghijklmnopqrstuvwxyz";
*     var number    = "0123456789";
*     function isAlphaNum(input) {
*         var chars = uppercase + lowercase + number;
*         return containsCharsOnly(input,chars);
*     }
*/
function isAlphabet(input) {
    var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    return containsCharsOnly(input,chars);
}

/**
* 입력값이 알파벳 대문자인지 체크
*/
function isUpperCase(input) {
    var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    return containsCharsOnly(input,chars);
}

/**
* 입력값이 알파벳 소문자인지 체크
*/
function isLowerCase(input) {
    var chars = "abcdefghijklmnopqrstuvwxyz";
    return containsCharsOnly(input,chars);
}

/**
* 입력값에 숫자만 있는지 체크
*/
function isNumber(input) {
    var chars = "0123456789";
    return containsCharsOnly(input,chars);
}

/**
* 입력값이 알파벳,숫자로 되어있는지 체크
*/
function isAlphaNum(input) {
    var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    return containsCharsOnly(input,chars);
}

/**
* 입력값이 숫자,대시(-)로 되어있는지 체크
*/
function isNumDash(input) {
    var chars = "-0123456789";
    return containsCharsOnly(input,chars);
}

/**
* 입력값이 숫자,콤마(,)로 되어있는지 체크
*/
function isNumComma(input) {
    var chars = ",0123456789";
    return containsCharsOnly(input,chars);
}

/**
* 입력값이 사용자가 정의한 포맷 형식인지 체크
* 자세한 format 형식은 자바스크립트의 'regular expression'을 참조
*/
function isValidFormat(input,format) {
    if (input.value.search(format) != -1) {
        return true; //올바른 포맷 형식
    }
    return false;
}

/**
* 입력값이 이메일 형식인지 체크
* ex) if (!isValidEmail(form.email)) {
*         alert("올바른 이메일 주소가 아닙니다.");
*     }
*/
function isValidEmail(input) {
//    var format = /^(\S+)@(\S+)\.([A-Za-z]+)$/;
    var format = /^((\w|[\-\.])+)@((\w|[\-\.])+)\.([A-Za-z]+)$/;
    return isValidFormat(input,format);
}

/**
* 입력값이 전화번호 형식(숫자-숫자-숫자)인지 체크
*/
function isValidPhone(input) {
    var format = /^(\d+)-(\d+)-(\d+)$/;
    return isValidFormat(input,format);
}

/**
* 입력값의 바이트 길이를 리턴
* ex) if (getByteLength(form.title) > 100) {
*         alert("제목은 한글 50자(영문 100자) 이상 입력할 수 없습니다.");
*     }
* Author : Wonyoung Lee
*/
function getByteLength(input) {
    var byteLength = 0;
    for (var inx = 0; inx < input.value.length; inx++) {
        var oneChar = escape(input.value.charAt(inx));
        if ( oneChar.length == 1 ) {
            byteLength ++;
        } else if (oneChar.indexOf("%u") != -1) {
            byteLength += 2;
        } else if (oneChar.indexOf("%") != -1) {
            byteLength += oneChar.length/3;
        }
    }
    return byteLength;
}

/**
* 입력값에서 콤마를 없앤다.
*/
function removeComma(input) {
    return input.value.replace(/,/gi,"");
}

/**
* 선택된 라디오버튼이 있는지 체크
*/
function hasCheckedRadio(input) {
    if (input.length > 1) {
        for (var inx = 0; inx < input.length; inx++) {
            if (input[inx].checked) return true;
        }
    } else {
        if (input.checked) return true;
    }
    return false;
}

/**
* 선택된 체크박스가 있는지 체크
*/
function hasCheckedBox(input) {
    return hasCheckedRadio(input);
}

 

출처 : 모름

Posted by tornado
|

모야... 너무 간단... 허무 ㅡㅡ;

self.opener = self;
window.close();

Posted by tornado
|

<HTML>
<HEAD>
<Script language="javascript">
<!--
 
 function show(){
  document.all["layer_1"].style.display="block";
 }

 function close() {

  document.all["layer_1"].style.display = "none";
 }


//-->

</Script>
</HEAD>

<BODY>

<table border="1" align="LEFT" cellpadding=0 cellspacing=0 width=400>

 <tr>
  <td>
    <a href="javascript:show()" >보이기</a>
    <a href="javascript:close()" >닫기</a>
  </td>
 </tr>

 <tr id="layer_1" style="display:none">
   <td width="100%" height="200">
  보여요????
  
   </td>
 </tr>
</table>

</BODY>
</HTML>

Posted by tornado
|
javascript로 파일의 크기를 알아낼 수는 있습니다.
하지만, 이 경우엔 브라우저의 보안에 걸리게 됩니다.
우선, 알아내는 방법부터 말씀을 드리지요.

var fpath = "c:\test.zip"
var fso, f, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.GetFile(fpath);
s = f.size;
alert(s)

위와 같이 하면 알아낼 수 있습니다.
fpath에는 파일명을 포함한 파일경로가 들어가게 되구요.
file선택개체.. 즉 <input type="file"...> 을 사용하신다면
value 속성으로써 경로를 알아낼 수 있겠지요?

여기서 주의해서 보셔야 할 부분이..
fso = new ActiveXObject("Scripting.FileSystemObject"); 입니다.

이것은.. 말 그대로 File System Object로써 개체를 생성하는 구문입니다.
여기에서 바로 보안에 걸리게 됩니다.
브라우저 보안 설정에 따라 어떤 컴에서는 동작을 아예 안 하거나,
또는 경고메시지만 띄워주고 실행이 가능해지거나,
또는 경고메시지 없이 무조건 실행될 수도 있을겁니다.

아마 자신이 올리는 파일의 크기를 알아내는데 왜 보안에 걸리느냐고 여쭤보실지도 모르겠네요. ^^;

Scripting.FileSystemObject는 파일의 크기뿐만이 아니라 파일에 대한 모든 조작이 가능한 개체입니다.
따라서, 누군가가 고의로 하드의 파일을 삭제하거나 하는 스크립트를 만들어서 메일로 보내거나
자기의 홈페이지에 올려두고 누군가 접근하게 한다면..?? 어떻게 될까요? ^^;;

javascript라는게.. asp, jsp같은 서버에서 동작하는 스크립트언어가 아니라
Client에게 어떤 특정한 동작을 수행하도록 하는 언어이다 보니..
이러한 보안문제는 아주 중요한 부분입니다.


음.. 주절주절 말을 적긴 했는데 도움이 되셨을런지 모르겠군요.

그럼 즐프 하세용~



* 참! 만약에 특정 사이트를 구축하는데에 꼭 저러한 기능이 필요하시다면
ActiveX 프로그래밍을 직접 하시던지..
아니면, 클라이언트의 브라우저 보안설정에서
"신뢰할 수 있는 사이트"로써 등록을 하게 한 후에 사용하도록 하는 방법도 있을겁니다.
정말 신뢰할 수 있는 사이트라면 말이죠. ^^;;
Posted by tornado
|

[js] 풀스크린

DHTML 2004. 8. 9. 12:35
<Script>
 function fullScreen(){
  window.open('./full_1_main.html','','fullscreen=yes');
  //self.opener = self;
  //self.close();
 }
</script>
Posted by tornado
|

Hexadecimal Color Wheel





































출처:

http://javascript.internet.com/page-details/hexadecimal-color-wheel.html

Posted by tornado
|