클릭시 팝업창 띄우기

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:28
반응형

링크 클릭시 팝업창 띄우는 방법에 대해 알려드립니다. 

 

_blank 처럼 완전히 새로운 익스플로어를 띄우는 것이 아니라

 

상단 타이틀바만 있는 팝업창입니다.

 

 

소스 입력시에 head 와 /head 사이에 자바스크립트 함수를 기재해주세요.  

(경험상 큰 의미는 없습니다.

 

 

 

<script> 
function onetoone() { 
window.open("http://www.daum.net","personal","width=607,height=520,scrollbars=yes");} 
</script>


위의 스트립트를 기술하시고, 원하시는 곳에 1:1게시판의 링크를 아래와 같이 거시면 됩니다.. 

<a href="JavaScript:onetoone()">[1:1문의게시판]</a>

 

width 랑 height 를 조절하시면 창크기 사이즈 조절이 됩니다. ^^

 

[출처] 동글이의 행복 가득한 세상 | 동글댕이 (http://blog.naver.com/romia99/30119335447)

 


반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

팝업창 닫을 때 부모창 refresh  (0) 2015.01.27
창닫으면 자동으로 설정한페이지 열게하기  (0) 2015.01.27
다른페이지 특징위치로 이동하는 태그  (0) 2015.01.27
HTML 기본 태그 #5 - css & Style  (0) 2015.01.27
자바스크립트 펼치기 접기 소스 2  (0) 2015.01.27

댓글()

다른페이지 특징위치로 이동하는 태그

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:27
반응형

a name은 같은 문서내로 이동하는 것 뿐만 아니라 다른 문서의 특정위치로 이동하는것도 가능함 (name값 위치로 이동)

 

test.html 문서내 "here"로 이동하려면

   <a name="here">이동</a>

 

<a href="test.html#here">로 걸면됨

 

[출처] ddanziland | ddanziland (http://ddanziland.blog.me/140126410899)

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

창닫으면 자동으로 설정한페이지 열게하기  (0) 2015.01.27
클릭시 팝업창 띄우기  (0) 2015.01.27
HTML 기본 태그 #5 - css & Style  (0) 2015.01.27
자바스크립트 펼치기 접기 소스 2  (0) 2015.01.27
자바스크립트 펼치기 접기 소스  (0) 2015.01.27

댓글()

HTML 기본 태그 #5 - css & Style

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:26
반응형

STYLE - 스타일시트

속성

속성값 및 의미

background-color배경색 지정.
<table class="이름"> ... </table> 처럼 table, td에서도 사용할 수 있다.
background-imageurl(이미지가 있는 위치)undefined.
이미지 삽입.
background-repeatno-repeat 속성값을 주면 바둑판식 채우기가 아닌 해당 이미지만 보여준다.
.bg{background-repeat:no-repeat;background-img:url(주소)undefined;}
background-attachmentfixed 속성값으 주면 삽입한 이미지를 fix 형태로 바둑판 채우기가 된다.
border숫자px solid 형태로 table의 외각 테두리 지정.
<table clss="이름" border=0> 방식으로 테두리를 지웠다고 해도 "숫자px"에 의해서 외각 테두리가 보인다.
border-colortable의 테두리 색 지정.
border-left위의 border와 같으며 table의 테두리 왼쪽 외각 지정.
border-top위의 border와 같으며 table의 테두리 위쪽 외각 지정.
border-right위의 border와 같으며 table의 테두리 오른쪽 외각 지정.
border-bottom위의 border와 같으며 table의 테두리 아래쪽 외각 지정.
들여쓰기<td style="padding-left:숫자"> 형태로 테이블안의 왼쪽 들여쓰기 지정.
이것은 head안의 style에서 이름{padding-left:숫자;}의 형태로 명시할 수 있다.
<td class="이름"> 형태로 사용한다.
font-size글자 크기.
font-family글꼴 지정.
color글자색 크기
leter-spacing속성값은 숫자px.
문자와 문자 사이 및 스페이스 공간의 여백 지정.
word-spacing속성값은 숫자px.
스페이스(띄어쓰기)의 공백 넓이를 지정한다고 보면된다.
text-decoration  blink           : 줄이 그어지지 않는다.
  underline     : 밑줄 쫘악~~.
  line-through : 글 중간에 줄 긋기.
  overline      : underline의 반대 의미로 글 위에 줄 긋기.

필터효과

FILTER글자에 사용하는 속성값들 ..
blur(), glow(), fliph(), flipv() ..
속성값에서 blur(strength=숫자) 형태로 strength에 부여 받은 숫자에 영향을 받아서 해당 필터 속성의 농도가 틀려진다.
이미지에 사용하는 ..
alpha(opacity=100, style=1 finishopacity=0)의 형태로 style은 1~3까지 사용한다.
특히 배경 그림이 있는 문서의 테이블을 만들면 해당 부분이 하얀색으로 나온다.
이럴 경우 테이블에서 다음과 같이 <table style="filter:alpha( .. .. ..)"> 형태로 사용하면 그러한 부분은 어느정도 해소된다.

ex) 1. 이미지 위에 마우스가 유무에 따른 필터 ..
<img src="주소" onmouseout="this.style.filter='filtername'" onmouseover="this.style.filter='invert'">
onmouseout은 마우스가 이미지에 없는 경우, onmouseover는 마우스가 이미지 안에 있는 경우.
this.style.filter = filtername, gray, invert, fliph, flipv, xray 값이 있다.
원본을 이미지를 그대로 나타낼려면 this.style.filter='filtername' 값을 주면 된다.

 

ex) 2. iframe에서 사용.
<iframe src="주소" width="값" height="값" style="filter:alpha(opacity=75)">

 

ex) 3. onmousedown를 이용한 새창 띄우기.
  <script>
    function mouse_click(url, winname,features) {
        window.open(url,winname,features);
    }
  </script>
  </head>
  <body topmargin="0" leftmargin="0">
    <a href="#" onmousedown="mouse_click('새창주소','','width=50%길이,height=50%')">
    <img src="클릭할 이미지 주소" width="65%"></a>
   .. .. ..
  </body>


참고 - 팝업 띄우기   

<html><head><title>팝업창띄우기</title>

<script language="javascript">
    function window_open() {
         window.open('팝업창파일주소', 'popup', 'top=0, left=0, width=260, height=260 directories=no')
    }
</script>
  </head>
  <body onload="window_open()">

스타일시트 사용 예 ..

1. head안에서 사용하는 방법
  <head>
  <style type="text/css">
    <!--
        body{font-size:12pt; font-family:맑은고딕;color:blue;}
        font{font-size:12pt; font-family:맑은고딕;color:green;}
        font.a{font-size:12pt; font-family:맑은고딕;color:blue;}
        .b{font-size:10pt; font-family:맑은고딕;color:blue;}
        td{font-size:9pt;color:#0000ff;}
    -->
  </style>
  </head>
  <body>
  Body, font, td{ } 형태로 여러개의 인자를 하나의 스타일로 지정할 수 있다.
  { } 안은 속성이름:속성값; 형태로 명시한다.
        <font>font 스타일</font>
        <font class="a">font.a 스타일</font>
        <font class="b">.b 스타일</font>
        <span class="b">.b 스타일.</span>
        <div class="b">.b 스타일</div>
  </body>

2. head안에서 사용하는 또 다른 방법
  <head>
     <link rel="stylesheet" type="text/css" href="스타일시트가있는 파일">
  </head>
  <body>
  스타일시트를 명시해 놓은 파일을 head 안에서 링크를 걸어 놓고 사용해도 된다.
  해당 파일의 내용은 - 명시할이름{속성이름:속성값;속성이름:속성값;} 으로 만들어 놓으면 된다.
  </body>

3. body안에서 사용하는 방법
  <body>
    <font style="font-size:12pt;font-family:달나라토끼;color:#00ff00">
      font 태그 자체에 style 속성을 직접 줘서 사용하기.
    </font>
  </body>

4. 링크를 클릭하면 글 색이 변하는 것을 방지하기 위한 방법
<head>
<style>
<!--
a{font-size:12pt;color:blue;text-decoration:none;}
a:visited{font-size:12pt;color:blue;text-decoration:none;}
-->
</style>
</head>
<body>
<a href="링크될 곳">클릭</a>
</body>

 

 

[출처] Spritual Awakening | Yury (http://forlov3u.blog.me/20124855699)

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

클릭시 팝업창 띄우기  (0) 2015.01.27
다른페이지 특징위치로 이동하는 태그  (0) 2015.01.27
자바스크립트 펼치기 접기 소스 2  (0) 2015.01.27
자바스크립트 펼치기 접기 소스  (0) 2015.01.27
스마트폰으로 접속시 특정 사이트로 이동 소스 Javascript  (0) 2015.01.27

댓글()

자바스크립트 펼치기 접기 소스 2

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:25
반응형

<SCRIPT LANGUAGE="JavaScript">
<!--
  function viewStyle(obj){
    while(true){
      if((obj=obj.nextSibling).nodeName=="DIV"){
        obj.style.display=(obj.style.display!='block')?'block':'none';
        obj.style.fontSize = "22px"; //12px로 변경하세요.. 확인하시라고 크게 하였습니다.
        obj.style.color = "#FF0000";
        break;
      }
    }
  }
 
//-->
</SCRIPT>
<a href='#' onclick="viewStyle(this);return false">클릭</a>
<DIV style='display:none'>내용을 쓰시오</DIV>

 

 

[출처] 지식인 | scriptwin (http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=105583617&qb=amF2YXNjcmlwdCDtjrzsuZjquLA=&enc=utf8&section=kin&rank=1&search_sort=0&spq=0&pid=glaZ3soi5UZsstEInqVsss--208008&sid=TgFE3N8iAU4AABm6G3Y)

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

다른페이지 특징위치로 이동하는 태그  (0) 2015.01.27
HTML 기본 태그 #5 - css & Style  (0) 2015.01.27
자바스크립트 펼치기 접기 소스  (0) 2015.01.27
스마트폰으로 접속시 특정 사이트로 이동 소스 Javascript  (0) 2015.01.27
[HTML] 스마트폰에서 홈페이지 잘 보이게 하는 방법  (0) 2015.01.27

댓글()

자바스크립트 펼치기 접기 소스

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:25
반응형

일단 다음 예제를 보자. 

글 내용 펼치기

위와 같은 효과를 주기 위해서는 Span태그의 스타일인 Display를 조절하면 된다. 위 예제의 소스코드는 다음과 같다. 

(Language : html4strict)
  1. <SPAN id=test1_1><A  href="javascript:Open();">글 내용 펼치기</A></SPAN>
  2. <SPAN id=test1_2 style="DISPLAY: none"><A href="javascript:Close();">글 내용 접기</A><br />글 내용을 펼쳐야 이 부분이 보이게 됩니다. </SPAN>
  3. <script name=javascript>
  4.     function Open()
  5.     {
  6.         document.getElementById('test1_1').style.display='none';
  7.         document.getElementById('test1_2').style.display='';
  8.     }
  9.     function Close()
  10.     {
  11.         document.getElementById('test1_2').style.display='none';
  12.         document.getElementById('test1_1').style.display='';
  13.     }
  14. </script>


    15. 원리는 간단하다. '글 내용 펼치기' 링크와 실제 보여줄 내용을 각각 다른 span 안에 넣어둔 후 두 레이어가 서로 번갈아가며 보이면 되는 것이다. 이를 자바스크립트를 이용하여 구현하기 위해서는 getElementById라는 함수를 쓰게 되는데, 이는 span 태그에서 설정한 id를 이용하여 해당 객체를 얻어내는 기능을 한다. 객체를 얻어 낸 후에는 스타일의 디스플레이 속성을 조절하게 된다. 디스플레이 속성에 아무 값도 주지 않았을 경우에는 레이어가 보이며, none 속성을 주면 레이어가 보이지 않게 된다.
     
     
    [출처] ^^ | 올리브 (http://blog.naver.com/jungang2/100038911567)


반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

HTML 기본 태그 #5 - css & Style  (0) 2015.01.27
자바스크립트 펼치기 접기 소스 2  (0) 2015.01.27
스마트폰으로 접속시 특정 사이트로 이동 소스 Javascript  (0) 2015.01.27
[HTML] 스마트폰에서 홈페이지 잘 보이게 하는 방법  (0) 2015.01.27
한개의 체크박스만 선택 가능하게 설정  (0) 2015.01.27

댓글()

스마트폰으로 접속시 특정 사이트로 이동 소스 Javascript

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:25
반응형

아이폰, 아이팟, 윈도우모바일, 심비안, 블랙베리, 안드로이드로 접속시 웹하드로 바로 접속되게 만들어주는 소스.
아닐 경우 다른 사이트로 이동.

 

Javascript, HTML에서 바로 사용이 가능함.

<script type="text/javascript">
 if((navigator.userAgent.match(/iPhone/i))
 || 
 (navigator.userAgent.match(/iPod/i))
 || 
 (navigator.userAgent.match(/Windows CE/i)) 
 || 
 (navigator.userAgent.match(/Symbian/i)) 
 ||
 (navigator.userAgent.match(/BlackBerry/i))
 ||
 (navigator.userAgent.match(/Android/i)) )
 {
    parent.window.location.href='http://heeseop.lgnas.com:8000';
 } else {    parent.window.location.href='http://heeseop.lgnas.com/gb/bbs/board.php?bo_table=Guestbook'; }
 
</script>


 

[출처] HEESEOP'S BLOG (http://wima57.tistory.com/287)

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

자바스크립트 펼치기 접기 소스 2  (0) 2015.01.27
자바스크립트 펼치기 접기 소스  (0) 2015.01.27
[HTML] 스마트폰에서 홈페이지 잘 보이게 하는 방법  (0) 2015.01.27
한개의 체크박스만 선택 가능하게 설정  (0) 2015.01.27
체크박스 전체선택 해제 & 체크박스 선택 삭제  (0) 2015.01.27

댓글()

[HTML] 스마트폰에서 홈페이지 잘 보이게 하는 방법

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:24
반응형

기존 홈페이지의 html 헤더에 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">

위의 메타 태그만 넣으시면 스마트폰에서 잘 보이실 겁니다. 

[발췌] 지식인 | momma3 (http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=105&docId=130039598&qb=PG1ldGEgbmFtZT0gY29udGVudD0=&enc=utf8&section=kin&rank=2&search_sort=0&spq=0&pid=gQrtuv331xlssbMu8aKssv--493412&sid=Tfq@aiyL@k0AAFHFlKA)

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

자바스크립트 펼치기 접기 소스  (0) 2015.01.27
스마트폰으로 접속시 특정 사이트로 이동 소스 Javascript  (0) 2015.01.27
한개의 체크박스만 선택 가능하게 설정  (0) 2015.01.27
체크박스 전체선택 해제 & 체크박스 선택 삭제  (0) 2015.01.27
아이프레임 높이 자동조절  (0) 2015.01.27

댓글()

한개의 체크박스만 선택 가능하게 설정

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:23
반응형

http://www.jasko.co.kr/src/20011002/select_one.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Jasko Sample Script </TITLE>
<style>
body,td {font-size:12px}
</style>

<!----- 1. 아래의 스크립트를 HEAD 부분에 붙여 넣으세요 -------->

<SCRIPT LANGUAGE="JavaScript">
<!-- 
function checkBoxValidate(cb) {
for (j = 0; j < 8; j++) {
if (eval("document.myform.ckbox[" + j + "].checked") == true) {
document.myform.ckbox[j].checked = false;
if (j == cb) {
document.myform.ckbox[j].checked = true;
         }
      }
   }
}
//  -->
</script>

<!------------------ 여기까지 --------------->

</HEAD>

<BODY>

<p align=center>
아래 체크박스에서는 한가지만 선택이 가능합니다
<p align=center>

<!----- 2. 원하는 위치에 아래와 같이 코드를 붙여 넣으세요 ------->

<form name=myform>
항목 1<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(0)"><br>
항목 2<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(1)"><br>
항목 3<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(2)"><br>
항목 4<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(3)"><br>
항목 5<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(4)"><br>
항목 6<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(5)"><br>
항목 7<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(6)"><br>
항목 8<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(7)"><br>
</form>

<!------------------ 여기까지 -------------->

</BODY>
</HTML>

 

[출처] 자스코 (http://www.jasko.com/xe/6573)

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

스마트폰으로 접속시 특정 사이트로 이동 소스 Javascript  (0) 2015.01.27
[HTML] 스마트폰에서 홈페이지 잘 보이게 하는 방법  (0) 2015.01.27
체크박스 전체선택 해제 & 체크박스 선택 삭제  (0) 2015.01.27
아이프레임 높이 자동조절  (0) 2015.01.27
글 복사시 출처 자동으로 넣어주기  (0) 2015.01.27

댓글()

체크박스 전체선택 해제 & 체크박스 선택 삭제

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:22
반응형

================================================================

 function doChkBox(bool) { // 체크박스 전체선택/해제 
    var obj = document.getElementsByName("coworkCd"); 
    for (var i=0; i<obj.length; i++) obj[i].checked = bool; 
     }

 

  <input type="checkbox"  onclick="doChkBox(this.checked);"/>

================================================================

 

 

================================================================

  function doSelDel(){ //체크박스 선택 삭제 
   var selRoom = document.frm.coworkCd;       
   var cnt=0;
      var roomNo="";
  if (selRoom.length > 1){
   for (var i=0; i< selRoom.length; i++){
       if ( selRoom[i].checked){
        cnt++;
     roomNo =roomNo+","+selRoom[i].value;
     }
   }
     if (cnt==0) {
         alert("선택하신 글이 없습니다.");
      return;
     }
    }
    //체크박스가 하나밖에 없을때 경우
    else{
     if ( selRoom.checked ){
     cnt++;                    
     roomNo = selRoom.value; 
     }
     if (cnt==0) {
         alert("선택하신 글이 없습니다.");
      return;
     }                         
  }
     var param = "?coworkCd="+roomNo;    
      if(confirm('정말 삭제하시겠습니까?')){
       document.frm.action="checkDel.do"+param;
       document.frm.submit();  
    }
  }

 

 <a href="javascript:doSelDel("><img src="/images/admin/btn_del.gif" alt="삭제" /></a>

================================================================

 

 

[출처] ustamun 님의 블로그 | 훈남처리 (http://blog.naver.com/ustamun?Redirect=Log&logNo=110101780230)

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

[HTML] 스마트폰에서 홈페이지 잘 보이게 하는 방법  (0) 2015.01.27
한개의 체크박스만 선택 가능하게 설정  (0) 2015.01.27
아이프레임 높이 자동조절  (0) 2015.01.27
글 복사시 출처 자동으로 넣어주기  (0) 2015.01.27
[html] 웹페이지 자동 이동 소스  (0) 2015.01.27

댓글()

아이프레임 높이 자동조절

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:21
반응형

onload="this.style.height=this.contentWindow.document.body.scrollHeight;"

 

위 코딩을 아이프레임 소스에 넣으면 됩니다.. 그러면 자료에 따라 높이가 자동조절 됩니다.

 

예를 들면.. 아래와 같이 아이프레임 속성을 주시고 그 뒤에 태그를 추가하시면 됩니다.. ^^

 

프레임 속성에 관한 자세한 사항은 아래 게시물에 있습니다.

 

<iframe name="frame" src="sell.htm" width="600" height="0" frameborder="0" onload="this.style.height=this.contentWindow.document.body.scrollHeight;"></iframe>

 

 

[출처] 오늘도 맑음..^^ | 셰프 (http://wishkjh.blog.me/80016

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

한개의 체크박스만 선택 가능하게 설정  (0) 2015.01.27
체크박스 전체선택 해제 & 체크박스 선택 삭제  (0) 2015.01.27
글 복사시 출처 자동으로 넣어주기  (0) 2015.01.27
[html] 웹페이지 자동 이동 소스  (0) 2015.01.27
[JavaScript] 링크 클릭시 특정 주소 클립보드로 복사  (0) 2015.01.16

댓글()

글 복사시 출처 자동으로 넣어주기

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:19
반응형

글 복사시 출처 자동으로 넣어주기
2006/08/02 16:26 in HTML/CSS/JS

 

스크립트


<script type="text/javascript" language="javascript">
  // 글 복사시 출저 삽입함수 호출
  function contents_cp()
  {
     if (window.event)
     {
        window.event.returnValue = true;
        window.setTimeout('attach_kinref()', 25);
     }
  }

  // 클립보드에 들어갈때 출처 삽입하기
  function attach_kinref()
  {
     if (window.clipboardData) // IE
     {
        // get data from clipboard
        var txt = window.clipboardData.getData('Text');

        // attach the source at the end of text
        // 아래 빨간색 글씨 부분에 자신이 원하는 출처 글귀를 넣으면 됨.
        txt = txt + 'rn출처 : 상현넘™ [SHBLITZ.NET]';

        // set data to clibboard
        var result = window.clipboardData.setData('Text', txt);
     }
  }
</script>

 


사용하기
* 문서 전체에 반영하기
  <body onCopy='contents_cp();'> html 내용 </body>

 

* 특정 부분에만 반영하기
  <div onCopy='contents_cp();'> 내용 </div>

 

작성 : 상현넘™ [SHBLITZ.NET]

 

[출처] 글 복사시 출처 자동으로 넣어주기|작성자 다빈


반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

체크박스 전체선택 해제 & 체크박스 선택 삭제  (0) 2015.01.27
아이프레임 높이 자동조절  (0) 2015.01.27
[html] 웹페이지 자동 이동 소스  (0) 2015.01.27
[JavaScript] 링크 클릭시 특정 주소 클립보드로 복사  (0) 2015.01.16
[html] 도메인 포워딩 소스  (0) 2015.01.16

댓글()
이전 1 ··· 3 4 5 6 7 다음

티스토리툴바