113. 일러스트 CC : 윈도우(W) → SVG 상호 작용 > 일러스트레이터 CC(illustrator Creative Cloud) 강좌

일러스트레이터 CC(illustrator Creative Cloud) 강좌

일러스트레이터 CC 사용 방법을 쉽게 익혀 보세요.
일러스트레이터 CC 강좌, 강의, 매뉴얼, 설명서

113. 일러스트 CC : 윈도우(W) → SVG 상호 작용 정보

윈도우 113. 일러스트 CC : 윈도우(W) → SVG 상호 작용

본문

 

※ 상단의 링크를 통하여 더 자세한 정보를 알 수있으며, 본문 내용의 일부는 이곳에서 발췌하였습니다.

 

 

GIF, JPEG, WBMP 및 PNG와 같은 웹용 비트맵 이미지 포맷은 픽셀로 이미지를 나타냅니다

생성된 파일은 크기가 커져서 단일 해상도(흔히 저해상도)로 제한되기 쉽고 웹에서 속도도 느려집니다.

하지만 SVG는 이미지를 모양, 패스, 텍스트, 필터 효과 등으로 나타내는 벡터 포맷입니다.

결과로 생성되는 파일은 크기가 작고 웹 상에서, 인쇄할 때나 리소스가 제한되어 있는 휴대용 장치에서도 고품질의 그래픽을 제공합니다.

 

짧게 말하여 SVG의 장점은 화면에서 SVG의 고품질 이미지를 확대하여 볼 수 있지만 깨지지 않고, 웹상에서의 속도도 빠르며  텍스트와 색상 지원이 뛰어납니다. 또한 여러 디바이스에서도 사용 가능하고 일러스트레이터 대지에 나타나는 이미지 그대로 사용자에게 보여줄 수 있습니다.

 

이전 강의에서도 SVG를 다룬 적이 있습니다.

옆의 링크를 참고하여 주세요! ☞ SVG 강좌 다시보기

 

 

 

SVG 상호 작용

 

웹 브라우저에서 보기 위해 아트웍을 내보낼 때 최상단 메뉴의 윈도우(W) → SVG 상호 작용을 클릭합니다.

 

f6d75ab0f66e4a1edd27a6432fc7f80e_1436496523_0343.png 

 

자바스크립트 명령을 실행하는 이벤트를 만들어 사용자가 마우스 커서를 오브젝트로 이동하는 등의 액션을 수행할 때 웹 페이지에 신속하게 움직임을 만들 수 있습니다. 또한 'SVG 상호 작용' 패널을 사용하여 현재 파일과 관련된 이벤트와 자바스크립트 파일을 모두 볼 수 있습니다.  

 

f6d75ab0f66e4a1edd27a6432fc7f80e_1436497588_1335.png

 

 이벤트의 기능을 살펴볼까요?

 

onfocusin - 요소가 포커스를 받을 때(예: 포인터로 선택) 액션을 실행합니다.

onfocusout - 요소가 포커스를 잃을 때(주로 다른 요소가 포커스를 받을 때) 액션을 실행합니다.

onactivate - SVG 요소에 따라 마우스 클릭 또는 키 누름으로 액션을 실행합니다.

onmousedown - 요소에서 마우스 단추를 누를 때 액션을 실행합니다.

onmouseup - 요소에서 마우스 단추를 놓을 때 액션을 실행합니다. 

onclick - 요소에서 마우스를 클릭할 때 액션을 실행합니다.

onmouseover - 포인터를 요소 위로 이동할 때 액션을 실행합니다.

onmousemove - 포인터가 요소에 있는 동안 액션을 실행합니다.

onmouseout - 포인터를 요소에서 다른 곳으로 이동할 때 액션을 실행합니다.

onkeydown - 키를 누를 때 액션을 실행합니다.onkeypress - 키를 누르고 있는 동안 액션을 실행합니다.

onkeyup - 키를 놓을 때 액션을 실행합니다.

onload - 브라우저의 SVG 문서 구문 분석이 완전히 끝나면 액션을 실행합니다. 이 이벤트를 사용하여 한 번만 초기화하는 기능을 호출합니다.

onerror - 요소를 제대로 불러오지 못하거나 다른 오류가 발생한 경우 액션을 실행합니다.

onabort - 요소를 완전히 불러오기 전에 페이지 불러오기가 중단된 경우 액션을 실행합니다.

onunload - SVG 문서가 창 또는 프레임에서 제거되면 액션을 실행합니다.

onzoom - 문서의 확대/축소 수준을 바꾸면 액션을 실행합니다.

onresize - 문서 보기 크기를 조절할 때 액션을 실행합니다.

onscroll - 문서 보기를 스크롤하거나 초점을 이동할 때 액션을 실행합니다.

 

 


 

JavaScript 파일 연결을 할 때는 아래와 같이 수행합니다.

 

 

f6d75ab0f66e4a1edd27a6432fc7f80e_1436503112_137.png


 

 

 하단에 JavaScript 파일 연결을 클릭!

 
f6d75ab0f66e4a1edd27a6432fc7f80e_1436498072_0959.png


 

추가를 클릭하여 JavaScript 파일을 찾습니다.

 

f6d75ab0f66e4a1edd27a6432fc7f80e_1436498110_6784.png
URL을 입력하거나 선택을 눌러 파일을 추가합니다.
f6d75ab0f66e4a1edd27a6432fc7f80e_1436498355_0916.png
확인을 누르면 위와 같이 목록이 생깁니다.목록을 지우거나 삭제할 수 있습니다.

 

 

 

댓글 0개

전체 126 |RSS
일러스트레이터 CC(illustrator Creative Cloud) 강좌 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT