64. 글월(text) 표시 프로그램

64.1. 타자로 한 자씩 입력하는 것 같은 타이핑 효과

타자로 치는 것 같은 타이핑 효과는 공지사항이나 안내문을 보여주고자 할 때 사용자의 시선을 주목시킬 수 있으며 많은 문장을 좁은 화면에 표시할 수 있는 장점이 있습니다.
이 프로그램은 보여줄 문장을 배열에 집어넣고 배열에서 한 글자씩 꺼내서 화면에 표시합니다. 이때 setTimeout() 함수를 이용하여 글씨를 표시하는 속도를 조절함으로써 한 글자씩 타자 치는 느낌을 주는 것입니다.

** 사진: 화면에 한 글자씩 글씨가 표시됩니다. 한 줄이 넘어가면 다음 줄로 자동 이동하며, 글 상자보다 글이 많을 때는 위로 스크롤됩니다.

** 살펴볼 부분
1. <BODY> 시작 태그 안에 onLoad="typing()" 명령을 삽입합니다.
2. <TEXTAREA wrap="physical" rows="4" cols="40" name="gul"> 명령은 화면에 표시될 글월 상자의 크기입니다. rows를 고치면 위아래(줄) 길이를, cols를 고치면 좌우(칸) 길이를 변경할 수 있습니다. 글월 상자의 영역보다 문장의 길이가 길 경우에는 스크롤막대를 이용하여 내용을 확인할 수 있습니다. 물론 <FORM> <TEXTAREA> 양식 대신 다른 양식을 이용하는 것도 가능하지만 문장의 길이에 구애받지 않는 <TEXTAREA> 양식이 가장 적합니다.
3. 보여줄 문장이 많다면 agul[] 배열에 agul[3], agul[4].. 등을 추가하시면 되고, 문장이 적다면 배열 요소를 줄여주면 됩니다.
4. setTimeout("typing()",10); 안의 숫자가 글자 표시 속도입니다. 1이 가장 빠르고, 수치가 클수록 타자 치는 속도가 느려집니다.

**소스 파일:

<HTML> <HEAD> <TITLE> ex1_01.html - 타자로 한 글자씩 입력하는 것 같은 타이핑 효과 </TITLE> <STYLE type="text/css">  </STYLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY onLoad="typing()"> <DIV class="t1">타이핑 효과 <BR></DIV> <FORM name="taja"> <TEXTAREA wrap="physical" rows="3" cols="40" name="gul"> </TEXTAREA> </FORM> </BODY> </HTML>

**잠깐: 같은 이름의 이벤트 핸들러로 두 개 이상의 명령을 실행해야 할 경우에는 ; 기호로 구분합니다.
<BODY> 태그 안에 하나의 이벤트 핸들러로 두 개 이상의 명령을 실행시켜야 할 경우가 있습니다. 예를 들어 onLoad="typing()" 명령과 onLoad="scroll()" 명령을 동시에 사용해야 할 경우가 있습니다. 이처럼 하나의 이벤트에 두 개 이상의 명령을 실행시켜야 할 때는 ; 기호로 두 명령을 구분해줍니다.

<BODY onLoad="typing(); scroll()">

이렇게 ; 기호로 각 명령을 구분해주면 onLoad 이벤트 핸들러 명령을 한 번만 적어도 두 개 이상의 함수나 명령을 실행시킬 수 있습니다.

64.2. 화면 왼쪽과 위쪽으로 글과 그림 이동하는 효과

화면을 좀더 화려하게 만드는 주요 기법 중의 하나는 글이나 그림 같은 자료를 움직이게 만드는 것입니다. 익스플로러의 경우 <MARQUEE> 태그를 이용하여 문장을 상하좌우로 스크롤시키는 효과를 쉽게 얻을 수 있습니다. 표를 이용하여 필요한 영역을 적당한 배경색으로 지정한 다음에 <MARQUEE> 태그를 이용하면 복잡한 자바스크립트를 사용하지 않고도 매우 주목받는 텍스트 효과를 얻을 수 있습니다. 다음 예제는 <MARQUEE> 태그만을 이용하여 문장을 왼쪽이나 위로 이동시키는 효과를 수행합니다.

** 사진: 첫 번째 표의 문장은 오른쪽에서 왼쪽으로 이동하고, 두 번째 표의 그림과 글은 아래서 위로 스크롤됩니다.

** 살펴볼 부분
1. <MARQUEE> 태그의 속성 중에 direction 속성에 up, down, left, right 의 네 가지 값을 지정하면 원하는 방향으로 문장을 이동시킬 수 있습니다. 또한 scrollAmount 속성은 속도를 지정하는 것인데 1이 제일 느리고 수치가 커질수록 이동 속도가 빨라집니다. style 속성을 이용하면 문장을 표시할 영역을 지정할 수 있습니다. "width:800;height:20“의 의미는 좌우 너비가 800 픽셀, 위아래 20 픽셀의 크기로 설정한다는 뜻입니다.
2. 이동할 문장의 색이나 글꼴은 스타일로 지정해 사용하는 것이 좋습니다.
3. <MARQUEE> 시작 태그와 끝 태그 사이에 <IMG> 태그를 이용하면 그림도 함께 스크롤시킬 수 있습니다.

**소스 파일:

64.3. 지정된 방향으로 끊임 없이 움직이는 글과 그림

<MARQUEE> 태그를 이용하면 오른쪽이나 아래로도 문장을 스크롤시킬 수 있습니다. ex1_02.html은 스타일에 자바스크립트를 이용한 예제입니다. 처음 세 문장은 자바스크립트를 이용하여 출력했고, 마지막 아래로 스크롤되는 문장만 태그를 이용했습니다.

** 사진: 지정한 문장이 상하좌우 어느 방향으로도 스크롤됩니다. 표나 그림을 삽입하여 이동시키는 일도 손쉽게 구현됩니다.

** 살펴볼 부분
1. <MARQUEE> 태그 안에 표나 그림을 삽입할 수도 있습니다.
2. <MARQUEE> 태그의 속성 중에 direction 속성에 up, down, left, right 의 네 가지 값을 지정하면 원하는 방향으로 문장을 이동시킬 수 있습니다. 또한 scrollAmount 속성은 속도를 지정하는 것인데 1이 제일 느리고 수치가 커질수록 이동 속도가 빨라집니다. style 속성을 이용하면 문장을 표시할 영역을 지정할 수 있습니다.
3. 스타일로 지정한 부분을 수정하면 화면에 표시되는 글의 색이나 모습을 바꿀 수 있습니다.
4. 예제에서는 agul[] 배열을 <HEAD> 태그 안에 삽입했지만 <BODY> 태그 안의 <SCRIPT> 태그 안에 삽입해도 됩니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_03.html - 지정된 방향으로 끊임 없이 움직이는 글과 그림 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY> 
  지정된 방향으로 끊임 없이 움직이는 글과 그림<BR>
  <SCRIPT language="JavaScript">  </SCRIPT>

<TABLE> <TR> <TD bgcolor="GOLD">
     <MARQUEE direction="down" scrollAmount=3 style="width:300;height:200"> <img src="icon/i0094.gif"> <BR> <A HREF="http://www.x119.co.kr"> www.X119.com </A>를 방문하시면 책에 수록되지 않은 내용을 참고할 수 있습니다. </MARQUEE>
   </TD> </TR> </TABLE><BR>
</BODY> 
</HTML>

64.4. 본문과 배경 그림 사이로 흐르는 그림과 글

이번 예제는 문서의 본문을 화면에 보여주면서 본문 밑으로 다른 문장을 스크롤시키는 프로그램입니다. <IMG> 태그를 이용하면 그림도 함께 스크롤시킬 수 있습니다. 배경 그림을 깔았을 경우에는 배경 그림과 본문 사이를 통과하므로 본문이 공중에 붕 떠있는 느낌을 주게됩니다. 또는 본문과 배경 그림 사이를 나누어주는 효과를 줍니다. 글씨는 빼고 <IMG> 태그를 이용하여 그림만 스크롤시킬 경우에는 배경 그림과 본문의 그림 사이로 지나가기 때문에 두 그림이 분리되는 것 같은 독특한 착각 효과를 줄 수 있습니다.

이 예제는 보여줄 문서의 양이 많을 때보다는 몇 글자 되지 않는 문서에 사용하면 멋진 효과를 볼 수 있습니다. 스크롤시키는 글의 형태는 스타일로 지정할 수 있는데 배경색에 가까운 색을 사용하는 것이 멋있습니다. 밝은 배경에 진한 글씨를 이용할 경우 어지럽게 보여 오히려 역효과가 날 수 있습니다.

이 예제는 레이어를 이용했습니다. 본문을 하나의 레이어로 설정하고 또 다른 레이어를 설정하여 이 레이어의 위치를 본문보다 아래 쪽에 위치시킨 것입니다. 물론 움직이는 글이 있는 레이어를 제일 위 쪽 레이어로 설정할 경우에는 본문 위로 글이 움직이게 됩니다. 따라서 레이어의 순서에 주의해야 합니다.

** 사진: 밑에서부터 등장한 그림과 글이 배경 그림과 본문 사이로 지나갑니다. 그림이나 글의 색깔에 따라서 멋진 효과를 볼 수 있습니다.

** 살펴볼 부분
1. movegul 스타일을 바꾸면 원하는 스타일로 문장이 흐르도록 할 수 있습니다. 본 예제는 글씨 색을 ORANGE로 설정했는데 여러분에게 글씨를 보여주기 위해서 일부러 진한 색을 사용한 것입니다. 배경이 흰색이라면 더 밝은 색을 사용해야 하고, 배경이 검정색이라면 검정색에 가까운 진한 색을 사용하는 것이 고급스럽게 보입니다.
2. 변수 vgul이 배경으로 흐르는 문장입니다. 여기에 원하는 문장을 입력하면 됩니다. <IMG> 태그 명령을 삽입한다면 그림도 함께 스크롤 시킬 수 있습니다. 또는 그림만 스크롤시키는 일도 가능합니다. 그외 표를 비롯한 다양한 형태의 자료를 스크롤시킬 수 있습니다.
3.‘var vh = 0-document.body.clientHeight;’라는 명령을 통해 vh 변수를 선언했습니다. 0에서 화면 위아래 크기를 뺀 음수를 vh 변수로 선언했는데 직접 수치로 입력해도 됩니다. 이 변수의 크기를 작게 할수록 글이 위로 완전히 스크롤된 뒤에 다시 스크롤되기까지의 시간이 짧아집니다. 그렇지만 스크롤되는 글의 위아래 길이보다 짧게 잡을 경우에는 글이 완전히 위로 사라지기 전에 글이 사라지기도 합니다. 따라서 vh의 크기는 화면에 스크롤되는 문단의 위아래 길이보다 약간 큰 크기의 음수로 설정하는 것이 가장 좋습니다. 예를 들어 대략 화면으로 흘러갈 문장의 위아래 길이가 200 픽셀 정도라면-250 정도로 설정하는 것이 좋습니다.
4.레이어의 위치를 바꾸면 본문 밑이 아니라 본문 위로 흐르는 글씨를 보여줄 수 있습니다.
‘<DIV id="bggul" class="movegul"></DIV>’ 부분이 id="topgul" 명령보다 먼저 나오는데 id="gbgul" 부분을 topgul보다 뒤에 위치시키면 본문 위로 흐르는 문장으로 바뀝니다.
5. ‘setTimeout('gscroll()',50)’의 수치는 스크롤 속도를 조절합니다. 1이 가장 빠르고 수치가 클수록 느려집니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_04.html - 본문과 배경 그림 사이로 흐르는 그림과 글 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY onLoad="bgscroll()">
  <DIV id="bggul" class="movegul"></DIV>
  <DIV id="topgul" style="position:absolute; visibility:visible">
   본문과 배경 그림 사이로 흐르는 그림과 글<BR> 컴국지 <BR> 신 하드웨어 팔만대장경 <BR> C언어 이야기 <BR> C++ 이야기 <BR> 우리 아기 홈페이지 만들기
  </DIV>
</BODY>
</HTML>

64.5. 본문 위로 폭포처럼 떨어지는 문장과 그림

ex1_04.html은 멋진 효과를 보여주기는 하지만 위로 스크롤되는 방향만 가능합니다. 이번에는 좀더 간단한 소스로 위에서 아래로 폭포처럼 떨어지는 그림과 글을 구현하겠습니다. 이 예제 역시 레이어를 이용합니다. 바탕 화면에 레이어를 하나 더 만든 다음에 이 레이어를 화면 위에서부터 이동시키는 것입니다.

** 사진: 그림과 글이 위에서부터 아래로 내려가면서 사라지기를 계속 반복합니다.

** 살펴볼 부분
1. 이동하고자 할 글과 그림은 <DIV id="mgul"> 태그 안에 삽입합니다.
2. <IMG> 태그를 이용하면 그림도 함께 움직일 수 있습니다. 또는 그림이나 표만 이동하는 것도 가능합니다.
3. ‘document.all.mgul.style.pixelTop+=1’은 한 번에 몇 픽셀씩 이동하느냐를 결정합니다. 이 수치를 크게 할 수록 이동 속도가 빨라집니다. 느리게 설정하면 구름처럼 천천히 흘러가는 문장이 되고 10 이상의 수치를 사용하면 정말 폭포처럼 급하게 떨어집니다.
4. ‘setTimeout("movegul()",1)’ 명령은 함수 실행 속도로 역시 이동 속도를 결정합니다. 수치가 커질수록 느려집니다.
5. ‘if (mgul.style.pixelTop>=document.body.clientHeight){mgul.style.pixelTop=0;}’ 명령의 의미는 레이어의 위 쪽 부분이 창의 위아래 크기보다 크거나 같으면 레이어의 위 쪽을 0으로 다시 설정하여 맨 위부터 다시 이동하라는 뜻입니다. 즉 pixtelTop의 수치가 커져 창의 높이(clientHeight)와 같다면 제일 아래 바닥까지 이동했다는 뜻이 됩니다. 이처럼 바닥에 도달했을 때는 pixtelTop을 다시 0으로 설정하여 위로부터 이동을 반복시키는 것입니다.
6. <BODY> 시작태그 안에 onload="movegul()" 명령을 삽입합니다. 또는 <SCRIPT> 명령을 사용하고 그 안에 함수를 삽입하는 응용도 가능합니다.

앞으로는 <BODY> 시작태그 안에 onload="함수()" 명령을 삽입하라는 말을 하지 않겠습니다. 여러분이 알아서 <BODY> 시작 태그 안에 어떤 함수가 있나 확인하기 바랍니다. 또한 소스 파일 전체를 설명하기 곤란하므로 꼭 설명하지 않아도 되는 부분은 설명을 생략하겠습니다. 설명이 없는 부분은 여러분 스스로 어떤 방식으로 사용했나 분석해보기 바랍니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_05.html - 본문 위로 폭포처럼 떨어지는 그림과 글 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY onload="movegul()">
    본문 위로 폭포처럼 떨어지는 그림과 글
    <DIV class="t1"> 컴국지 <BR> 신 하드웨어 팔만대장경 <BR> C언어 이야기 <BR> C++ 이야기 <BR> 우리 아기 홈페이지 만들기 </DIV>
    <DIV id="mgul"> <IMG src='icon/i0093.gif'> <BR> 진정한 컴퓨터 입문서 <BR> [컴국지] <BR> 컴퓨터 하드웨어 분야의 스테디셀러 <BR> 신 하드웨어 팔만대장경 <BR></DIV>
</BODY>
</HTML>

64.6. 화면을 떠다니는 그림과 글

ex1_05.html을 응용하면 화면을 떠다니는 문장과 그림을 쉽게 만들 수 있습니다. 이동하는 방향만 자유롭게 설정하면 화면을 자유자재로 떠다니는 글이나 그림, 표를 만들 수 있습니다. 그러나 사람들의 시선을 끄는 효과는 있지만 읽어야 할 글이 많을 때는 시선을 분산시키는 역효과가 납니다. 따라서 본문의 양이 적은 문서에 사용하는 것이 좋습니다.

** 사진: 그림과 글이 본문 위로 흐르면서 대각선 방향으로 이동합니다.

** 살펴볼 부분
1. 이동하고자 할 글과 그림은 <DIV id="mgul"> 태그 안에 삽입합니다.
2. <IMG> 태그를 이용하면 그림도 함께 움직일 수 있습니다. 또는 그림이나 표만 이동하는 것도 가능합니다.
3. document.all.mgul.style.pixelTop+=2 명령은 레이어의 위 쪽 위치를 2씩 더해가면서 표시하라는 뜻입니다. 즉 2 픽셀씩 아래로 이동합니다. document.all.mgul.style.pixelLeft-=2 명령은 레이어의 왼 쪽 위치를 -2만큼 변화를 주므로 왼쪽으로 2 픽셀만큼 움직입니다. 이 두 문장의 수치를 조절하면 위에서 아래, 아래서 위, 오른쪽 아래 대각선방향 등과 같이 다양한 방향 조절이 가능합니다. 또한 sin 함수 등을 이용하면 곡선의 형태로 이동하게 만들 수도 있습니다.
4. ‘setTimeout("movegul()",1)’ 명령은 함수 실행 속도로 역시 이동 속도를 결정합니다. 수치가 커질수록 느려집니다.
5. if (mgul.style.pixelTop>=document.body.clientHeight-100) { mgul.style.pixelTop = Math.floor(Math.random() * document.body.clientHeight)-100; } 명령은 조금 복잡해보이지만 사실은 아주 단순합니다. 먼저 if문의 조건식은 다음과 같습니다.

if (mgul.style.pixelTop>=document.body.clientHeight-100)

조건식의 의미는 ‘레이어의 위 쪽 위치가 (창의 위아래 길이-100)보다 크다면’입니다. ex1_05.html 에서는 창의 위아래 길이를 바로 사용했는데 여기서는 -100을 주었습니다. 이 -100의 의미는 화면을 이동하는 그림이나 문장이 창 아래 쪽에서부터 100픽셀 정도 위에 도달하면 위치를 변경하기 위해서입니다. 만약 -100을 안 주면 창의 바닥까지 레이어가 도달하게 되는데 이 경우 오른쪽 스크롤막대가 생겼다 없어지는 일이 반복됩니다. 이런 현상을 막기 위해 레이어에 사용한 그림이나 문단의 위아래 길이보다 약간 큰 수치를 빼주는 것입니다. 따라서 -100은 사용자가 사용하는 그림이나 글, 표의 위아래 길이에 맞게 조절하면 됩니다. 조건식이 맞을 경우 실행하는 실행문은 다음과 같습니다.

{ mgul.style.pixelTop = Math.floor(Math.random() * document.body.clientHeight)-100; }

레이어의 위 쪽 위치를 새로 지정하는데 ramdom() 함수를 이용해 위치를 랜덤하게 지정합니다. 이때 먼저 랜덤한 수가 나오면 100만큼 빼주는데 이 역시 레이어의 문단 길이보다 약간 큰 길이를 빼주면 됩니다. 문단의 위아래 길이만큼 빼주지 않아도 실행에는 아무런 문제가 없지만 창의 바닥 쪽에 가까운 위치가 나올 경우에는 웹브라우저에 상하 스크롤막대가 생겼다 사라지는 현상이 발생함에 주의합니다.
6. if (mgul.style.pixelLeft<=0) { mgul.style.pixelLeft = Math.floor(Math.random() * document.body.clientWidth)-200; } 명령은 레이어의 왼 쪽 끝이 0보다 작을 때이므로 문장이 화면 왼쪽에 도달했을 때를 의미합니다. 레이어가 화면 왼쪽에 도달하면 레이어의 왼 쪽 위치를 랜덤하게 다시 지정해주라는 뜻입니다. -200을 한 이유는 레이어의 좌우 크기만큼 빼주어야 좌우 스크롤막대가 생겼다 사라지는 현상이 발생하지 않기 때문입니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_06.html - 화면을 떠다니는 그림과 글 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY onload="movegul()">
    화면을 떠다니는 그림과 글
    <DIV class="t1"> 컴국지 <BR> 신 하드웨어 팔만대장경 <BR> C언어 이야기 <BR> C++ 이야기 <BR> 우리 아기 홈페이지 만들기 </DIV>
    <DIV id="mgul"> <IMG src='icon/i0094.gif'> 행이 </DIV>
</BODY>
</HTML>

**잠깐: 원하는 범위의 랜덤 수를 얻기 위한 방법
Math 객체의 random() 함수를 이용하여 원하는 랜덤 수를 얻으려면 필요한 범위만큼 곱해주면 됩니다. 즉 0부터 9까지의 범위 중에서 랜덤 수를 얻고자 한다면 10을 곱해주면 됩니다. 만약 0부터 500 까지의 범위에서 랜덤한 수를 구하고자 한다면 500을 곱하면 됩니다. 이렇게 곱한 수는 실수인 상태이므로 floor 함수를 이용하여 소수점을 잘라내고 정수형으로 만듭니다. 이렇게 하면 원하는 범위에서 랜덤 수를 구할 수 있습니다.

*문법: Math.floor(Math.random() * n)
*보기: Math.floor(Math.random() * 10)

64.7. 크기가 변하면서 회전하는 글씨

크기가 변하면서 회전하는 글씨 기법은 시작 화면 등에 사용하기 좋은 기법입니다. 사용자가 입력한 문장이 크기 변화를 하면서 회전하기 때문에 매우 동적인 느낌을 줍니다. 배경 그림과 글씨 색, 글꼴을 잘 조화시키면 애니메이션 효과를 낼 수 있습니다.

** 사진: 글씨가 회전하는 효과를 보여줍니다.

** 살펴볼 부분
1. 변수 vgul에 보여줄 문장을 적습니다.
2. <IMG> 태그를 이용하면 그림도 함께 움직일 수 있습니다. 또는 그림이나 표만 이동하는 것도 가능합니다.
3. vgsize는 가장 큰 글씨의 크기입니다. 수치가 클수록 글씨 크기가 커집니다.
4. vx는 글의 왼 쪽 위치를 잡기 위한 변수이므로 x 좌표 값을 적당하게 주면 됩니다.
5 vspace는 글자 사이의 간격입니다. 문장의 길이에 따라서 적절하게 간격을 조절해주어야 합니다. 문장이 길면 글자 사이 간격을 좁게 잡고 원의 크기를 넓게 잡아주어야 하고, 문장이 짧다면 글자 사이 간격을 좁게 잡고 원의 크기도 좁게 잡는 것이 좋습니다.
6.vgul2의 스타일 부분을 이용해 화면에 표시될 글의 형태를 정할 수 있습니다. 이때 top과 left는 화면에 표시될 글의 기준 위치가 됩니다. 원하는 위치에 글을 표시하고 싶다면 top과 left의 값을 조절하면 됩니다.
7.window.setInterval("gcmove()",10) 명령은 함수 실행 속도를 조절합니다. 1이 가장 빠르고 수치가 클수록 함수 실행 속도가 느려집니다. 즉 글씨 회전 속도가 느려집니다.
8. mspeed2는 회전 속도입니다. 0.01을 설정하면 매우 느린 속도이고, 수치가 클수록 회전 속도가 크게 빨라집니다.
9.Ob.style.posLeft=vx+200*Math.sin(mspeed3)+250; 명령에서 200이라는 숫자는 원의 좌우 넓이 즉, 원의 회전 반경 크기를 나타냅니다. 숫자가 클수록 회전 반경이 커집니다. 250은 원의 위치입니다.
10.Ob.style.fontSize=vgsize+25*Cosine; 명령에서 25는 옆 글자와의 글자 크기 차이를 설정하는 수치입니다. 수치가 클수록 다른 글자와의 글자 크기가 확연하게 차이 납니다. 수치가 작으면 글씨 크기 차이가 적게 납니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_07.html - 크기가 변하면서 회전하는 글씨 </TITLE>
  <STYLE type="text/css">  </STYLE>
</HEAD>
<BODY>
크기가 변하면서 회전하는 글씨<BR>
  <SCRIPT language="JavaScript"> <!--
    var vgul="진정한 컴퓨터 입문서 컴국지"         //화면에 표시할 글
    var vgul2=""
    var vgsize=35;                                 //가장 큰 글씨 크기
    var vx=10;                                     //글의 왼 쪽 위치를 잡기 위한 변수
    var vspace=0.4;                                //글자 사이의 간격
    var vglength=vgul.length;                      //글자의 크기(길이)
    var y=-1000;
    for (i=0;i<vglength;i++){
      vgul2=vgul2 + '<DIV ID=L' + i + ' STYLE="color : navy; position : absolute ; top: 50; left:10; z-index:10">' + vgul.charAt(i) + '</DIV>'   //화면에 표시될 글의 스타일, top left는 표시될 좌표
    }
    document.write (vgul2);
    vt=window.setInterval("gcmove()",10); //함수 실행 속도. 수치가 클수록 회전 속도가 느려집니다.
    var mspeed=5;
    var mspeed2=0.04;                    // 회전 속도. 수치가 클수록 빨라집니다.

function gcmove(){                    //글자 회전 함수
      mspeed=mspeed-mspeed2;
      for (i=0;i<vglength;i++){
        mspeed3=mspeed+vspace*i;
        Cosine=Math.cos(mspeed3);
        Ob=document.all("L"+i);
        Ob.style.posLeft=vx+200*Math.sin(mspeed3)+250; // 원의 크기와 위치 설정
        Ob.style.zIndex=20*Cosine;
        Ob.style.fontSize=vgsize+25*Cosine;   // 옆 글자와의 글자 크기 차이 설정
      }
    }
  //--> </SCRIPT>
</BODY>
</HTML>

64.8. 마우스 커서 따라 다니는 문장

최근 유행하는 기법 중의 하나는 마우스를 따라 다니는 문장이나 그림입니다. 재미있고 신기한 기법이라서 자주 쓰이고 있습니다. 마우스가 움직이는대로 문장이 같이 움직이므로 주목을 끄는 효과가 큽니다. 그렇지만 어울리지 않은 문서에 사용하면 역효과가 날 수 있으니 문서의 성격에 맞게 사용해야 합니다.

** 사진: 글씨가 마우스를 졸졸졸 따라다닙니다.

** 살펴볼 부분
1. 변수 vgul에 보여줄 문장을 적습니다. 이때 보여줄 글 뒤에 빈 칸을 하나 삽입해주어야 합니다. 그래야 마지막 글자까지 표시됩니다.
2. 글자 색이나 크기는 spanstyle 스타일 안에 정의된 내용을 고치면 됩니다. spanstyle의 속성을 보면 top 속성이 있고, -100px로 설정했습니다. 이는 처음에 문서를 불러왔을 때 글자가 화면 어느곳에 뭉쳐보이는 현상을 피하기 위해서 글씨가 표시될 위치를 화면 밖으로 설정한 것입니다.
3. vgspace=20; 명령은 글자 사이의 간격을 설정합니다. 숫자가 클수록 글자 사이 간격이 벌어집니다. 글자의 크기에 따라서 적당한 간격을 조절해주면 됩니다.
4. vt=setTimeout("followme()",10); 의 수치는 함수 실행 간격입니다. 수치가 커질수록 느려집니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_08.html - 마우스 커서 따라 다니는 문장 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY onLoad="followme()"> 
  마우스 따라다니는 커서<BR>
  <SCRIPT language="JavaScript">  </SCRIPT>
</BODY> 
</HTML>

64.9. 원하는 문장을 무지개빛으로 표시하기

rainbow() 함수는 함수 안에 매개변수로 입력한 문장을 무지개빛으로 표시해줍니다. 화면에 예쁜 색으로 문장을 표시하고 싶을 때 사용할 수 있는 프로그램입니다. 글자의 크기는 rainbow() 함수를 감싸고 있는 태그나 <BODY> 태그의 설정값을 따르므로 rainbow() 함수를 적당한 스타일의 블록으로 감싸서 사용하면 됩니다. 사용법이 간단하므로 함수 부분만 복사해두면 누구나 손쉽게 사용할 수 있습니다.

** 사진: 매개변수로 대입한 문장이 무지개색으로 표시됩니다.

** 살펴볼 부분
1. rainbow() 함수의 매개변수로 보여줄 문장을 적습니다. 보여줄 글의 크기는 rainbow() 함수를 감싸고 있는 블록의 스타일을 따르며, 아무런 블록이 없다면 <BODY> 태그 설정 값을 사용합니다. 본 예제에서는 t1 스타일을 설정하고 <DIV> 태그로 감쌌습니다.
2. 글자 색이나 크기는 스타일 안에 정의된 내용을 고치면 됩니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_09.html - 원하는 문장을 무지개빛으로 표시하기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
  원하는 문장을 무지개빛으로 표시하기.<BR><BR>
  <DIV class="t1">
  <SCRIPT language="JavaScript">  </SCRIPT>
  </DIV>
</BODY>
</HTML>

64.10. 마우스 가져가면 글월 상자에 설명 보여주기

마우스를 어떤 문장이나 아이콘 위에 올려놓았을 때 다른 영역에 설명을 표시하는 기법은 홈페이지에서 가장 많이 사용하는 기법입니다. 예를 들어 회원이나 물건 이름을 선택했을 때 설명을 보여주거나, 노래를 선택했을 때 가사를 보여주는 기법으로 응용할 수 있습니다. 그 외에도 다양한 용도로 활용이 가능한 기법입니다.
대개의 경우 이런 기법을 구현하기 위해서 레이어를 많이 사용하는데 ex1_10.html은 레이어를 쓰지 않고 가장 간결하게 만든 프로그램입니다. id와 이벤트 핸들러만을 이용하여 별도의 레이어나 복잡한 수식을 쓰지 않고 설명을 보여주는 함수를 만들었습니다.

** 사진: 마우스가 링크된 곳을 벗어나면 빈 화면으로 표시되고, 마우스가 링크된 곳에 오면 설명문이 표시됩니다.

** 살펴볼 부분
1. agul 배열에 표시하고자 하는 설명을 추가하고 viewgul() 함수의 매개변수로 배열 요소를 적어주면 됩니다.
2. 스타일 tgul과 sgul의 속성을 변경하면 화면에 표시되는 문장의 모습을 바꿀 수 있습니다.
3. <TABLE> 태그의 크기나 배경색을 변경하면 화면에 표시되는 영역의 크기와 색을 바꿀 수 있습니다.
4. <A HREF> 태그에 필요로 하는 문서를 링크시키면 됩니다. 물론 <A> 태그는 사용하지 않아도 됩니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_10.html - 마우스 가져가면 글월 상자에 설명 보여주기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     var agul=new Array();
     agul[0]="컴국지는 진정한 컴퓨터 입문서입니다. 꼭 한 번 읽어보세요. ";
     agul[1]="하드웨어에 관한 백과사전입니다. 하드웨어의 과거부터 현재까지 모두 담겨있습니다.";
     agul[2]="C언어 이야기는 7년이 넘게 발간되고 있는 C언어 이야기의 고전입니다.";

function viewgul(vgul){    //마우스 가져가면 글 보여주는 함수
       sgul.innerHTML=vgul;
     }
     function cleargul(){       //마우스 벗어나면 빈 화면 보여주는 함수
       sgul.innerHTML="";
     }
  //--> </SCRIPT>
</HEAD>
<BODY> 
마우스 가져가면 글월 상자에 설명 보여주기<BR>
  <TABLE width=900> <TR> <TD width=300 bgcolor="ORANGE">
    <DIV id="tgul">
      <A HREF="ex1_01.html" onmouseover="viewgul(agul[0])" onmouseout="cleargul()">컴국지</A><BR>
      <A HREF="ex1_01.html" onmouseover="viewgul(agul[1])" onmouseout="cleargul()">신 하드웨어 팔만대장경</A><BR>
      <A HREF="ex1_01.html" onmouseover="viewgul(agul[2])" onmouseout="cleargul()">C언어 이야기</A><BR>
    </DIV></TD>
  <TD valign="top" width=600 bgcolor="GOLD">
    <DIV id="sgul"></DIV>
  </TD> </TR> </TABLE>
</BODY> 
</HTML>

64.11. 자동으로 입력란에 커서 이동시키기

로그인 화면에는 대개의 경우 사용자의 ID와 비밀번호만 물어봅니다. 이때 로그인 화면에서 사용자가 매번 ID 입력란까지 마우스를 가지고 가서 클릭해주는 일은 불편합니다. 따라서 로그인 문서를 불러오면 자동적으로 입력란에 마우스 커서가 위치하여 바로 입력을 받을 수 있도록 해주는 것이 좋습니다. 이때 사용하는 함수가 focus() 함수이며, 이에 관한 기법은 본문의 j57_02.html 문서를 통해 다루었습니다. j57_02.html 문서에서는 다음과 같이 <SCRIPT> 명령을 중간에 삽입하는 방식을 이용했습니다.

<SCRIPT language="JavaScript">  </SCRIPT>

만약 이렇게 삽입하는 것이 귀찮다면 인라인 방식을 이용할 수 있습니다. <BODY> 시작 태그 안에 ‘onload="javascript:document.kform.ID.focus()"'라는 명령을 삽입하면 본문 안에 별도의 자바스크립트 명령을 사용하지 않아도 ID 입력란에 커서가 이동합니다.

** 사진: 문서를 불러오면 ID 입력란에 자동으로 커서가 이동한 상태입니다. 따라서 바로 ID를 입력하면 됩니다.

** 살펴볼 부분
1. <BODY> 시작 태그 안에 onload="javascript:document.kform.ID.focus()" 명령을 삽입해주면 됩니다.
2. kform.ID 대신에 kform.passwd 나 다른 입력란의 name 값을 입력하면 해당 입력 양식의 입력란에 커서가 이동합니다.

**소스 파일:

64.12. 입력 양식에서 입력란 색 바꾸기

입력 양식의 입력란이 항상 흰색이라면 보기에도 밋밋하지만 어디에서 현재 입력중인지 파악하기가 쉽지 않습니다. 입력란이 많을 경우 마우스로 스크롤해가면서 입력란을 확인하는데 1자로 된 입력 커서는 잘 보이지 않아서 마우스 커서와 기보드의 입력 커서를 구분하여 찾기가 꽤 어렵습니다.

이럴 때 사용하는 것이 입력란의 입력 상황에 따라서 색을 바꾸어주는 기법입니다. ex1_12.html은 입력 양식에서 입력란의 색을 자유자재로 바꾸어주는 예제입니다. 본 예제는 마우스 커서가 입력란 위로 이동했을 때는 pink 색을, 입력란에 입력중일 때는 lavender 색으로 표시하기 때문에 마우스 커서가 어느 입력란에 위치했는지와 현재 입력중인 키보드 커서의 위치를 쉽게 확인할 수 있도록 해줍니다. 마우스가 입력란을 벗어났을 때는 흰색을 보여주도록 설정했는데 이 역시 배경색과 어울리는 원하는 색으로 바꾸어줄 수 있습니다.

ex1_12.html 문서는 마우스 이벤트 핸들러를 이용하여 각각의 이벤트에 대해서 해당 입력 양식의 색을 바꾸는 기법을 사용했습니다. 이때 this.style.background 객체와 속성을 사용했습니다.

** 사진: 문서를 불러오면 ID 입력란에 포커스가 맞추어진 상태라 ID 입력란의 색이 lavender 색으로 표시됩니다. 여기에 ID를 입력하고 마우스 커서가 다른 입력란 위로 이동하면 pink 색으로 입력란이 바뀝니다. 마우스의 포커스를 다시 해당 입력란에 맞추면 lavender 색으로 바뀝니다. 마우스가 입력란을 벗어나면 흰색으로 바뀝니다.

** 살펴볼 부분
1. <BODY> 시작 태그 안에 onload="javascript:document.kform.ID.focus()" 명령을 삽입해 문서를 불러오면 ID 입력란에 입력 커서가 자동으로 위치합니다.
2. onmouseover = "this.style.background='pink'" 명령은 마우스가 입력란 위로 이동할 경우에는 해당 스타일의 배경을 pink 색으로 바꾸라는 뜻입니다. onfocus = "this.style.background='lavender'" onmouseout = "this.style.background='white'" 역시 focus 이벤트가 발생했을 때 마우스가 해당 영역을 벗어났을 때 해당 영역의 배경색을 지정하는 명령입니다. 사용자는 원하는 색을 지정하면 됩니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_12.html - 입력 양식에서 입력란 색 바꾸기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--

//--> </SCRIPT>
</HEAD>
<BODY onload="javascript:document.kform.ID.focus()">
  <TABLE width="400"> <TR>
  - 여기는 회원제입니다.<BR> - ID와 비밀번호를 입력하세요.
  </TR> <TR> <TD width="90">
  <FORM name="kform">
  * ID :
  </TD> <TD>
  <INPUT type="text" name="ID" size="10" onmouseover = "this.style.background='pink'" onfocus = "this.style.background='lavender'" onmouseout = "this.style.background='white'"> </TD>
  <TR> <TD>
  * 비밀번호 : 
  </TD> <TD> 
  <INPUT type="password" name="passwd" size="8"  onmouseover = "this.style.background='pink'" onfocus = "this.style.background='lavender'" onmouseout = "this.style.background='white'"> <BR><BR>
  </TD> </TR> </TABLE>
  <INPUT TYPE="hidden" name="email" VALUE="address"> <BR>
  <INPUT type="reset" value="처음부터 다시 입력"> <BR><BR>
  <INPUT type="submit" value="입력 완료(자료 전송)">
  </FORM>
</BODY>
</HTML>

64.13. 자료 입력 시 자동으로 다음 입력란으로 이동하기

회원 정보를 입력받는 입력 양식에서 어떤 경우에는 필요한 정보가 입력되면 자동으로 다음 입력란으로 이동하게 만들 필요가 있습니다. 대표적인 경우가 주민등록 번호나 카드 번호를 입력하는 경우입니다. 주민등록번호나 카드 번호는 자리수가 정해져 있기 때문에 지정된 자리만큼 자료를 입력하면 다음 칸으로 자동 이동해주는 것이 편리합니다. ex1_12.html에 이런 자동 이동 기능을 추가해보겠습니다.

ex1_13.html 문서는 입력 양식에서 정해진 숫자의 자료가 입력되면 자동으로 지정된 입력 양식으로 이동시키는 프로그램입니다. 이를 응용하면 입력 양식 사용법을 좀더 편리하게 만들 수 있습니다. 기타 내용은 ex1_12.html 과 같습니다.

** 사진: 주민등록 번호 입력란에서 6글자를 입력하면 자동으로 다음 칸으로 이동합니다. 다음 칸에서 뒷자리 7자리를 입력하면 이번에는 비밀번호 입력란으로 자동으로 이동합니다.

** 살펴볼 부분
1. <INPUT type="text" name="ju1" size="6" smax="6" onKeyUp="autonext(this, ju2);"> 명령은 ju1 입력란의 크기와 최대 입력 값을 6으로 설정하고 autonext() 함수를 실행시키도록 합니다. onKeyUp="autonext(this, ju2);" 명령은 키를 눌렀다가 뗄 때마다(onKeyUp 이벤트 발생 때) 현재 입력란(this)의 값을 autonext() 함수에게 전달하여 크기를 비교하게 합니다. 만약 크기가 최대치에 도달한다면 ju2라는 입력양식으로 이동하게 합니다.
2. 사용자는 autonext(this, ju2) 함수에서 두 번째 매개변수인 ju2에 해당하는 값만 바꾸면 됩니다. 이 값은 입력 양식의 name 값을 지정하면 됩니다. 예제에서는 첫 번째 autonext() 함수에 ju2를 입력하고, 두 번째 autonext() 함수에는 passwd를 입력했기 때문에 해당 입력란으로 이동한 것입니다.
3. if(vl.value.length == vl.smax) 명령은 매개변수 this로 넘겨받은 자료 길이를 smax로 지정한 크기와 비교하여 같을 경우에 다음 명령을 실행하라는 뜻입니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_13.html - 자료 입력 시 자동으로 다음 칸 이동하기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY onload="javascript:document.kform.ID.focus()">
  <TABLE width="400"> <TR>
  - 여기는 회원제입니다.<BR> - ID와 비밀번호를 입력하세요.
  </TR> <TR> <TD width="90">
  <FORM name="kform">
  * ID :
  </TD> <TD>
  <INPUT type="text" name="ID" size="10" onmouseover = "this.style.background='pink'" onfocus = "this.style.background='lavender'" onmouseout = "this.style.background='white'">
  </TD> <TR> <TD>
  * 주민등록 번호 : 
  </TD> <TD> 
  <INPUT type="text" name="ju1" size="6" smax="6" onKeyUp="autonext(this, ju2);">
  <INPUT type="text" name="ju2" size="7" smax="7" onKeyUp="autonext(this, passwd);">
  </TD> <TR> <TD>
  * 비밀번호 : 
  </TD> <TD> 
  <INPUT type="password" name="passwd" size="8"  onmouseover = "this.style.background='pink'" onfocus = "this.style.background='lavender'" onmouseout = "this.style.background='white'"> <BR><BR>
  </TD> </TR> </TABLE>
  <INPUT TYPE="hidden" name="email" VALUE="address"> <BR>
  <INPUT type="reset" value="처음부터 다시 입력"> <BR><BR>
  <INPUT type="submit" value="입력 완료(자료 전송)">
  </FORM>
</BODY>
</HTML>

64.14. 제목 막대에 움직이는 문장 표시하기

제목 막대(title bar)와 상태 표시선(status line)은 홈페이지를 방문한 사람에게 일정한 메시지를 보여주기 위한 좋은 장소입니다. 이때 움직이는 문장을 보여준다면 사람들의 주목을 끌 수 있어 효과적입니다. ex1_14.html은 브라우저의 제목 막대 영역에 문장을 보여주는 예제로 오른쪽으로 문장이 나타났다가, 일정 시간 후에 다시 왼쪽으로 사라지고, 다시 일정 시간 뒤에 오른쪽으로 나타나는 동작을 반복합니다. 이동 속도나 대기 시간을 조절하면 사람들의 주목을 끄는 효과를 볼 수 있습니다.

** 사진: 제목 막대(title bar)에 변수로 선언한 문장이 오른쪽으로 나타났다가 왼쪽으로 사라지는 동작을 반복합니다.

** 살펴볼 부분
1. vgul 변수에 표시할 문장을 입력합니다.
2. setTimeout("movetitle()",2); 명령은 문장이 움직이는 속도입니다. 1로 지정하면 가장 빠르게 움직이며 수치가 클수록 늦게 움직입니다.
3. setTimeout("movetitle()",1000); 명령의 1000은 글이 제목 막대에 다 표시된 다음에 왼쪽으로 사라질 때까지의 대기 시간입니다. 수치가 클수록 오래 대기하며, 1을 지정하면 대기시간 없이 바로 다시 왼쪽으로 사라집니다.
4. setTimeout("movetitle()",500); 명령의 500은 왼쪽으로 사라진 글이 다시 오른쪽으로 나타날 때까지의 대기 시간입니다. 수치가 클수록 오래 대기하며, 1을 지정하면 대기시간 없이 바로 다시 오른쪽으로 나타나며, 수치가 클수록 대기시간이 길어집니다.
5. 사용자는 이동 속도와 두 종류의 대기 시간에 변화를 주면 됩니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_14.html - 제목 막대에 움직이는 문장 표시하기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
제목 막대에 움직이는 문장 표시하기<BR>
</BODY>
</HTML>

64.15. 제목 막대에 여러 개의 문장을 돌아가며 표시하기

ex1_14.html은 하나의 문장만 표시할 수 있습니다. 배열을 이용한다면 여러 개의 문장을 차례대로 돌아가면서 보여줄 수 있습니다. ex1_15.html은 배열을 이용하여 여러 개의 문장을 돌아가면서 표시해줍니다. 이 예제는 많은 종류의 문장을 제목 막대를 이용하여 보여주고자 할 때 매우 효과적입니다. 표시 효과는 ex1_14.html의 이동 프로그램을 그대로 사용했습니다.

** 사진: 배열로 선언한 문장이 제목 막대에 돌아가면서 표시됩니다.

** 살펴볼 부분
1. agul 배열에 표시할 문장을 입력합니다.
2. setTimeout("movetitle()",2); 명령은 문장이 움직이는 속도입니다. 1로 지정하면 가장 빠르게 움직이며 수치가 클수록 늦게 움직입니다.
3. setTimeout("movetitle()",1000); 명령의 1000은 글이 제목 막대에 다 표시된 다음에 왼쪽으로 사라질 때까지의 대기 시간입니다. 수치가 클수록 오래 대기하며, 1을 지정하면 대기시간 없이 바로 다시 왼쪽으로 사라집니다.
4. setTimeout("movetitle()",500); 명령의 500은 왼쪽으로 사라진 글이 다시 오른쪽으로 나타날 때까지의 대기 시간입니다. 수치가 클수록 오래 대기하며, 1을 지정하면 대기시간 없이 바로 다시 오른쪽으로 나타나며, 수치가 클수록 대기시간이 길어집니다.
5. 사용자는 이동 속도와 두 종류의 대기 시간에 변화를 주면 됩니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_15.html - 제목 막대에 여러 개의 문장을 돌아가며 표시하기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     var n=0, i=0, tf=false;
     agul=new Array();       //표시할 문장 내용
     agul[0]="  <<:::   ^_^ www.X119.com에 오신 것을 환영합니다. ^_^    :::>>  ";
     agul[1]=" 즐거움이 가득 찬 X119와 함께 즐거운 시간 보내세요.   ";
     agul[2]=" ^_^  언제나 웃는 하루  ^_^  ";

64.16. 상태 표시선에 여러 개의 문장을 돌아가며 표시하기

ex1_15.html 문서를 이용하면 상태 표시선에도 제목 막대에 보여준 것과 같은 효과를 낼 수 있습니다. document.title 이라는 부분을 window.status로 바꾸어주기만 하면 됩니다.

** 사진: 배열로 선언한 문장이 상태 표시선에 돌아가면서 표시됩니다.

<HTML>
<HEAD>
  <TITLE> ex1_16.html - 상태 표시선에 여러 개의 문장을 돌아가며 표시하기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     var n=0, i=0, tf=false;
     agul=new Array();       //표시할 문장 내용
     agul[0]="  <<:::   ^_^ www.X119.com에 오신 것을 환영합니다. ^_^    :::>>  ";
     agul[1]=" 즐거움이 가득 찬 X119와 함께 즐거운 시간 보내세요.   ";
     agul[2]=" ^_^  언제나 웃는 하루  ^_^  ";

64.17. 상태 표시선에 깜박이는 문장 표시하기

상태 표시선에 문장을 표시할 때 문장이 깜박이는 효과를 내면 주목을 끄는 효과가 훨신 커집니다. ex1_17.html은 상태 표시선에 문장이 깜박이는 효과를 보여줍니다. 프로그램 기법은 아주 간단합니다. 일정 간격을 두고 한 번은 문장을 보여주고, 한 번은 빈 문장을 보여주면 됩니다. 만약 빈 문장 대신 다른 문장을 보여준다면 두 개의 문장이 교체되면서 표시되는 효과를 볼 수 있습니다. 또한 배열을 이용한다면 여러 개의 문장을 교대로 보여주는 효과를 볼 수 있습니다.

** 사진: 변수에 입력한 문장이 상태 표시선에 깜박이면서 표시됩니다.

** 살펴볼 부분
1. vgul 변수에 표시할 문장을 입력합니다.
2. vspeed는 화면 깜박임 속도입니다. 수치가 클수록 깜박임이 느려집니다.

**소스 파일:

64.18. 제목 막대에 깜박이는 문장 표시하기

ex1_15.html과 ex1_16.html 예제를 보신 분이라면 제목 막대에 문장을 표시할 때 문장이 깜박이는 효과를 내는 것이 아주 간단하다는 사실을 아실 겁니다. 제목 막대에 표시하는 기법은 거의 대부분 별 수정 없이 상태 표시선에 문장을 표시할 때 사용할 수 있으며, 반대로 상태 표시선에 표시하는 기법 역시 별 수정 없이 제목 막대 영역에 사용할 수 있습니다. 소스 파일에서 두 영역을 가리키는 속성인 document.title과 window.status 부분을 교체하면 됩니다. e1_17.html에서는 상태 표시선에 문장을 표시하기 위해 window.status 명령을 사용했습니다. 이 부분만 document.title로 바꾸면 똑 같은 효과를 제목 막대에 구현할 수 있습니다.

이처럼 document.title 명령과 window.status 명령만 서로 교체해주면 거의 대부분의 상태 표시선 표시 효과는 제목 막대 영역의 표시 효과로 바꿀 수 있습니다. 앞으로 나오는 상태 표시선 또는 제목 막대 표시 예제는 하나만 예를 들겠지만 명령을 대체하면 두 영역 모두에 적용 가능한 효과로 변한다는 사실을 기억해주기 바랍니다.

** 사진: 변수에 입력한 문장이 제목 막대에 깜박이면서 표시됩니다.

** 살펴볼 부분
1. vgul 변수에 표시할 문장을 입력합니다.
2. vspeed는 화면 깜박임 속도입니다. 수치가 클수록 깜박임이 느려집니다.

**소스 파일:

**잠깐: 동적인 문장은 제목 막대를 피하고 상태 표시선을 이용합니다.
지금까지 제목 막대에 문장을 움직이는 기법을 설명했지만 제목 막대에는 동적인 예제를 사용하는 것이 바람직하지 않습니다. 왜냐하면 제목 막대에 표시되는 문장은 윈도98의 상태 표시선에 표시되는데 이곳에 표시되는 브라우저 아이콘의 제목이 계속 바뀌기 때문입니다. 그래서 시선을 분산시키는 역효과가 있습니다.

또한 상태 표시선에는 사용자가 지정한 문장만 표시되므로 매우 깔끔하지만, 제목 막대 영역에는 사용자가 지정한 문장이 잠깐 사라지는 동안 웹브라우저의 기본 문장(문서 파일의 경로를 표시하는 문장)이 표시되기 때문에 의도했던 것처럼 좋은 효과를 내기 어렵습니다. 이는 ex1_15.html과 ex1_18.html 문서를 불러온 상태를 잘 관찰해보면 알 수 있습니다.

따라서 움직이는 문장은 가능한 상태 표시선에 표시하는 것이 좋습니다.

64.19. 상태 표시선이나 제목 막대에 타자 기법으로 여러 문장 돌아가면서 표시하기

상태 표시선에 타자를 치는 것처럼 한 글자씩 표시하는 기법입니다. 문장이 움직이거나 깜박거리는 앞서의 예제들처럼 시선을 끌지는 않지만 사용자들에게 편안한 느낌과 동적인 느낌을 주는 효과가 있습니다. window.status = vgul; 명령 부분의 window.status를 document.title로 바꾸면 제목 막대에도 적용이 가능합니다. 또는 두 가지 영역에 모두 표시할 수도 있습니다. 그렇지만 앞서 말씀 드린 것처럼 제목 막대에는 동적인 글을 표시하지 않는 것이 좋습니다.

** 사진: 상태 표시선에 타자 치는 것처럼 한 글자씩 문장을 표시합니다.

** 살펴볼 부분
1. agul 배열에 표시할 문장을 입력합니다.
2. vspeed는 글자가 표시되는 속도입니다. 수치가 클수록 느려집니다.
3. vpause는 배열 요소의 한 문장을 표시한 다음에 다음 문장을 표시할 때까지의 대기 시간입니다. 수치가 클수록 대기 시간이 길어집니다.
4. window.status = vgul; 명령을 document.title = vgul; 로 바꾸면 제목 막대에 표시되는 효과를 얻을 수 있습니다.
5. window.status = vgul; 명령 밑에 document.title = vgul; 명령을 추가하면 제목 막대에도 동시에 표시됩니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_19.html - 상태 표시선이나 제목 막대에 타자 기법으로 여러 문장 돌아가면서 표시하기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY onLoad="tajagul()">
상태 표시선이나 제목 막대에 타자 기법으로 여러 문장 돌아가면서 표시하기
</BODY>
</HTML>

64.20. 상태 표시선이나 제목 막대에 왼쪽으로 이동하는 문장 표시하기

ex1_20.html 문서는 상태 표시선이나 제목 막대에 문장을 표시할 때 오른쪽 끝에서부터 왼쪽으로 이동하는 글자를 보여주는 프로그램입니다. 너무 요란하지도 않으면서도 브라우저의 정적인 면을 어느 정도 완화시키는 효과가 있습니다. 상태 표시선에 사용하면 요란하지 않으면서도 사용자의 시선을 이끄는데 효과적입니다.

** 사진: 오른쪽 끝에서 나타난 문장이 왼쪽으로 서서히 이동합니다.

** 살펴볼 부분
1. moveleft() 함수의 매개변수에 표시할 문장을 입력합니다.
2. for (vgul = '', i = 0; i < 90; i++) 명령은 글이 나타나는 위치를 지정합니다. 수치가 작을수록 왼쪽에서 시작하고, 수치가 클수록 오른 쪽에서 문장 이동이 시작됩니다. 상태 표시선에 표시할 때는 130이 이상의 수를 지정해도 되지만, 제목 막대에 사용할 때는 수치를 작게 잡아야 합니다. 제목 막대는 상태 표시선과 달리 사용자가 지정한 문장이 표시되는 좌우 길이가 짧기 때문입니다.
3. setTimeout('moveleft()', 100); 명령은 문장이 이동하는 속도를 설정합니다. 1이 가장 빠르고 수치가 클수록 느려집니다.
4. window.status = vgul; 명령을 document.title = vgul 로 바꾸면 제목 막대에 표시되는 효과를 얻을 수 있습니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_20.html - 상태 표시선이나 제목 막대에 왼쪽으로 이동하는 문장 표시하기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY onload="moveleft('  ^_^ www.X119.com에 오신 것을 환영합니다. ^_^  ')">
상태 표시선이나 제목 막대에 왼쪽으로 이동하는 문장 표시하기<BR>
</BODY>
</HTML>

64.21. 색깔이 한 글자씩 점차 바뀌는 문장 반복하기

문장을 표시하는 글씨가 한 글자씩 색이 바뀌는 것을 반복하는 예제입니다. 눈에 뜨이는 공지사항을 표시할 때 사용할 수 있습니다. 배경 그림에 어울리는 바탕 색을 지정하고, 변할 색을 지정하면 좋은 효과를 얻을 수 있습니다. 본 예제는 변수를 사용했지만 배열을 이용하면 여러 문장을 돌아가면서 보여줄 수 있습니다.

** 사진: 문장의 색깔이 PINK 색에서 CRIMSON 색으로 점차 바뀝니다.

** 살펴볼 부분
1. vgul 변수에 보여줄 글씨를 대입합니다.
2. vbase 변수는 글씨가 바탕에 깔리는 색을 지정하고, vchange 변수는 변할 때 나타나는 색을 지정합니다.
3. vspeed 변수는 글씨 변환 속도를 지정합니다. 수치가 클수록 느려짐

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex1_21.html - 색깔이 한 글자씩 점차 바뀌는 문장 반복하기 </TITLE>
  <STYLE type="text/css">  </STYLE>
</HEAD>
<BODY>
  색깔이 한 글자씩 점차 바뀌는 문장 반복하기<BR><BR>
  <SCRIPT language="JavaScript"> <!--
     var vgul="색깔이 한 글자씩 점차 바뀌는 문장 반복하기";  //표시될 문장
     var vbase="PINK";           //글씨의 기본 색 설정
     var vchange="CRIMSON";        //글씨가 변해갈 색 설정
     var vspeed=200;             //글씨 변환 속도. 수치가 클수록 느려짐
     var n=0;
     if (document.all){
       document.write('<FONT size=6 color="'+vbase+'">')
       for (m=0;m<vgul.length;m++)
       document.write('<SPAN id="chtext">'+vgul.charAt(m)+'</SPAN>')
       document.write('</FONT>')
       var vtemp=document.all.chtext
     }
     else document.write(vgul);
     
     function chcolor(){
       if (n==0){
         for (m=0;m<vgul.length;m++)
         vtemp[m].style.color=vbase
       }
     
       vtemp[n].style.color=vchange
       
       if (n<vtemp.length-1)
         n++
       else{
         n=0
         setTimeout("startch()",1500)
         return
       }
     }
     
     function startch(){
       if (document.all)
       vt=setInterval("chcolor()",vspeed)
     }
     startch()
     </SCRIPT>
</BODY>
</HTML>

64.22. 점차 나타났다 사라지며 위로 스크롤되는 문장

문장이 서서히 나타났다가 서서히 사라지면서 위로 스크롤되는 프로그램입니다. 공지사항 등을 알릴 때 사용할 수 있는 예제입니다.

** 사진: 문장이 점차 나타났다 사라지면서 위로 스크롤됩니다.

** 살펴볼 부분
1. ex1_22.html 문서를 불러옵니다.
2. agul 배열에 필요한 문장과 링크 내용을 적어줍니다.
3. bgcolor은 처음 표시될 색으로 흰색과 같이 밝은 색을 지정하고, color은 글자가 변할 색이므로 진한 색을 지정합니다.

64.23. 일정 시간마다 위로 올라가는 문단

문장이 서서히 나타났다가 서서히 사라지면서 위로 스크롤되는 프로그램입니다. 공지사항 등을 알릴 때 사용할 수 있는 예제입니다.

** 사진: 문단이 일정 시간을 간격으로 위로 스크롤됩니다.

** 살펴볼 부분
1. ex1_23.html 문서를 불러옵니다.
2. agul 배열에 필요한 문장과 링크 내용을 적어줍니다.
3. vwidth와 vheight 변수는 문장을 표시할 영역의 크기를 설정합니다.
4. setTimeout() 명령의 수치를 조절하여 스크롤되는 시간을 조절합니다.

64.24. 춤추는 글자

글자가 춤을 추는 것 같은 재미있는 예제입니다. 실제로 사용할 일은 별로 없지만 춤을 추는 듯한 효과를 어떻게 구현했는지 살펴볼 필요는 있습니다.

** 사진: 문장의 글씨가 변하면서 마치 춤추는 것 같은 효과를 줍니다.

** 살펴볼 부분
1. ex1_24.html 문서를 불러옵니다.
2. theText 변수에 표시할 문장을 입력합니다.
3. setTimeout() 명령의 수치를 조절하여 글자의 움직이는 속도를 조절합니다.

64.25. 마우스 대면 표색깔 서서히 바꾸기

마우스를 가져가면 표의 색깔이 점차 바뀌는 예제는 은은하면서도 동적인 효과를 보여줍니다. 바뀌는 색이나 변하는 속도에 따라서 효과는 달라질 수 있습니다. 이 효과는 그림을 오버랩기법으로 보여줄 때에 사용하는 필터링 효과를 이용했습니다.

** 사진: 마우스를 가져가면 표의 색이 은은하게 변합니다.

** 살펴볼 부분
1. ex1_25.html 문서를 불러옵니다.
2. 표의 속성을 조절하거나 표 안에 필요한 문장을 삽입해 사용합니다.