sub_title
 Javascript
제   목 [창과문서] 문서를 열 때마다 전혀 다른 문서처럼 보이게 하기
작성자 웹스톤 등록일 2007-09-20 12:43:58 조회수 5,458
문서를 열 때마다 전혀 다른 문서처럼 보이게 하기

홈페이지를 방문하거나 특정 문서를 열 때마다 배경 그림이 다르게 나온다면 방문자에게 새로운 느낌을 계속 줄 수 있습니다. 기법은 매우 단순합니다. document.write() 객체를 이용하여 <BODY> 태그를 랜덤하게 기록하면 됩니다. 기법은 매우 단순하고 소스 파일의 길이도 매우 짧지만 매번 문서를 읽을 때마다 완전히 다른 문서를 보는 것처럼 보일 수 있습니다.

먼저 <BODY> 시작 태그 안에 style 명령을 이용하여 필요한 명령을 모두 기록합니다. 다양한 효과를 낼 수 있도록 배경 그림이나 배경 색, 기타 각종 스타일을 기록합니다. 이렇게 기록한 문장을 배열에 대입시키고, document.write() 명령 안에 배열 요소를 첨가하면 똑 같은 문서를 열더라도 매번 완전히 다른 문서로 열리게 됩니다. 배경 그림이나 배경색은 완전히 달라질 수 있으며, 문서를 보여주는 글씨체와 자료의 위치도 바꿀 수 있습니다. 본 예제는 랜덤 함수를 사용하여 모양이 다른 배경 화면을 보여주도록 했습니다. 랜덤 함수 대신에 특정 시간이나 특정 날짜에 맞게 배경을 바꾸는 응용도 가능합니다.





** 사진: 같은 문서지만, 문서를 불러올 때마다 완전히 다른 문서처럼 보입니다. 마치 다른 문서를 불러온 것 같은 효과를 줍니다.

** 살펴볼 부분
1. 배열 abody[]에 스타일을 이용한 <BODY> 태그 명령을 대입하면 됩니다.
2. 배열 요소를 늘리고, <BODY> 태그의 스타일 명령을 다양하게 준다면 똑 같은 문서라도 완전히 다른 문서처럼 보여줄 수 있어 적은 노력으로도 신선한 효과를 줄 수 있습니다.

**소스 파일:


<HTML>
<HEAD>
---<TITLE> ex3_01.html - 문서를 열 때마다 전혀 다른 문서처럼 보이게 하기 </TITLE>
</HEAD>
<BODY>
---<SCRIPT language="JavaScript"> <!--
------var abody=new Array(); //배경 명령으로 사용할 배열
------abody[0]="<BODY style="background-image : url(icon/i0012.jpg) ; background-repeat : no-repeat ; background-attachment : fixed;">"; //하나의 큰 그림을 배경으로 사용
------abody[1]="<BODY style="background-color : gold; font-size: 70px; color: red; font-weight: bold; ">"; //gold 색의 배경에 빨간색 글꼴을 지정
------abody[2]="<BODY style="background-image : url(icon/i0024.gif); background-repeat : repeat ; font-size: 30px; color: navy;">"; //작은 그림을 타일처럼 깔고 파란 색 글씨를 기본 글꼴로 설정
------vl=abody.length; //배열 요소의 크기
vn=Math.floor(Math.random() * vl); //배열 요소 크기만큼 랜덤한 수 얻음
------document.write(abody[vn]); //배열 요소에 해당하는 <BODY> 태그를 실행시킴
//--> </SCRIPT>
---문서 열 때마다 다르게 보이기 <BR>
---복이의 축기 묘기 <BR>
<IMG src="icon/i0048.gif">
</BODY>
</HTML>

출처: 김중태문화원
 
0
    
 
0
        list
 
※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.
line
reply cancel
 
번호 제목 글쓴이 추천 조회 날짜
36  자바 스크립트를 이용한 Base64 인코딩, 디코딩 하는 프로그램 예제 파일   member 아침마당 10 / 1 5041 2010-09-07
35  [프린트] 웹페이지의 선택된 영역만 인쇄하기   member 억새풀 0 / 0 10393 2008-02-28
34  자바스크립트에서 파일용량 체크하기   member 억새풀 1 / 0 5518 2008-01-09
33  [HTML] 폼에대한 142가지의 다양한 js 소스   member 웹스톤 1 / 1 6353 2008-01-05
32  자바스크립트 기초(3)   member 웹돌이 0 / 0 7402 2007-12-11
31  자바스크립트 기초(2)   member 웹돌이 2 / 0 6235 2007-12-11
30  자바스크립트 기초(1)   member 웹돌이 2 / 0 9924 2007-12-11
29  [미디어] 배경음악 제어하기   member 오렌지 1 / 0 4245 2007-12-01
28  [form] 텍스트 박스에 자리수 차면 커서 이동시키기   member 다자래 0 / 0 7569 2007-12-01
27  텍스트박스에 영문 대소문자 변환하기..   member 파도 0 / 0 3632 2007-11-30
26  [창과문서] 오른쪽 마우스 사용 못하게 하기   member 웹스톤 0 / 0 4005 2007-11-27
25  [Window] 팝업창에 Post 방식으로 값 넘기기   member 다자래 4 / 1 52754 2007-11-21
24  [Document] 페이지 위치를 알아내기!   member 오렌지 0 / 0 3975 2007-11-21
23  [함수] 자주사용되는 함수들   member 오렌지 0 / 0 4470 2007-11-21
22  [Document] 태그연습장   member 오렌지 0 / 0 7045 2007-11-21
21  [출력] 원하는 부분만 인쇄하기   member 웹스톤 0 / 1 5948 2007-11-20
20  [FORMS] 포인트 추가/감소 태크   member 오렌지 0 / 0 4039 2007-11-20
19  [Window] 공지창 하루에 한번띄우기 첨부파일   member 오렌지 1 / 0 7586 2007-11-20
18  [창과문서] input 박스에 중복 값을 찾아내는 스크립트   member 웹스톤 0 / 0 12315 2007-11-17
17  각종함수모음   member 웹돌이 0 / 0 4936 2007-10-09
16  ESC 누르면 닫히는 팝업창!   member 웹돌이 0 / 0 4463 2007-09-21
15  [창과문서] 문서를 열 때마다 전혀 다른 문서처럼 보이게 하기 이미지   member 웹스톤 0 / 0 5458 2007-09-20
14  [창과문서] 화면 해상도 보여주기   member 웹스톤 0 / 0 4003 2007-09-19
13  썸네일 플러스 이미지업로드 추가   member 웹돌이 0 / 0 4226 2007-09-18
12  multiple select에 추가하는 예제   member 컴퓨터존 0 / 0 4796 2007-09-12
write
[2] button