10. 1 레이어 삽입하기

레이어 만들기

레이어는 HTML 문서 위에 그림, 글, 표 등 여러 가지 개체를 삽입할 수 있는 영역을 말합니다.

기본 도구 막대에서 레이어 삽입하기 를 선택하면 편집 창에 레이어가 삽입됩니다.

1. 레이어 앵커 : 레이어 태그가 실제로 삽입되어 있는 곳을 알려줍니다.

2. 레이어 핸들 : 레이어를 선택할 때 이용합니다. 레이어를 움직이는 손잡이라고 할 수 있습니다.

3. 레이어 영역 : 레이어 속에 글이나 그림을 실제 삽입하는 영역입니다.

레이어 목록 대화 상자

레이어 목록 대화 상자를 이용하면 편집 창에 삽입한 레이어 목록을 한 눈에 볼 수 있습니다. 레이어 목록 대화 상자는 편집 창의 양 옆이나 아래에 도킹하여 사용할 수 있으며, <Ctrl> 키를 누르면 도킹을 막을 수 있습니다.

1. 메뉴에서 [창 > 레이어 목록]을 선택하거나 단축키 <Alt+5>를 누릅니다.

2. 문서에 삽입된 레이어의 이름, Z, 보이기 속성이 표시된 레이어 목록이 뜹니다.

3. 레이어 목록 대화 상자에서 항목을 더블 클릭하여 레이어 속성 대화 상자에서 해당 레이어의 속성을 변경할 수 있습니다.

한 문서에 여러 개의 레이어를 삽입할 수 있으며, 하나의 레이어 위에 여러개의 레이어를 겹쳐 놓을 수도 있습니다. 메뉴에서 [창>레이어 목록]을 선택하면 편집 창에 삽입한 레이어 정보를 확인할 수 있습니다.

1. 메뉴에서 [삽입>레이어]를 선택하거나 기본 도구 막대에서 레이어 삽입하기를 선택합니다.

2. 커서를 문서에 삽입한 레이어 바깥쪽에 놓은 뒤 다시 레이어를 삽입합니다. 커서를 레이어 바깥쪽에 놓지 않으면 자식 레이어가 만들어 집니다.

자식 레이어 만들기

자식 레이어는 부모 레이어 위치에 대한 상대적인 위치로 지정됩니다. 따라서 부모 레이어를 옮기면 자식 레이어도 같이 움직입니다.

1. 메뉴에서 [삽입>레이어]를 선택하거나 기본 도구 막대에서 레이어 삽입하기 를 눌러 레이어를 삽입합니다.

2. 마우스 커서를 레이어 안쪽에 놓은 채 다른 레이어를 삽입합니다.

3. 먼저 삽입한 레이어가 부모 레이어, 나중에 만든 레이어가 자식 레이어가 됩니다.

layer1과 layer2는 독립된 레이어며, layer3과 layer4는 부모와 자식레이어입니다.

글과 그림 넣기

1. 레이어 안에 커서를 놓습니다.

2. 글자를 입력하고 글자 속성을 바꿔 줍니다.

3. 기본 도구 막대에서 그림 삽입하기를 선택하여 레이어 안에 그림을 넣어 줍니다.

배경 꾸미기

1. 레이어를 선택하거나 레이어 안에 커서를 놓으면 레이어 속성 바로보기가 활성화됩니다.

2. 레이어 속성 바로 보기에서 팔레트 단추를 눌러 배경색을 지정해 줍니다.

3. 찾아보기를 눌러 디스크에 저장된 그림을 레이어 배경그림으로 넣어 줄 수 있습니다.

10. 2 애니메이션 적용하기

애니메이션 효과 주기

문서에 삽입한 그림, 글, 레이어가 움직이는 효과를 만듭니다. 특정 문단 또는 레이어가 원하는 형태로 움직이게 하는 애니메이션 효과를 만듭니다.

1. 다음 중 한 가지를 선택합니다.

-. 메뉴에서 [삽입 > 스크립트 > 스크립트 마법사]를 선택합니다.

-. 기본 도구 막대에서 를 선택합니다.

2. 스크립트 마법사 대화 상자가 나타나면 1단계 : 카테고리 선택에서 '그림 효과', 2단계 : 스크립트 선택에서 '애니메이션 효과'를 선택한 뒤 다음 단추를 누릅니다.

3. 레이어 이름과 시작 위치를 지정합니다. 미리보기를 참고하여 발자취에서 움직이는 형태(직선, 곡선, 나선)를 지정해 줍니다.

4. 시작 조건, 시작 시간, 총 단계를 설정합니다. 총 단계에 입력한 숫자가 클수록 애니메이션이 느리게 진행됩니다.

5. 확대나 축소를 지정하고, 단어들이 따로 움직이게 하려면 낱말로 끊기 옵션에 체크 표시합니다. 인터넷 익스플로러에서만 적용되는 효과입니다.

6. 마침 단추를 누르면 애니메이션 효과가 적용된 레이어에 스크립트 마법사 서식 부호가 나타납니다.

※ 애니메이션 효과에서 종료 위치는 현재 편집 창에서의 레이어의 위치입니다.

※ 애니메이션 효과는 커서가 있는 문단 단위로 설정되므로 같은 행에 있는 문자열에 다른 애니메이션을 적용하려면 별도의 레이어를 만든 뒤 애니메이션 효과를 설정해야 합니다. 커서가 있는 문단에 <Shift-Enter> 키를 눌러 행을 구분한 경우라도 한 문단이므로 하나의 애니메이션 효과만 적용됩니다.

10. 3 액션 효과 주기

액션 효과 주기

액션과 이벤트

액션

액션이란 웹 문서에서 특정 동작이 수행되도록 나모 웹에디터에서 미리 만들어 제공하는 규격화된 스크립트를 말합니다. 나모 웹에디터는 자주 사용되는 동작에 대한 스크립트를 액션으로 만들어 제공합니다. 액션을 사용하면 스크립트를 직접 작성하지 않아도 다양한 동작이 수행되도록 웹 문서를 작성할 수 있습니다. 또한 액션은 크로스 브라우징을 고려하여 작성되었기 때문에 인터넷 익스플로러와 넷스케이프에서 동일하게 작동합니다. 단추를 눌렀을 때 그림이 바뀌게 하거나 상황선에 설명문이 나오는 동작, 웹 브라우저가 웹 문서를 읽어 들일 때 안내창이 뜨도록 하는 동작 등이 실행되는 웹 문서를 액션을 사용하여 간단하게 만들 수 있습니다.

이벤트

이벤트란 특정한 동작이 발생했다는 신호를 말합니다. 마우스 단추를 누르는 것, 마우스 포인터를 움직이는 것, 키보드를 누르는 것, 웹 브라우저가 새 문서를 읽어들이는 것 등이 이벤트에 해당됩니다. 웹 브라우저는 어떠한 이벤트가 어디에서 일어났는지 확인하여 특정 이벤트가 발생했을 때 사용자가 그 이벤트에 지정한 액션을 실행합니다. 예를 들어, 그림을 더블 클릭하면 안내창이 나타나도록 만들었을 때 '그림을 더블 클릭하는 것'이 이벤트에 해당하고 '안내창이 나타나는 것'이 액션에 해당됩니다.

※ 스크립트 마법사는 정해진 규격대로 이용해야 하는 반면,액션은 이벤트와 조합하여 사용하기 때문에 주어진 몇 가지 액션을 가지고도 다양한 형태의 효과를 만들 수 있습니다. 문서에 적용한 스크립트 마법사와 액션은 스크립트 관리자를 이용해서 관리할 수 있습니다.

레이어 감추기

액션 설명

레이어를 감춥니다. 레이어를 감추게 하는 기법을 잘 사용하면 재미있는 효과를 만들 수 있습니다.

대상 레이어

레이어 목록에서 감출 레이어를 선택합니다.

1. 레이어를 삽입(tip)한 뒤 레이어 배경 색상을 지정하고, 'tip'이라고 입력합니다.

2. 레이어 내에 커서를 놓거나 레이어를 선택한 뒤 액션 창에서 추가 단추를 누릅니다.

3. 액션 속성 대화 상자에서 이벤트 'OnMouseOver', 액션 '레이어 감추기', 대상 레이어 'tip'로 지정한 뒤 확인 단추를 누릅니다.

4. 미리보기에서 액션을 지정한 레이어(tip)에 마우스를 갖다 대면 사라지는지 확인합니다.

이벤트 목록

이벤트란 특정한 동작, 예를 들면 마우스 단추를 누르거나 마우스 포인터를 움직이는 등의 사건이 발생했다는 신호를 말합니다. 웹 브라우저는 어떤 이벤트가 어디에서 일어났는지 확인하고 특정 이벤트가 발생했을 때 정해진 액션을 실행할 수 있습니다. 이벤트는 웹 문서에 삽입한 개체에 대하여 발생합니다. "그림을 더블 클릭한다 또는 그림 위에 마우스 포인터를 올려 놓는다"와 같은 이벤트에서는 '그림'이 개체에 해당합니다. 웹 문서에서 개체란 그림, 폼 필드, 레이어 등의 요소에서 문서 자체에 이르기까지 종류가 다양합니다.

나모 웹에디터에서 지원 하는 이벤트 목록은 다음과 같습니다

이벤트	설명
onAbort	진행 중인 동작을 취소할 때 발생하는 이벤트입니다. 예를 들어 그림을 읽어 들이는 도중에 다른 하이퍼링크 또는 브라우저의 중지 단추를 눌렀을 때 발생합니다.
onError	브라우저가 웹 문서나 그림을 제대로 읽어 들이지 못할 때 발생하는 이벤트입니다.
onResize	브라우저 크기를 조정했을 때 발생하는 이벤트입니다.
OnScroll	브라우저 화면을 스크롤할 때 발생하는 이벤트입니다.
onLoad	브라우저가 해당 개체를 읽어 들일 때 발생하는 이벤트입니다.

onUnload	브라우저를 떠날 때 발생하는 이벤트입니다.
onBlur	해당 폼 필드가 비활성화되었을 때 발생하는 이벤트입니다.
onChange	폼 필드의 내용을 바꾸고 해당 필드를 빠져 나갔을 때 발생하는 이벤트입니다.
onFocus	탭이나 마우스가 해당 폼 필드를 활성화 시켰을 때 발생하는 이벤트입니다.
onKeyDown	키보드에서 키를 눌렀을 때 발생하는 이벤트입니다.
onKeyPress	키보드에서 키를 누를 때 발생하는 이벤트입니다.
onKeyUp	키보드에서 키를 눌렀다 놓았을 때 발생하는 이벤트입니다.
onSelect	폼 필드의 내용을 선택했을 때 발생하는 이벤트입니다.
onClick	개체를 클릭했을 때 발생하는 이벤트입니다.
onDblClick	개체를 더블 클릭했을 때 발생하는 이벤트입니다.
onMouseOut	개체 위에 있던 마우스 커서를 개체 바깥으로 이동시켰을 때 발생하는 이벤트입니다.
onMouseOver	마우스 커서를 개체 위에 올렸을 때 발생하는 이벤트입니다.
onMouseUp	개체나 특정 영역 위에서 마우스 단추를 눌렀다가 뗄 때 발생하는 이벤트입니다.
onMouseDown	개체나 특정 영역 위에서 마우스 단추를 눌렀을 때 발생하는 이벤트입니다.

액션 목록

액션이란 웹 문서에서 특정 동작이 수행되도록 나모 웹에디터에서 미리 만들어 제공하는 규격화된 스크립트를 말합니다. 나모 웹에디터가 제공하는 액션은 자바 스크립트로 만들어 졌으며 인터넷 익스플로러와 넷스케이프에서 동일하게 동작하도록 제작되었습니다. 나모 웹에디터가 제공하는 액션 목록은 다음과 같습니다.

Windows 미디어 플레이어 일시정지	Microsoft Windows Media Player로 재생되는 오디오나 비디오 파일을 잠시 멈춥니다.
Windows 미디어 플레이어 재생하기	Microsoft Windows Media Player로 오디오나 비디오 파일을 재생합니다.
Windows 미디어 플레이어 중지하기	Microsoft Windows Media Player로 재생되는 오디오나 비디오 파일을 멈춥니다.
개체 보이기	지정한 개체를 보이도록 합니다.
개체 숨기기	지정한 개체를 보이지 않도록 합니다.
경고 메시지와 함께 웹 사이트로 이동하기	경고 메시지 창이 뜨면서 확인 단추를 누르면 해당 주소(URL)로 이동합니다.
그림 크기 변경하기	그림 크기를 변경합니다.
그림 파일 되돌리기	그림 파일 바꾸기로 바꾼 그림 파일을 원래대로 되돌립니다.
그림 파일 미리 읽기	그림 파일을 미리 읽어 들입니다. 대표적인 예는 롤오버 그림입니다.
그림 파일 바꾸기	그림 파일을 다른 파일로 바꿉니다.
글자 수 제한하기	폼에 입력한 내용이 제한 용량을 넘어가는지 검사합니다.

깜박이는 효과	깜박이는 문자 효과를 주는 스크립트를 만듭니다.
내용 선택하기	폼에서 내용을 선택합니다.
레이어 Z 순서 바꾸기	레이어의 Z 순서(보이기 순서)를 지정합니다.
레이어 감추기	레이어를 보이게 감춥니다.
레이어 배경 그림 지정하기	레이어에 배경 이미지가 나타납니다.
레이어 배경색 지정하기	레이어에 배경색 효과를 줍니다.
레이어 보이기	레이어를 보이게 합니다.
레이어 이동하기 - 속도와 단계 지정	레이어가 속도와 단계에 따라 미끄러듯이 지정한 좌표로 이동하는 효과입니다.
레이어 이동하기 - 지정한 거리만큼	레이어가 떠 있는 상태에서 정해진 크기만큼 이동합니다.
레이어 이동하기 - 지정한 위치로	레이어가 떠 있는 상태에서 정해진 위치로 한번에 이동합니다.
레이어 자르기	지정한 사각형의 영역만큼 레이어를 잘라서 보여줍니다.
레이어 전환 효과	레이어에 전환 효과를 줍니다.
레이어 크기 변경하기	사용자가 지정한 너비와 높이로 레이어의 크기가 조절됩니다.
레이어 툴팁 만들기	레이어에 도구 설명(tooltip)을 만듭니다.
레이어에 글자 나타내기	레이어에 문자가 출력됩니다.
마우스 오른쪽 클릭 제어하기	마우스 오른쪽 단추 클릭을 막아줍니다.
메시지 띄우기	여러 가지 메시지를 대화 상자 형식으로 보여 줍니다.
배경 그림 바꾸기	웹 문서의 배경 그림을 바꿔줍니다.
배경색 바꾸기	웹 문서의 배경색을 바꿔줍니다.
브라우저 종류 알아내기	브라우저 종류를 알아내서, 각각 다른 주소로 이동합니다.
상위 프레임 링크 변경하기	나눠진 프레임을 합쳐, 프레임이 사라진 것같은 화면에 지정한 URL을 불러 옵니다.
상황선 효과 - 날아 오는 메시지	브라우저 아래쪽의 상황선에 날아 오는 메시지 효과를 줍니다.
상황선 효과 - 메시지 보이기	브라우저 아래쪽의 상황선에 메시지가 보입니다.
상황선 효과 - 반짝이는 메시지	브라우저 아래쪽의 상황선에 메시지가 반짝거리는 효과를 줍니다.
상황선 효과 - 지워지는 메시지	브라우저 아래쪽의 상황선에 메시지가 지워지는 듯한 효과를 줍니다.
새 윈도우 열기	특정 주소의 사이트를 새 브라우저에서 엽니다.
웹 문서 다시 읽어들이기	윈도우에 열린 웹 문서가 자동으로 읽혀집니다.
윈도우 닫기	윈도우를 닫습니다.
윈도우 스크롤 효과내기	웹 문서의 특정 위치에 문서가 배경으로 스크롤되는 효과입니다.
윈도우 회전 효과내기	윈도우가 열리면 원을 그리며 순환하는 효과를 줍니다.
이메일 주소 검사하기	이메일(E-mail) 입력란에 올바로 이메일 주소를 입력했는지 확인합니다.
인쇄하기	웹 문서를 인쇄합니다.
일정 시간마다 웹 문서 다시 읽어들이기	시간이 지나면 웹 문서의 내용이 다시 읽혀집니다.
일정 시간 후 다른 웹 문서로 이동하기	시간이 흐르면 자동으로 다른 웹 문서로 이동합니다.

자바 스크립트 함수 호출하기	자바 스크립트 함수를 호출합니다.
전체 화면으로 보여주기	브라우저에서 웹 페이지가 풀스크린으로 열립니다.
주소(URL) 이동하기	윈도우의 URL을 변경합니다.
주소(URL) 이동하기 - 운영체제별 이동	방문자의 운영체제(Operating System)를 파악하여 운영체제에 맞는 페이지를 보여 줍니다.
주소(URL) 이동하기 - 해상도별 이동	방문자의 해상도(Resolution)를 파악하여 해상도에 맞는 페이지를 보여 줍니다.
지정한 웹 사이트 거쳐가기	특정 사이트로 이동하기 위해서 먼저 들러야 하는 사이트를 링크합니다.
최신 업데이트 정보 나타내기	레이어에 최근에 업데이트한 정보를 보여 줍니다.
타임 라인 멈추기	타임 라인의 실행을 멈춥니다.
타임 라인 실행하기	타임 라인을 실행합니다.
타임 라인의 특정 장면으로 이동하기	타임 라인의 특정 장면으로 이동한 후, 다시 실행합니다.
펼쳐지는 윈도우 만들기	윈도우를 열면 점점 크기가 커지는 효과입니다.
폼 내용 검사하기	폼에 값을 입력했는지 검사해 줍니다.
폼 필드 공백 확인하기	폼 필드에 값을 입력했는지 검사해 줍니다. 입력을 안 했을 경우 경고 메시지가 뜹니다.
설정한 크기대로 윈도우 변경하기	사용자가 지정한 너비와 높이에 맞춰 윈도우 크기가 변경됩니다.
설정한 크기만큼씩 윈도우 변경하기	윈도우가 떠 있는 상태에서 정해진 크기만큼 점점 더 작아지거나 커지는 효과를 줍니다.
숫자 검사하기	입력한 값이 숫자인지 검사합니다.
안내창 열기	마우스 이벤트가 발생할 때 안내창이 뜨도록 합니다.
폼 필드 내용 지우기	폼 안에 입력한 내용을 모두 지워줍니다.
폼 필드 강조하기	웹 문서를 열면 폼 필드 안에 바로 내용을 입력할 수 있도록 마우스 커서를 놓습니다.
프레임 링크 바꾸기 - 두 개의 프레임	두 개의 프레임 링크를 동시에 변경합니다.
프레임 링크 바꾸기 - 세 개의 프레임	세 개의 프레임 링크를 동시에 변경합니다.
프레임 문서 링크 방지하기	특정 프레임에서 문서가 열리는 것을 방지합니다.
플러그인 종류 알아내기	넷스케이프 전용으로, 플러그인의 종류를 알아내고, 플러그인의 설치유무에 따라 다른 주소로 이동합니다.
필터 효과 - 가장자리 효과	가장자리 효과를 내는 필터를 적용합니다.
필터 효과 - 그림자 효과	그림자 필터를 적용합니다.
필터 효과 - 떠보이게 하기	그림자를 이용해 떠보이게 하는 효과를 적용합니다.
필터 효과 - 마스크(Mask) 효과	마스크 필터를 적용합니다.
필터 효과 - 반전 효과	반전 필터를 적용합니다.
필터 효과 - 방향 조정하여 흐리게 하기	방향을 조정하여 흐리게 하는 효과를 적용합니다.
필터 효과 - 상하 뒤집기	상하 뒤집기 필터를 적용합니다.
필터 효과 - 알파 효과	알파필터를 적용합니다.

필터 효과 - 엑스레이 사진 효과	엑스레이 필터를 적용합니다.
필터 효과 - 좌우 뒤집기	좌우 뒤집기 필터를 적용합니다.
필터 효과 - 크로마(Chroma) 효과	크로마 필터를 적용합니다.
필터 효과 - 파동 효과	세로 축의 싸인 파동 형태를 따라 개체의 내용이 일그러지는 효과를 냅니다.
필터 효과 - 회색 효과	회색 필터를 적용합니다.
필터 효과 - 흐리게 하기	흐리게 하는 효과를 적용합니다.
필터 효과 제거하기	적용된 필터 효과를 제거합니다.
흔들리는 윈도우 효과내기	윈도우 창이 흔들리는 효과입니다.