이미지가 포함된 전체 HTML Div에 대한 클릭 가능한 링크를 만드는 방법은 무엇입니까?
- Linda Hamilton원래의
- 2024-11-01 00:37:02182검색
전체 HTML Div에 대한 앵커 링크를 만드는 방법
HTML/CSS에서는 다양한 접근 방식을 통해 전체 div 요소에 대한 링크를 만들 수 있습니다. 쿼리에 지정된 요구 사항은 상위 div 내에서 세로 중앙에 있는 이미지가 포함된 div에 대한 링크를 만드는 것입니다. 중첩된 div 및 인라인 스타일과 관련된 초기 솔루션은 실행 가능해 보일 수 있지만 유효한 HTML 코딩 표준과 충돌합니다.
문제를 해결하기 위해 사용할 수 있는 여러 옵션이 있습니다.
1. 앵커 태그 내에서 인라인 블록 요소 사용
`
<br><a href="https://www.php.cn/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9" rel="nofollow" target="_blank"></a></p>
<pre class="brush:php;toolbar:false"><span style="display: inline-block; height: 235px; width: 184px; border: 2px solid black; text-align: center;">
<img src="myimage.jpg" height="62" width="180">
</span>
`
이 방법을 사용하면 이미지가 이제 앵커 태그 내에 포함된 인라인 블록 요소인 상위 div 내에서 수직 중앙에 유지됩니다.
2. 클릭 처리를 위해 JavaScript 사용
`
<br><div id="parentdivimage" style="cursor: 포인터;" onclick="window.location='https://www.php.cn/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9';"></p>
<pre class="brush:php;toolbar:false"><div id="childdivimage" style="position: absolute; top: 50%; height: 62px; margin-top: -31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
`
이 솔루션에서는 상위 div가 마우스 클릭에 반응하는 블록 수준 요소로 변환됩니다. 클릭 시 자바스크립트를 활용하여 브라우저를 원하는 URL로 리디렉션합니다.
3. 스타일 '커서: 포인터' 및 앵커 태그와 함께 DIV 사용
`
<br><div style="cursor:pointer;"></p>
<pre class="brush:php;toolbar:false"><a href="https://www.php.cn/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9">
<div style="height: 235px; width: 184px; border: 2px solid black; text-align: center;">
<img src="myimage.jpg" height="62" width="180">
</div>
</a>
< ;/div>
`
이 접근 방식에서는 커서 포인터 스타일이 제공되는 앵커 태그 주위에 두 번째 div가 도입됩니다. 시각적으로는 인라인 블록 방식과 유사하게 작동하지만 링크를 처리하기 위해 앵커 태그를 사용합니다.
위 내용은 이미지가 포함된 전체 HTML Div에 대한 클릭 가능한 링크를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.