'2017/03/22 글 목록

'2017/03/22'에 해당되는 글 34건

쿠키 생성 및 가져오기

소스 설명

setCookie() - 쿠키를 만드는 함수입니다.
setCookie('쿠키이름', '쿠키값', 만료일)

쿠키이름 : 쿠키이름을 영문으로 넣어주세요.
쿠키값 : 쿠키의 값을 문자열로 넣어주세요.
만료일 : 쿠키의 만료일을 숫자로 넣어주세요
예) 만료일이 1 이면 하루동안 지속되는 쿠키입니다.
예) 만료일이 -1 이면 쿠키가 삭제됩니다.

getCookie() - 쿠키값을 가져오는 함수입니다.
getCookie('쿠키이름')

쿠키이름을 넣어 주면 해당 쿠키의 값을 반환합니다. 쿠키가 있을때만 반환하며
없으면 공백이 반환됩니다.

저작자표시 비영리 동일조건

'프론트엔드 언어' 카테고리의 다른 글

URL 가져오기 (0)	2017.03.23
피시와 모바일 구분 코드 (0)	2017.03.23
엑셀 다운로드 (0)	2017.03.22
팝업창 만들기 소스 (0)	2017.03.22
사이드 스크롤 (0)	2017.03.22

Posted by EL2A

엑셀 다운로드

상단에 이거 추가하면 된다.

저작자표시 비영리 동일조건

'프론트엔드 언어' 카테고리의 다른 글

피시와 모바일 구분 코드 (0)	2017.03.23
쿠키 생성 및 가져오기 (0)	2017.03.22
팝업창 만들기 소스 (0)	2017.03.22
사이드 스크롤 (0)	2017.03.22
HTML TABLE 중복 셀 병합 (0)	2017.03.22

Posted by EL2A

팝업창 만들기 소스

- 팝업창 닫는 소스

- 팝업창 만들기 소스

1. 옵션을 HEAD안에...
<script language="JavaScript">
function openNewWindow(window) {
open (window,"NewWindow","left=0, top=0, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=200, height=200");
}
</script> 
<a href=javascript:openNewWindow("주소입력")>새창열기</a>
2. 링크에 옵션을 지정...
<a href="javascript:;" onclick="window.open('주소입력','name','resizable=no width=200 height=200');return false">새창열기</a>
* 옵션 *
새창 뛰울때 용도에 맞게 옵션 설정을 해줍니다. "YES" 또는 "NO" 로 지정 해주면 됩니다. 
menubar - 파일, 편집, 보기....부분
toolbar - 뒤로, 앞으로, 새로고침 아이콘등이 있는 부분
directories - 연결 디렉토리가 표시되는 부분
location - 주소 입력창
status - 아래 브라우저 상태 바
scrollbars - 스크롤
resizable - 리사이즈 옵션

1.자동 띄우기
팝업창에 삽입

이벤트 팝업창을 띄우기

추천,클릭, 댓글은 필자에게 큰 힘이 됩니다.

2.프레임이 있는 팝업창 닫기
팝업창에 삽입

3.팝업창 닫고 프레임이 없는 부모창에서 원하는 페이지로 이동하기
팝업창에 삽입

<a href="javascript:MovePage();">자세한내용보기</a>

4.팝업창 닫고 프레임이 있는 부모창에서 원하는 페이지로 이동하기
팝업창에 삽입하고 팝업창의 설정은 프레임셋 페이지에 해야함
오픈창이 아닐경우에는 window.top.프레임이름.location.href="연결할파일" 적용한다

<a href="javascript:MovePage();">자세한내용보기</a>

5.팝업창 자동으로 닫기
팝업창에 삽입

<head>
<title>Close Window Timer</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">

</script>
</head>

이창은 5초후 자동으로 창이 닫힘니다.<br>

6.프레임 나눈 팝업창 한번에 닫기
팝업창에 삽입

<head>
<title>Close Window Timer</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">

</script>
</head>

이창은 5초후 자동으로 창이 닫힘니다.<br>

7.하루동안 팝업창 띄우지 않기 소스 예제1
부모창인 index.htm에 삽입

팝업창인 pop.htm에 삽입

8.하루동안 팝업창 띄우지 않기 소스 예제2
부모창인 index.htm에 삽입

팝업창인 pop.htm에 삽입

9.같은 브라우져에서 팝업 띄우기 않기
부모창인 index.htm에 삽입

팝업창인 pop.htm에 삽입

10.팝업창 가운데에 자동띄우기
팝업창에 삽입

11.부모창에서 클릭하면 팝업창 가운데에 띄우기
부모창에 삽입

12.같은 브라우져에서만 팝업 띄우기 않기
부모창인 index.htm에 삽입 _새로 브라우져를 열면 팝업창이 뜸

팝업창인 pop.htm에 삽입

13.링크걸어서 지정된 사이즈로 열기

14.자동으로 지정된 크기로 브라우저 열기

15.해상도에 맞추어 전체장으로 늘어남

<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
function winMaximizer() {
if (document.layers) {
larg = screen.availWidth - 10;
altez = screen.availHeight - 20;
} else {
var larg = screen.availWidth;
var altez = screen.availHeight;
}
self.resizeTo(larg, altez);
self.moveTo(0, 0);
}
</script>
</head>

해상도에 맞추어 전체장으로 늘어남

16.이미지 클릭시 html문서없이 큰이미지로 새창띄우기

<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
var win1Open = null
function displayImage(picName, windowName, 
windowWidth, windowHeight){
return window.open(picName,windowName,"toolbar=no,
scrollbars=no,resizable=no,width=" + (parseInt(windowWidth)+20) + ",height=" + (parseInt(windowHeight)+15)) 
} function winClose(){
if(win1Open != null) win1Open.close() 
} function doNothing(){}
</script> <script language="JavaScript1.1">
function displayImage(picName, windowName,
windowWidth, windowHeight){
var winHandle = window.open("" ,windowName,"toolbar=no,scrollbars=no,
resizable=no,width=" + windowWidth + ",height=" + windowHeight)
if(winHandle != null){
var htmlString = "<head><title>Picture</title></head>" 
htmlString += ""
htmlString += "<a href=javascript:window.close()><img src=" + picName + " border=0 
alt=닫기></a>"
htmlString += ""
winHandle.document.open()
winHandle.document.write(htmlString)
winHandle.document.close()
} 
if(winHandle != null) winHandle.focus()
return winHandle
}
</script>
</head>

17.몇초후 웹페이지이동하기 소스예제1

<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> 
<script language="JavaScript">
function nextWin()
{location = "이동할 URL"}
</script> 
</head> 
 
바로 이동한 원하는 사이트로 이동함

18.몇초후 웹페이지이동하기 소스예제2

<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> 
<script language="JavaScript">
self.location.replace('이동할 URL');
</script> 
</head>

바로 이동한 원하는 사이트로 이동함

19.자동새로고침하기

자동새로고침하기

20.해상도에 따라 다른 웹페이지 열기

21.HTML파일 없이 이미지 사이즈에 맞게 팝업창 띄우기
<script Language="Javascript">
var cnj_img_view = null;
function cnj_win_view(img){
img_conf1= new Image();
img_conf1.src=(img);
cnj_view_conf(img);
}
function cnj_view_conf(img){
if((img_conf1.width!=0)&&(img_conf1.height!=0)){
cnj_view_img(img);
} else {
funzione="cnj_view_conf('"+img+"')";
intervallo=setTimeout(funzione,20);
}
}
function cnj_view_img(img){
if(cnj_img_view != null) {
if(!cnj_img_view.closed) { cnj_img_view.close(); }
}
cnj_width=img_conf1.width+20;
cnj_height=img_conf1.height+20;
str_img="width="+cnj_width+",height="+cnj_height;
cnj_img_view=window.open(img,"cnj_img_open",str_img);
cnj_img_view.focus();
return;
}
</script>
<a href="javascript:cnj_win_view('../img/cnjlogo.gif')"><img src="../img/cnjlogo.gif" border="0" width="247" height="55"></a>

22.이미지사이즈에 맞게 새창이 열리며 휠마우스 효과를 내줌
그리고 메인(imgmove-main.html)에서 새창 띄워주는 부분
<SCRIPT LANGUAGE="JavaScript">

</script>
<a href="javascript:cnjOpen()"><img src="test.jpg" width="200" height="150" border="0"></a>
</center>
이 부분은 이미지를 보여줄 새창(img-move.html)입니다.
<style>
body {cursor:move;}
</style>

<SCRIPT LANGUAGE="JavaScript">
var ie = 1;
var windowX, windowY;
var bLargeImage = 0;
var x,y;
var InitX = 500;
// 이미지가 새창에 맞게 조절되는 부분
function fitWindowSize() 
{
if( ie )
{
window.resizeTo( InitX, InitX );
width = InitX - (document.body.clientWidth - document.images[0].width);
height = InitX - (document.body.clientHeight - document.images[0].height);
windowX = (window.screen.width-width)/2;
windowY = (window.screen.height-height)/2;
if( width > screen.width-50 )
{
width = screen.width-50;
windowX = 20;
bLargeImage = 1;
}
if( height > screen.height-80 )
{
height = screen.height-80;
windowY = 20;
bLargeImage = 1;
}
window.moveTo( windowX, windowY );
window.resizeTo( width, height+4 );
}
else
{
window.innerWidth = document.layers[0].document.images[0].width;
window.innerHeight = document.layers[0].document.images[0].height;
}
}
// 휠마우스 효과
function move() {
if(bLargeImage){ window.scroll(window.event.clientX - 50,window.event.clientY -50);
}
}
// 오른쪽 왼쪽 마우스 클릭시 창닫는 부분
function click() { 
if ((event.button==1) || (event.button==2) || (event.button==3)) {
top.self.close();
}
}
document.onmousedown=click
</script>
<img src="이미지경로" border="0" ONMOUSEMOVE="move();">

저작자표시 비영리 동일조건

'프론트엔드 언어' 카테고리의 다른 글

쿠키 생성 및 가져오기 (0)	2017.03.22
엑셀 다운로드 (0)	2017.03.22
사이드 스크롤 (0)	2017.03.22
HTML TABLE 중복 셀 병합 (0)	2017.03.22
책갈피 만들기 (0)	2017.03.22

Posted by EL2A

사이드 스크롤

- javascript

var stmnLEFT = 30; // 오른쪽 여백
   var stmnGAP1 = 0; // 위쪽 여백
   var stmnGAP2 = 10; // 스크롤시 브라우저 위쪽과 떨어지는 거리
   var stmnBASE = 300; // 스크롤 시작위치
   var stmnActivateSpeed = 20; //스크롤을 인식하는 딜레이 (숫자가 클수록 느리게 인식)
   var stmnScrollSpeed = 10; //스크롤 속도 (클수록 느림)
   var stmnTimer;

- css

- body

-sideinfo (넣고싶은 위치, 어느곳이나 가능)

저작자표시 비영리 동일조건

'프론트엔드 언어' 카테고리의 다른 글

엑셀 다운로드 (0)	2017.03.22
팝업창 만들기 소스 (0)	2017.03.22
HTML TABLE 중복 셀 병합 (0)	2017.03.22
책갈피 만들기 (0)	2017.03.22
CSS3 미디어 쿼리 (0)	2017.03.22

Posted by EL2A

HTML TABLE 중복 셀 병합

tr td 를 이용한 테이블에서 중복된 셀을 자동으로 병합해 준다.

- HTML

- CSS

- Javascript

저작자표시 비영리 동일조건

'프론트엔드 언어' 카테고리의 다른 글

팝업창 만들기 소스 (0)	2017.03.22
사이드 스크롤 (0)	2017.03.22
책갈피 만들기 (0)	2017.03.22
CSS3 미디어 쿼리 (0)	2017.03.22
구글 지도 추가 (0)	2017.03.22

Posted by EL2A

티스토리 하이라이터

</textarea>

- 결과

저작자표시 비영리 동일조건

'그외' 카테고리의 다른 글

델파이 컴포넌트 (0)	2017.03.24
게임 제작의 변화 (0)	2017.03.22
게임 개발환경 및 도구 (0)	2017.03.22
게임의 개요 정리 (0)	2017.03.22
파이어폭스 모바일모드 (0)	2017.03.22

Posted by EL2A

책갈피 만들기

ANCHOR심기

저기가기를 클릭하면

ID가 there인 저기로 가게 된다.

저작자표시 비영리 동일조건

'프론트엔드 언어' 카테고리의 다른 글

사이드 스크롤 (0)	2017.03.22
HTML TABLE 중복 셀 병합 (0)	2017.03.22
CSS3 미디어 쿼리 (0)	2017.03.22
구글 지도 추가 (0)	2017.03.22
DIV 가운데 정렬 기법 (0)	2017.03.22

Posted by EL2A

CSS3 미디어 쿼리

@media only screen and (max-width:768px){

.main { width:1200px; }

}

css3의 미디어쿼리를 사용할 수 있다.

화면의 크기가 768 미만으로 갔을 경우 안에 있는 .main 이라는 css가 적용된다

※ 참고

http://www.nextree.co.kr/p8622/

저작자표시 비영리 동일조건

'프론트엔드 언어' 카테고리의 다른 글

HTML TABLE 중복 셀 병합 (0)	2017.03.22
책갈피 만들기 (0)	2017.03.22
구글 지도 추가 (0)	2017.03.22
DIV 가운데 정렬 기법 (0)	2017.03.22
META 호환성 (2)	2017.03.22

Posted by EL2A

구글 지도 추가

- 주소 검색 - 좌측 상단 햄버거 버튼 클릭 - 지도 공유 또는 퍼가기 - 지도 퍼가기 - 크기(작게/중간/크게) 설정하고 소스 사용

출처 : https://www.cameron.co.kr:47741/xe_tip/4987

저작자표시 비영리 동일조건

'프론트엔드 언어' 카테고리의 다른 글

책갈피 만들기 (0)	2017.03.22
CSS3 미디어 쿼리 (0)	2017.03.22
DIV 가운데 정렬 기법 (0)	2017.03.22
META 호환성 (2)	2017.03.22
HTML5 element 구성 (0)	2017.03.22

Posted by EL2A

DIV 가운데 정렬 기법

absolute 와 left:50%를 이용하여 가운데 정렬

{ width: 400px; position: absolute; margin-left: -200px; left: 50%; }

width값이 400일경우 margin-left 값을 -200만큼 주고 left값을 50%로 설정하면 가운데 정렬이 쉽게 된다.

※width값이 고정되지 않은 경우

{ position: absolute; left: 50%; transform: translateX(-50%); }

출처 : http://webdir.tistory.com/31

저작자표시 비영리 동일조건

'프론트엔드 언어' 카테고리의 다른 글

CSS3 미디어 쿼리 (0)	2017.03.22
구글 지도 추가 (0)	2017.03.22
META 호환성 (2)	2017.03.22
HTML5 element 구성 (0)	2017.03.22
IE7환경 Z-INDEX 문제 해결 (0)	2017.03.22

Posted by EL2A

EL2A의 티스토리

'2017/03/22'에 해당되는 글 34건

쿠키 생성 및 가져오기

'프론트엔드 언어' 카테고리의 다른 글

엑셀 다운로드

'프론트엔드 언어' 카테고리의 다른 글

팝업창 만들기 소스

'프론트엔드 언어' 카테고리의 다른 글

사이드 스크롤

'프론트엔드 언어' 카테고리의 다른 글

HTML TABLE 중복 셀 병합

'프론트엔드 언어' 카테고리의 다른 글

티스토리 하이라이터

'그외' 카테고리의 다른 글

책갈피 만들기

'프론트엔드 언어' 카테고리의 다른 글

CSS3 미디어 쿼리

'프론트엔드 언어' 카테고리의 다른 글

구글 지도 추가

'프론트엔드 언어' 카테고리의 다른 글

DIV 가운데 정렬 기법

'프론트엔드 언어' 카테고리의 다른 글

카테고리

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

티스토리툴바