div 영역에 URL 링크 걸기

html

<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...
codechachaCopyright ©2019 codechacha