<div/>
에 URL 링크를 연결하여, 클릭할 때 링크로 이동하는 방법을 소개합니다.
1. div 클릭 시, URL 링크 이동
div의 onclick
에 아래와 같은 방법 중 하나를 사용하면, div 클릭 시 입력한 <URL>
로 이동합니다.
onclick='location.href = "<URL>"'
onclick='window.open("<URL>");'
아래 예제와 같이 구현할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div onclick='location.href = "https://codechacha.com"'>
<p>Hello, HTML</p>
</div>
</body>
</html>
2. Hover 시, 마우스 커서 표시
마우스를 div 위에 올려두었을 때, 손가락 모양의 마우스 커서가 보이도록 하려면 아래와 같이 style을 설정하면 됩니다.
style="cursor: pointer;"
아래 예제와 같이 구현할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div style="cursor: pointer;" onclick='location.href = "https://codechacha.com"'>
<p>Hello, HTML</p>
</div>
</body>
</html>
Loading script...
Related Posts
- Javascript - 버튼 활성화/비활성화 시키는 방법
- Javascript - 버튼 이름 변경하기
- Javascript - div 안의 내용 가져오기, 변경, 추가, 삭제
- Javascript - <ol>, <ul>에 <li> 동적 추가, 삭제
- Javascript - div 생성, 추가, 삭제 방법
- Javascript - 테이블 행(tr) 숨기기, 보이기
- Javascript - div에 링크 거는 방법
- Javascript - 자식 요소(element) 개수 확인
- Javascript - 요소(element) 복사, 붙여넣기
- Javascript - div에 클릭 이벤트(onclick) 설정 방법
- Javascript - 체크박스 선택/해제 시, 텍스트박스 활성화/비활성화
- Javascript - input 숫자만 입력받도록 설정
- Javascript - 자식 노드 모두 제거
- Javascript - 체크박스 선택, 해제 방법
- Javascript - input text 값 가져오기
- div 영역에 URL 링크 걸기
- JavaScript - 한번만 실행되는 함수 (once: true)
- JavaScript - 선택된 checkbox 값 가져오기
- JavaScript - element(버튼, div) 보이기 숨기기
- JavaScript - div, 태그 안의 내용 가져오기
- JavaScript - 부모, 형제, 자식 element 찾기
- JavaScript - 클래스 이름으로 element 찾는 방법