어제 오늘 내일

[HTML/Javascript] div에 링크 걸기 본문

IT/Javascript

[HTML/Javascript] div에 링크 걸기

hi.anna 2022. 2. 27. 06:48

 

 

지난번에는

div에 onclick 이벤트를 거는 방법,

그리고, div에 마우스 오버되었을 때 마우스 커서를 손가락 모양으로 변경하는 방법을 알아보았습니다.

 

[Javascript/HTML] div에 클릭 이벤트(onclick) 넣는 2가지 방법

 

[Javascript/HTML] div에 클릭 이벤트(onclick) 넣는 2가지 방법

는 원래 사용자가 클릭할 수 없는 객체입니다. 사용자가 div를 클릭하게 하려면, div에 onclick 이벤트를 걸어주어야 합니다. 여기서는 div에 onclick 이벤트를 거는 2가지 방법을 정리해 보았습니다. 1.

hianna.tistory.com

 

[HTML/CSS] div에 마우스 오버시 손가락 아이콘 나타내기

 

[HTML/CSS] div에 마우스 오버시 손가락 아이콘 나타내기

에 마우스를 가져갔을 때, 클릭 할 수 있음을 나타내는 손가락 아이콘을 보여주는 방법입니다. cursor : pointer .my-div { width : 200px; height : 200px; background-color : blue; cursor : pointer; } cursor..

hianna.tistory.com

 

이번에는 div에 URL 링크를 연결하여,

div를 클릭했을 때 웹페이지로 이동하는 방법을 정리해보도록 하겠습니다.

 

 

<div 
     onclick='window.location.href = "https://www.google.com"' 
     class='blue-div' >
</div>
.blue-div {
  width : 150px;
  height : 150px;
  background-color : blue;
  cursor: pointer;
}

 

 

onclick 속성에

window.location.href 값을 지정해 주어

div를 클릭했을 때, 링크 페이지로 이동할 수 있도록 하였습니다.

 

 

*** 위 예제에서 링크 페이지로 잘 이동이 되지 않을 경우

아래의 코드를 저장하여 local에서 실행해 보세요.

<html>
	<head>
		<style>
			.blue-div {
				width : 150px;
				height : 150px;
				background-color : blue;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div 
			onclick='window.location.href = "http://hianna.tistory.com"' 
			class='blue-div' >
		</div>
	</body>
</html>

 

 

​

div에 링크를 추가하는 방법을 알아보았습니다.

 

 

반응형

'IT > Javascript' 카테고리의 다른 글

[Javascript] 함수 반복적으로 실행하기, 종료하기 (setInterval(), clearInterval())  (0) 2022.03.06
[Javascript] 객체(object) 내용 출력하기 [object Object]  (1) 2022.03.05
[Javascript/HTML] div에 클릭 이벤트(onclick) 넣는 2가지 방법  (2) 2022.02.26
[Javascript] DOM의 style(css) 변경하기, 읽기 (style, getComputedStyle())  (0) 2021.11.22
[Javascript] 주석(Comment) 다는 2가지 방법  (0) 2021.11.20
공유하기 링크
'IT/Javascript' Related Articles more
Comments