Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
29 | 30 | 31 |
Tags
- Semantic tag
- Semantic
- HTML
- 툴팁
- html5
- css3
- 새창열기
- window open
- 가상 클래스
- translate
- 태그
- 팝업
- JavaScript
- 가상 요소
- script
- 시맨틱
- window.open
- jQuery UI
- 깜박임
- tag
- 구글차트
- absolute
- 페이지 이동
- googlechart
- position
- 시맨틱 태그
- relative
- onclick
- jQuery
- Transform
Archives
- Today
- Total
무아지경
[HTML] onclick 으로 페이지 이동시키기 두번째.. 본문
onclick로 페이지 이동시키기
예전에 비슷한 onclick을 이용하여 페이지 이동 시키는 글을 작성한 적이 있다.
이때 사용 목적은 메인 페이지와 서브페이지 3~4 페이지를 만들어 놓고
실제 페이지 메뉴 클릭하면 실제 서비스중인 페이지처럼 보이게 하려는 목적이었고..
지금도 시안을 보여주기 위해 사용중인 방법이다.
실제로 a링크가 아닌 버튼을 이용해 페이지를 이동시켜야 할일이 생겨서 다시 한번 찾아봤다.
우선 첫번째 일반적인 onclick를 이용한 방법
<button type="button" class="navyBtn" onClick="location.href='http://www.naver.com'">네이버 이동</button>
|
cs |
두번째 새창으로 페이지 열기 : target="_blank" 와 같은 역할**
<button type="button" class="navyBtn" onClick="window.open('http://www.daum.net')">다음 새창 이동</button>
|
cs |
세번째 팝업으로 새창 열기
<button type="button" class="navyBtn" onClick="window.open('http://www.naver.com','네이버','width=800, height=700, toolbar=no, menubar=no, scrollbars=no, resizable=yes');return false;">네이버 새창 열기</button>
|
cs |
꼭 버튼이 아니더라도 li, div, span 등에도 사용 가능한 것 같다.
'퍼블리싱 > HTML5 + CSS3' 카테고리의 다른 글
[CSS] 가상 요소, 가상 클래스 (0) | 2020.12.23 |
---|---|
[CSS] float 속성 해제(clearfix) 방법 - overflow:hidden, ::after (0) | 2020.12.23 |
[HTML] HTML 태그(tag)들의 약자 정리(Full name) (0) | 2019.03.28 |
[CSS] 반응형 작업을 위한 폰트 단위 em / rem 사용 (23) | 2019.01.17 |
[HMTL] 특수문자 변환 (0) | 2018.12.19 |
Comments