캠핑과 개발


브라우저의 주소창이나 탭, 즐겨찾기에 사이트만의 특정 로고나 이미지를 삽입하는 방법이다.



1. favicon.ico 제작

먼저 사용될 favicon 아이콘을 제작한다.
사이즈는 16*16, 32*32, 48*48로 제작
jpg,gif,png 등의 파일을 사이즈에 맞게 제작을 하여 파일명은 favicon, 확장자는 ico 확장자로 변경한다. 직접 제작을 해도 되나 그러지 못한 경우는 검색해보면 많이 나오니 찾아서 제작
하나 추천 : http://www.html-kit.com/favicon

2. html 페이지 코드 삽입
 
만들어진 favicon.ico를 WebRoot 하위에 업로드 함
index 페이지에 다음 코드를 삽입

방법 1

<html>
<head>
    <title>favicon</title>
     <link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
</body>
</html>

방법 2
<html>
<head>
    <title>favicon</title>
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
</body>
</html>


이미지가에 문제가 있는경우는 나타나지 않을 수도 있다.


특정한 페이지를 브라우저 시작페이지로 설정을 한다.
IE에서는 동작을 하나 FF 3.5에서는 동작을 안하니 사용시 각 브라우저별로 테스트 후에 사용해야 함

<a style="cursor:pointer" HREF onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://hmjkor.tistory.com');">시작페이지로</a>


 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <script language="JavaScript" type="text/javascript">
 <!--
 var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);
 
 /**
 * option 추가
 **/
 function addOption(theSel, theText, theValue){
  var newOpt = new Option(theText, theValue);
  var selLength = theSel.length;
  theSel.options[selLength] = newOpt;
 }
 /**
 * option 삭제
 **/
 function deleteOption(theSel, theIndex){
  var selLength = theSel.length;
  if(selLength>0){
   theSel.options[theIndex] = null;
  }
 }
 
 /**
 * option 삭제
 **/
 function moveOptions(theSelFrom, theSelTo){
  
  var selLength = theSelFrom.length;
  var selectedText = new Array();
  var selectedValues = new Array();
  var selectedCount = 0;
  
  var i;
  
  // Find the selected Options in reverse order
  // and delete them from the 'from' Select.
  for(i=selLength-1; i>=0; i--){
   if(theSelFrom.options[i].selected){
    selectedText[selectedCount] = theSelFrom.options[i].text;
    selectedValues[selectedCount] = theSelFrom.options[i].value;
    deleteOption(theSelFrom, i);
    selectedCount++;
   }
  }
  
  // Add the selected text/values in reverse order.
  // This will add the Options to the 'to' Select
  // in the same order as they were in the 'from' Select.
  for(i=selectedCount-1; i>=0; i--){
   addOption(theSelTo, selectedText[i], selectedValues[i]);
  }
  
  if(NS4) history.go(0);
 }
 //-->
 </script>
 </HEAD>
 <BODY>
<form action="yourpage.asp" method="post">
<table border="0">
 <tr>
  <td>
   <select name="sel1" size="10" multiple="multiple">
   <option value="1">Left1</option>
   <option value="2">Left2</option>
   <option value="3">Left3</option>
   <option value="4">Left4</option>
   <option value="5">Left5</option>
   </select>
  </td>
  <td align="center" valign="middle">
   <input type="button" value="--&gt;"
    onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
   <input type="button" value="&lt;--"
    onclick="moveOptions(this.form.sel2, this.form.sel1);" />
  </td>
  <td>
   <select name="sel2" size="10" multiple="multiple">
   <option value="1">Right1</option>
   <option value="2">Right2</option>
   <option value="3">Right3</option>
   <option value="4">Right4</option>
   <option value="5">Right5</option>
   </select>
  </td>
 </tr>
</table>
</form>
 </BODY>
</HTML>

출처 : http://www.mredkj.com/tutorials/tutorial_mixed2b.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 <script language="JavaScript" type="text/javascript">
 <!--
 var count1 = 0;
 var count2 = 0;
 /**
 * 선택된 option의 이전에 새로운 option 을 추가한다.
 **/
 function insertOptionBefore(num){
  var elSel = document.getElementById('selectX');
  if(elSel.selectedIndex >= 0) {
   var elOptNew = document.createElement('option');
   elOptNew.text = 'Insert' + num;
   elOptNew.value = 'insert' + num;
   var elOptOld = elSel.options[elSel.selectedIndex]; 
   try {
    elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
   }catch(ex){
    elSel.add(elOptNew, elSel.selectedIndex); // IE only
   }
  }
 }
 /**
 * 선택된 옵션을 삭제한다.
 **/
 function removeOptionSelected(){
  var elSel = document.getElementById('selectX');
  var i;
  for (i = elSel.length - 1; i>=0; i--) {
   if (elSel.options[i].selected) {
    elSel.remove(i);
   }
  }
 }
 /**
 * 마지막에 새로운 option을 추가한다.
 **/
 function appendOptionLast(num){
  var elOptNew = document.createElement('option');
  elOptNew.text = 'Append' + num;
  elOptNew.value = 'append' + num;
  var elSel = document.getElementById('selectX');
  try {
   elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
  }catch(ex) {
   elSel.add(elOptNew); // IE only
  }
 }
 /**
 * 마지막 옵션을 삭제한다.
 **/
 function removeOptionLast(){
  var elSel = document.getElementById('selectX');
  if (elSel.length > 0){
   elSel.remove(elSel.length - 1);
  }
 }
 //-->
 </script>
 </HEAD>
<BODY>
<form>
 <input type="button" value="이전 추가" onclick="insertOptionBefore(count1++);" />Insert Before Selected<br />
 <input type="button" value="삭제" onclick="removeOptionSelected();" />Remove Selected<br />
 <select id="selectX" size="10">
  <option value="original1" selected="selected">Orig1</option>
  <option value="original2">Orig2</option>
 </select>
 <br />
 <input type="button" value="마지막 추가" onclick="appendOptionLast(count2++);" />Append Last<br />
 <input type="button" value="마지막 삭제" onclick="removeOptionLast();" />Remove Last
</form>
</BODY>
</HTML>


http://ha.ckers.org/xss.html


매번 까먹는다.
한번 쓸때는 이제 알겠지 하면서 어제 썼던걸 오늘 또 찾게 된다.


<select id='selectbox'>
<option value="1">사과</option>
<option value="2">배</option>
<option value="3">포도</option>
<option value="4">귤</option>
<option value="5">자두</option>
</select>


text 값 가져오기
<script language="javascript">
     var obj = document.getElementById('selectbox');
     var text = obj.options[obj.selectedIndex].text;
     alert(text); 
</script>


value 값 가져오기
<script language="javascript">
var obj = document.getElementById(''selectbox'');
var value = obj.options[obj.selectedIndex].value;
alert(value);
</script>

토요일에 할일 없이 회사에 출근했다가 이러저리 돌아다니다가 좋은 사이트가 있어서 포스팅 한번 합니다.

HTML 소스를 정렬해주는 사이트입니다.
탭 들여쓰기,  자동 들여쓰기, 자동 줄바꿈 등 여러가지가 지원이 됩니다.
드림위버로 코딩이 된 소스를 보면 줄바꿈이라던가 소스 관리가 엉망인데 이 사이트에서 한번 정렬 하신후에 사용하시면 개발하기가 참 편할꺼 같네요.

URL : http://www.mycoolform.com/

'DEVELOPMENT > Javascript' 카테고리의 다른 글

[javascript] select box  (0) 2009.02.16
[HTML] 제어 문자  (0) 2009.01.16
[tip] 영문 alert 메세지  (0) 2008.09.25
javascript 디버거 툴  (0) 2008.08.18
클립보드 복사  (0) 2008.08.18

자바스크립트 디버거 툴
내일 당장 사용해보자~
사용자 삽입 이미지

익스플로어에서만 가능한 클립보드 복사하기다.

<script language="javascript">
    function setClipBoard(content){
        content +=  content + " [diem 블로그]";
        window.clipboardData.setData('Text', content);
        alert('내용이 복사되었습니다.');
    }
</script>

<a href="javascript:setClipBoard('http://hmjkor.tistory.com/')">복사하기</a>

오늘의 날짜에서 며칠후 혹 몇일 전의 날짜를 구하는 스크립트

'DEVELOPMENT > Javascript' 카테고리의 다른 글

[HTML 팁] HTML 소스 정렬 사이트  (0) 2008.12.27
[tip] 영문 alert 메세지  (0) 2008.09.25
javascript 디버거 툴  (0) 2008.08.18
클립보드 복사  (0) 2008.08.18
[javascript] 쿠키 설정, 추출, 삭제 예제  (0) 2008.01.21