문서를 열 때마다 전혀 다른 문서처럼 보이게 하기
홈페이지를 방문하거나 특정 문서를 열 때마다 배경 그림이 다르게 나온다면 방문자에게 새로운 느낌을 계속 줄 수 있습니다. 기법은 매우 단순합니다. 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>
| 출처: 김중태문화원 | |
|
|