조회 수 2681 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 인쇄 첨부

DIV 영역 그 자체에 링크를 걸어서 DIV 영역을 클릭하면, 지정된 주소(URL)로 이동하도록 하려면 아래와 같이 스타일(style) 속성으로 지정해 주면 된다.

[DIV 영역 자체에 링크 걸기]

<div style=" cursor: pointer;" onclick="location.href='목적지 링크주소(URL)';">
내용........ 
</div>


[실제 예제]

<div style=" background-color: gold; padding:10px; width: 300px; height: auto; cursor: pointer;" onclick="location.href='http://moonhouse.co.kr';">
이 곳은 DIV 영역이며, 영역 자체에 링크를 걸었다. DIV 영역을 클릭하면 지정된 주소로 이동한다. 
</div>

이 곳은 DIV 영역이며, 영역 자체에 링크를 걸었다. DIV 영역을 클릭하면 지정된 주소로 이동한다. 

 

p.s

1. 현재페이지에 부를때
onclick="location.href='목적지 링크주소(URL)'"

2. 새 창에 열때
onclick="window.open('목적지 링크주소(URL)')"
 

[활용방법]

- 모바일에서 제목부분만 Url을 주면 손가락으로 터치하기가 쉽지 않습니다.

그런 경우 위의 코드를 주면 글 전체 부분이 클릭되므로 편리합니다.

참고로 세부 Url도 작동을 합니다.

"Borad Html"부분을 세밀하게 터치하면 해당 Url로 이동가능합니다. 

img_1.jpg

    댓글이 하나도 없네요ㅠㅠ
    자료가 도움이 되었다면 댓글과 평가 부탁합니다.
?

Html Tips

홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다

List of Articles
번호 제목 글쓴이 날짜 조회 수
58 웹퍼블리셔가 알고있어야 할 display:table 속성 file 팔공산 2020.02.20 35
57 HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때 팔공산 2019.03.01 608
56 CSS 말줄임 처리하기 file 팔공산 2018.11.13 651
55 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법 팔공산 2018.09.26 1793
» DIV 영역 자체에 링크 거는 방법 file 팔공산 2018.09.23 2681
53 DIV 화면 정중앙에 박스 배치하기 file 팔공산 2018.09.19 397
52 DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; ) file 팔공산 2018.09.19 684
51 커서(cursor) 모양 정리 file 팔공산 2018.07.19 205
50 webkit-animation 적용 방법 file 팔공산 2018.01.31 363
49 각종 css3를 자동으로 만들어주는 사이트 팔공산 2017.11.07 619
48 html에 사용되는 Character Entities(특수기호) file 팔공산 2017.11.04 1080
47 이미지 마우스 hover시 좌우 기울이기 file 팔공산 2017.10.27 371
46 모바일웹에서 스마트폰으로 전화바로연결 코드 file 팔공산 2017.06.16 1813
45 반응형 CSS 테이블 file 팔공산 2017.06.13 892
44 실시간 환율조회 html file 팔공산 2017.04.18 1044
43 HTML 만으로 마우스오버 구현하는 방법 1 file 팔공산 2017.01.07 6711
42 <div> 와 같은 블록 요소를 가운데 정렬하는 방법 팔공산 2016.12.26 2812
41 float 속성을 가진 div 100% 설정하는 방법 file 팔공산 2016.04.21 555
40 배경이미지 슬라이드 스크립트 팔공산 2016.04.19 1557
39 CSS3 border-radius 이해하기 file 팔공산 2016.04.07 416
목록
Board Pagination Prev 1 2 3 Next
/ 3