DIV 영역에 링크 걸기
DIV 영역 그 자체에 링크를 걸어 DIV 영역을 클릭 시, 지정된 주소(URL)로 이동하도록 하려면 아래와 onclick 속성을 추가해주면 됩니다. onclick="location.href='이동할 링크주소 입력'" 의 형태로 속성을 추가합니다.
<div onclick="location.href='이동할 링크주소(URL)';">
내용 위치(택스트, 이미지, 태그 등)
</div>
새 창에서 이동할 링크 주소를 열고 싶다면, 아래 예시와 같이 onclick="window.open('이동할 링크 주소 입력')" 속성을 추가합니다.
<div onclick="window.open('이동할 링크주소(URL)');">
내용 위치(택스트, 이미지, 태그 등)
</div>
손가락 모양의 마우스 커서 표시
위처럼 이동할 주소를 링크로 설정한 뒤 div 영역 부분에 마우스 커서를 올리면 손가락 표시를 하고 싶다면 style 속성을 추가하면 됩니다. 아래 예시와 같이 style=" cursor: pointer;" 속성을 추가합니다.
<div style=" cursor: pointer;" onclick="window.open('이동할 링크주소(URL)');">
내용 위치(택스트, 이미지, 태그 등)
</div>
pointer 뿐만 아니라, 다른 cursor 타입을 지정할수 있으며, 아래 목록에서 다양한 종류의 cursor 타입을 확인할수있습니다.
- auto
- crosshair
- default
- pointer
- move
- e-resize
- ne-resize
- nw-resize
- n-resize
- se-resize
- sw-resize
- s-resize
- w-resize
- text
- wait
- help
아래에서 마우스를 올려 각각의 타입별 마우스 커서 모양을 확인할 수 있습니다.
|
Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
반응형
댓글