HTML/CSS에서는 다양한 접근 방식을 통해 전체 div 요소에 대한 링크를 만들 수 있습니다. 쿼리에 지정된 요구 사항은 상위 div 내에서 세로 중앙에 있는 이미지가 포함된 div에 대한 링크를 만드는 것입니다. 중첩된 div 및 인라인 스타일과 관련된 초기 솔루션은 실행 가능해 보일 수 있지만 유효한 HTML 코딩 표준과 충돌합니다.
문제를 해결하기 위해 사용할 수 있는 여러 옵션이 있습니다.
`
<br><a href="//m.sbmmt.com/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9" rel="nofollow" target="_blank"></a></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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 내에서 수직 중앙에 유지됩니다.
`
<br><div id="parentdivimage" style="cursor: 포인터;" onclick="window.location='//m.sbmmt.com/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9';"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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로 리디렉션합니다.
`
<br><div style="cursor:pointer;"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><a href="//m.sbmmt.com/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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
