이미지가 포함된 전체 HTML Div에 대한 클릭 가능한 링크를 만드는 방법은 무엇입니까?

전체 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>
<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 내에서 수직 중앙에 유지됩니다.

2. 클릭 처리를 위해 JavaScript 사용

`

<br><div id="parentdivimage" style="cursor: 포인터;" onclick="window.location='https://www.php.cn/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>

로그인 후 복사