[html / Javascript] 커서(cursor)부분 작업하기 ( 커서 모양 ) ( 2 )

→ 결론 : 비추,  css 쓰세요!

( 1 )에서는 css style을 통해 커서모양을 만들어 줬다면, 이번엔 간단하게 html의 a 태그를 이용해서 만들 수 있습니다.

포인트는, a tag의 href를 사용하지 않고 javascript의 window.open( )을 이용해 작업해준다는 것이다.

a태그를 사용하는 이유는, css를 먹이지 않고 화살표 모양이 나오게 하기 위해서이다.
(사실상 커서모양 바꾸기는 이 태그를 사용하는 것만으로도 끝난것입니다. 이하의 내용은 사용 방법과 이유에대한 내용입니다.)

<a href="http://주소" onclick="window.open(this.href, '_blank'); return false;">클릭</a>

코드를 하나하나 살펴보자면, href: 이동할 주소 , onclick: 실행시킬 함수 입니다.

Q. a태그를 사용할껀데 왜 window.open을 사용해주는걸까? A. 새창의 사이즈를 조절해주기 위해서입니다. a태그로 열린 새창의 사이즈와 같이 기타부분들은 , a태그 만으로 따로 설정해 줄 수 있는 방법이 없습니다. 그래서 js를 이용해 새창의 사이즈 등을 조정해줍니다.

 

window.open( )의 속성

window.open(URL, name, [specs], [replace])

인수	설명
URL	*_blank: 새 창으로 열기 *_self: 현재 페이지에 열기 *name: 그 이름의 윈도우 (지정된 이름의 윈도우가 없으면 새 창으로 열립니다.)
specs	창의 위치와 크기, 기능 등 창이 갖는 특성을 지정합니다.
replace	true: 새 문서가 이전의 문서와 교체합니다. false or 지정되지 않음 : 새 문서는 창의 브라우징 히스토리의 새 항목으로 추가됩니다.

 

예제코드 : 

function open() {
	url: 'https:// ~~';
    name: 새창;
    specs = " width: 400, height: 400, top: 200, left: 100, toolbar=no, menubar=no, scrollbars=no, resizable=yes";
	window.open(url, name, specs);
    return false;
}

 

정리

근데, 이 방법 선호 되는 방법이 아닙니다.

css로 스타일 먹이고, a태그대신 button태그 만들어서 사용하고 스크립트를 거는것을 권장합니다!