66. 창과 문서 관련 예제
66. 창과 문서 관련 예제
66.1. 문서를 열 때마다 전혀 다른 문서처럼 보이게 하기
홈페이지를 방문하거나 특정 문서를 열 때마다 배경 그림이 다르게 나온다면 방문자에게 새로운 느낌을 계속 줄 수 있습니다. 기법은 매우 단순합니다. document.write() 객체를 이용하여 <BODY> 태그를 랜덤하게 기록하면 됩니다. 기법은 매우 단순하고 소스 파일의 길이도 매우 짧지만 매번 문서를 읽을 때마다 완전히 다른 문서를 보는 것처럼 보일 수 있습니다.
먼저 <BODY> 시작 태그 안에 style 명령을 이용하여 필요한 명령을 모두 기록합니다. 다양한 효과를 낼 수 있도록 배경 그림이나 배경 색, 기타 각종 스타일을 기록합니다. 이렇게 기록한 문장을 배열에 대입시키고, document.write() 명령 안에 배열 요소를 첨가하면 똑 같은 문서를 열더라도 매번 완전히 다른 문서로 열리게 됩니다. 배경 그림이나 배경색은 완전히 달라질 수 있으며, 문서를 보여주는 글씨체와 자료의 위치도 바꿀 수 있습니다. 본 예제는 랜덤 함수를 사용하여 모양이 다른 배경 화면을 보여주도록 했습니다. 랜덤 함수 대신에 특정 시간이나 특정 날짜에 맞게 배경을 바꾸는 응용도 가능합니다.
** 사진: 같은 문서지만, 문서를 불러올 때마다 완전히 다른 문서처럼 보입니다. 마치 다른 문서를 불러온 것 같은 효과를 줍니다.
** 살펴볼 부분
1. 배열 abody[]에 스타일을 이용한 <BODY> 태그 명령을 대입하면 됩니다.
2. 배열 요소를 늘리고, <BODY> 태그의 스타일 명령을 다양하게 준다면 똑 같은 문서라도 완전히 다른 문서처럼 보여줄 수 있어 적은 노력으로도 신선한 효과를 줄 수 있습니다.
**소스 파일:
66.2. 위에서 갑자기 떨어지는 창 열기 효과
문서를 불러올 때 다양한 효과를 이용하여 창을 열 수 있다는 사실은 META 태그 명령을 설명할 때 예를 들었습니다. 좌우로 갈라지면서 창을 열거나 대각선으로 말리면서 여는 효과 등 다양한 효과를 줄 수 있습니다. 자바스크립트를 이용하면 META 태그만으로는 구현하기 힘든 다양한 창 열기 효과를 만들 수 있습니다.
ex3_02.html은 창이 위에서부터 떨어지는 듯한 느낌을 주면서 문서를 불러옵니다. 일반적인 창 열기에 비하면 매우 독특한 느낌을 줍니다.
이 외에도 다양한 방식의 창 열기 방법을 자바스크립트로 구현해놓은 프로그램이 많습니다. 그렇지만 실제로 이런 멋진 창 열기 효과는 거의 사용하지 않습니다. 왜냐하면 그만큼 창을 여는 시간이 오래 걸리기 때문입니다. 그래서 한 순간에 창을 여는 간단한 효과만 사용합니다. 부록에 실린 창 여는 효과들도 실제로 사용하기는 곤란한 예제가 많습니다. 다만 가끔씩 사용할 경우에는 독특하고 신선한 느낌을 줄 수 있습니다.
** 사진: 문서를 불러오면 위에서부터 창이 내려온 다음에 열립니다.
** 살펴볼 부분
1. self.moveBy(0,6); 명령의 수치는 창이 내려오는 속도를 설정합니다. 숫자가 클수록 빠릅니다.
2. <BODY onload="fallwin(150)">의 수치와 self.moveBy(0,6); 의 수치를 합쳐서 화면의 크기를 넘지 않게 잘 조절해야 합니다. 만약 self.moveBy(0,3);으로 설정했다면 fallwin(300)으로 설정하고, self.moveBy(0,9); 로 설정했다면 fallwin(100) 으로 설정해야 화면이 밑으로 내려가지 않고 깔끔하게 내려옵니다.
**소스 파일:
66.3. 위에서 갑자기 떨어진 다음에 진동하는 창
ex3_02.html을 응용하여 이번에는 창이 내려온 다음에 진동하는 부분을 추가하겠습니다. 진동 효과는 창의 상하좌우 위치를 순식간에 바꿈으로써 만듭니다. 창이 내려오는 효과에 진동 효과까지 추가한다면 정말 독특한 느낌을 주겠죠.
** 사진: 창이 내려온 다음에 강하게 진동합니다.
** 살펴볼 부분
1. self.moveBy(0,6); 명령의 수치는 창이 내려오는 속도를 설정합니다. 숫자가 클수록 빠릅니다.
2. <BODY onload="fallwin(150)">의 수치와 self.moveBy(0,6); 의 수치를 합쳐서 화면의 크기를 넘지 않게 잘 조절해야 합니다. 만약 self.moveBy(0,3);으로 설정했다면 fallwin(300)으로 설정하고, self.moveBy(0,9); 로 설정했다면 fallwin(100) 으로 설정해야 화면이 밑으로 내려가지 않고 깔끔하게 내려옵니다.
3. for(m = 40; m > 0; m-=4) 명령에서 m은 창이 진동하는 폭을 설정합니다. 초기 설정 값이 크면 진동폭이 크지만 진동 시간이 길어지므로 m의 초기값을 크게 잡으면 m의 증감식에서 1 이상의 크기로 빼주는 연산을 해주어야 합니다.
**소스 파일:
66.4. 일정 시간이 지나면 현재의 창을 닫거나 특정 작업 수행하기
공지사항을 비롯한 몇몇 창은 일정 시간이 지나면 자동으로 닫히게 하는 것이 좋습니다. 창을 너무 많이 열어놓고 닫지 않으면 보기에 번거롭기 때문입니다. 이때 시간을 비교하는 함수를 만들고 self.close() 명령을 사용하면 일정 시간이 지난 후에 창을 닫을 수 있습니다. 시간을 비교하는 함수는 창 닫는 일 외에도 다양한 용도로 사용할 수 있습니다. 일정 시간이 지난 다음에 갑자기 광고가 등장하거나, 화면을 돌아다니는 그림이 등장하게 만들 수도 있습니다.
** 사진: 지정된 시간이 지나면 창을 닫을 것이냐고 물어봅니다. [예(Y)]를 선택하면 창이 닫힙니다.
** 살펴볼 부분
1. self.moveBy(0,6); 명령의 수치는 창이 내려오는 속도를 설정합니다. 숫자가 클수록 빠릅니다.
**소스 파일:
