일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- gsap
- styled component 작동 안될때
- rn webview page loading
- 리액트
- styled component 작동안함
- 퍼블리셔
- gsap 기초
- 임고미
- react
- js 특정 위치로 이동
- React Native SafeArea Custom
- JS
- RN navitate push
- React-Native 공부
- slick slider 간격
- SafeArea 커스텀
- styled component
- reactnative 웹뷰 페이지 로딩
- scrollIntoView scrollTo
- react native safeArea
- styled component is not working
- input 숫자입력
- React-Native IOS
- react이론
- 트윈맥스 기초
- safari wiondow.open
- React Native navigation
- 타입스크립트
- 프론트앤드
- 웹뷰 페이지 로딩
Archives
- Today
- Total
개발공부 임고미
[html / Javascript] 커서(cursor)부분 작업하기 ( 커서 모양 ) ( 2 ) 본문
728x90
300x250
→ 결론 : 비추, 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태그 만으로 따로 설정해 줄 수 있는 방법이 없습니다. |
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태그 만들어서 사용하고 스크립트를 거는것을 권장합니다!
728x90
300x250
'퍼블리싱 > html css js' 카테고리의 다른 글
[CSS] 언어별 폰트 다르게 적용하기 ( unicode-range ) (0) | 2020.12.20 |
---|---|
[Javascript] parseInt() / Number()를 알아보자 (0) | 2020.10.06 |
[css] 커서(cursor)부분 작업하기 ( 커서 모양 ) (1) | 2020.10.02 |
[Javascript] includes() / startsWith() / endsWith() (0) | 2020.09.25 |
[Javascript] find() / findIndex() / filter() (0) | 2020.09.24 |
Comments