Recent Articles
-
텍스트 / 롤오버 효과 링크 텍스트의 색상이나 배경에 플래쉬효과를 줍니다
// 주목하고자 하는 링크 텍스트를 일정간격으로 반짝거리게 하는 스크립트 입니다. // 텍스트, 혹은 배경색을 변경시켜 깜빡이는 효과를 줍니다 // [1단계] 아래의 코드를 <head> 와 </head> 사이에 붙여 넣으세요 <script language="JavaScript1.2" type="text/javascript"> var flashlinks=...
-
정해진 속도로 이미지나 텍스트를 좌우로 흔들리게 하는 스크립트 입니다 <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> J@sko Sample Script </title> <meta name="Generator" content="EditPlus"> </head> <body> <!-- [1단계] 아래의 코드를...
-
텍스트 / 롤오버 효과 텍스트 버튼에도 롤오버 배경이미지를 넣자
<!--1. 아래 스크립트를 HEAD 부분에 복사해 넣으세요. 없으면 그냥 두세요--> <!--img1.gif 는 초기배경, img2.gif는 롤오버시 배경그림입니다--> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> .initial{font-weight:bold;bac...
-
텍스트 / 롤오버 효과 dissolving 효과가 나는 롤오버 버튼 만들기
마우스를 대면 플래시에서 많이 사용하는 dissolving 효과가 나오도록 코딩된 스크립트 입니다 <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> J@sko Sample Script </title> <meta name="Generator" content="EditPlus"> <!-- 이 예제에서는 3개...
-
텍스트 / 롤오버 효과 예쁘게 스크롤 되는 풍선 도움말(툴팁) 스크립트
풍선도움말이 한글자씩 타이핑 되며 나타나는 스크립트 입니다 <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title> jasko sample script </title> <!---- [1단계] 아래 코드를 <HEAD> 와 <HEAD> 태그 사이에 붙여 넣으세요 ---> <script language=javaS...
-
<html> <head> <!-- 1. 윈도우의 메모장 등으로 아래의 스크립트를 <HEAD>태그와 </HEAD> 태그 사이에 복사 해 넣으세요 --> <style type="text/css"> .navtext {text-align:left; width:200px; font:bold 9pt sans-serif; border-width:2px; border-style:outset; border-color:white;...
-
상태바 / 타이틀바 관련 상태바에 X, Y 축 마우스 좌표를 보여 줍니다
<HTML> <HEAD> <TITLE> Jasko Sample Script </TITLE> <!------1. 아래의 코드를 HEAD 부분에 복사해 넣으세요 ------------------------------> <script language="javascript"> var where = ""; function checkwhere(e) { if (document.layers){ xCoord = e.x; yCoord = e.y; } else if (...
-
상태바 / 타이틀바 관련 부드럽게 타이핑 되는 스크롤바 텍스트 효과 입니다
<HTML> <HEAD> <TITLE> Jasko Sample Script </TITLE> <!------1. 아래의 코드를 HEAD 부분에 복사해 넣으세요 ------------------------------> <SCRIPT> <!-- message = "Welcome to JavaScript Sourbank JASKO^" + "반드시 오른쪽에 보이는 부호로 끝나야 합니다^" + "아참, 여기서는 안보이겠...
-
상태바 / 타이틀바 관련 타이틀바에서도 메세지들이 타이핑 됩니다
<HTML> <HEAD> <TITLE> Jasko Sample Script </TITLE> <!------1. 아래의 코드를 HEAD 부분에 복사해 넣으세요 ------------------------------> <script language="JavaScript1.2"> var message="자바스크립트 소스뱅크 - JASKO" var message=message+" " i="0" var temptitle="" var speed="150" function...
-
상태바 / 타이틀바 관련 이미지에 마우스를 댈때마다 상태바에 다른 메세지를 보여줍니다
<HTML> <HEAD> <TITLE> Jasko Sample Script </TITLE> <!------1. 아래의 코드를 HEAD 부분에 복사해 넣으세요 ------------------------------> <script> var entices=new Array() // 상태바에 보여주고 싶은 메세지들을 아래 순서대로 입력 하세요 entices[0]="자바스크립트 소스뱅크 입니다" ...
-
상태바 / 타이틀바 관련 상태바에서 한글자씩 타이핑된 후 왼쪽으로 스크롤되며 사라집니다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Jasko Sample Script </TITLE> <STYLE> body,td {font-size:12px} </STYLE> <!----- 1. 아래의 스크립트를 HEAD 부분에 붙여 넣으세요 --------> <SCRIPT LANGUAGE="JavaScript"> <!-...
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Jasko Sample Script </TITLE> <META NAME="Author" CONTENT="JASKO"> <META NAME="Keywords" CONTENT="javascript, 자바스크립트, 자바"> <META NAME="Description" CONTEN...
-
상태바 / 타이틀바 관련 시간별로 달라지는 상태바 메세지
<HTML> <HEAD> <TITLE> Jasko Sample Script </TITLE> <!---- [1단계] 아래의 소스코드를 <HEAD>와 </HEAD> 사이에 붙여 넣으세요 ----> <script language="javascript"> <!-- txt = "" txtt = "" txttt = "" function Time() { var now = new Date(); var time = now.getHo...
-
상태바 / 타이틀바 관련 이미지에 마우스를 댈때마다 상태바에 다른 메세지를 보여줍니다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Jasko Sample Script </TITLE> <!---- [1단계] 아래의 소스코드를 <HEAD>와 </HEAD> 사이에 붙여 넣으세요 ----> <script> var entices=new Array() // 보여줄 메세지들을 설정 하세요...
-
상태바 / 타이틀바 관련 제목표시줄 (타이틀바)에 랜덤으로 메세지들을 보여줍니다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv="content-type" content="text/html; charset=euc-kr"> <!---- [1단계] 아래의 소스코드를 <HEAD>와 </HEAD> 사이에 붙여 넣으세요 ----> <SCRIPT LANGUAGE="JavaScript"> <!-...
-
상태바 / 타이틀바 관련 상태바에서 2가지 형태의 메세지를 보여줍니다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Jasko Sample Script </TITLE> <META NAME="Author" CONTENT="JASKO"> <!---- [1단계] 아래의 소스코드를 <HEAD>와 </HEAD> 사이에 붙여 넣으세요 ----> <SCRIPT LANGUAGE="Jav...
-
상태바 / 타이틀바 관련 링크 태그에 마우스를 대면 제목표시줄의 내용이 바뀝니다
하이퍼링크나 기타 태그에 마우스를 대면 제목표시줄에 지정된 메세지로 바뀌게 되는 스크립트 입니다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Jasko Sample Script </TITLE> </HEAD> <BODY> <!--- 아래의 스크립트를 BODY ...
-
상태바 / 타이틀바 관련 상태표시줄에 요일별로 각기 다른 메세지가 출력 됩니다
요일별로 각기 다른 메세지를 상태표시줄에 출력 해 주는 스크립트 입니다 <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title> Jasko Sample Script </title> <!---- [1단계] ...
-
상태바 / 타이틀바 관련 상태바에 깜찍한 메세지 표시하기
글자들이 흩어졌다가 왼쪽으로 정열합니다 이 스크립트는 상태바에서 여러문장을들 차례대로 보여주는 스크립트 입니다 <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> J@sko Sample Script </title> <meta http-equiv=content-type content=te...
-
상태바 / 타이틀바 관련 링크에 마우스를 대면 상태표시줄에 암호처럼 보여줍니다
마우스를 대면 상태표시줄에 링크주소 대신 애니메이션 되는 텍스트들을 보여주는 스크립트 입니다 <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> J@sko Sample Script </title> <meta http-equiv=content-type content=text/html; charset=e...
-
상태바 / 타이틀바 관련 상태바에서 문장들이 타이프라이트 되면서 로테이트 됩니다
여러줄의 문장들을 타자치는 듯한 모습으로 보여주는 스크립트 입니다 <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> J@sko Sample Script </title> <meta http-equiv=content-type content=text/html; charset=euc-kr> </head> <body> <!---- 아...
Design Tips
-
포토샵이나 일러스트레이트에서 패쓰따라 텍스트를 쓸때에는 대부분 펜툴을 이용하여 패쓰를 만든뒤 텍스트를 올리는 것으로 사용하고 있지만, 로고 등과 같이 자체 쉐이프를 사용하여 사용이 가능한 경우 내장 쉐이프를 사용하는 것이 시간적으로도 많은 절약이 됩니다 예제는 원형 쉐이...
-
펜툴은 포토샵 뿐만 아니라 대부분의 그래픽프로그램에서 가장 많이 사용되는 툴입니다 그 기능을 잘 이해하고, 충분한 연습을 통해 능숙하게 사용할 수 있게 해 두면 좋습니다
-
Design TIP 색상수가 적은 이미지 여러영역 선택하여 배경 날리기
색상경계가 뚜렷한 이미지 편집에서 특정 영역을 선택하고자 할 때에는 Quick Selection Tool 도 잘 활용해 보세요 정밀한 작업을 위해선 펜툴을 사용하는것이 일반적이지만, 상황에 맞게 툴을 적절히 사용하는것이 작업에 훨씬 도움이 됩니다
-
Design TIP 스캔한 지문이미지 배경지우고 지문만 남기기
지문 부분만 선택하는법은 의외로 쉽습니다 단색이미지이기 때문에 아래의 방법으로 쉽게 선택영역을 지정할수 있습니다 이후 편집(색상변경 등)은 새로만든 레이어을 Ctrl 키와함께 클릭하면 다시 범위를 선택할수 있고, 바꾸고자하는 색을 전경색으로 지정한뒤 Clt+Del 키를 누르면 전경...
-
Design TIP 포토샵으로 만든 이미지 슬라이스툴로 잘라서 자동 HTML 코딩하기
1. 아래와 같은 메인페이지를 만들었다고 가정합니다 이 이미지를 슬라이스툴을 원하는 부분만 자르고 저장과 동시에 자동으로 HTML 코딩까지하는 방법을 간략하게 설명 드립니다 이 이미지파일의 이름은 main.psd 입니다 2. 먼저 메뉴바의 View->Ruler 를 선택하여 가로세로 줄...
-
Design TIP 포토샵에서 벡터마스크를 이용한 부분 둥근 모서리 이미지 만들기
1. 결과물입니다 2. 아래의 강좌를 따라해 보세요