이미지가 포함된 전체 HTML Div에 대한 클릭 가능한 링크를 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

Linda Hamilton

Nov 01, 2024 am 12:37 AM

How to Create a Clickable Link for an Entire HTML Div Containing an Image?

전체 HTML Div에 대한 앵커 링크를 만드는 방법

HTML/CSS에서는 다양한 접근 방식을 통해 전체 div 요소에 대한 링크를 만들 수 있습니다. 쿼리에 지정된 요구 사항은 상위 div 내에서 세로 중앙에 있는 이미지가 포함된 div에 대한 링크를 만드는 것입니다. 중첩된 div 및 인라인 스타일과 관련된 초기 솔루션은 실행 가능해 보일 수 있지만 유효한 HTML 코딩 표준과 충돌합니다.

문제를 해결하기 위해 사용할 수 있는 여러 옵션이 있습니다.

1. 앵커 태그 내에서 인라인 블록 요소 사용

<br><a href="https://www.php.cn/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9" rel="nofollow" target="_blank"><pre class="brush:php;toolbar:false"><span style="display: inline-block; height: 235px; width: 184px; border: 2px solid black; text-align: center;">
    <img  src="/static/imghwm/default1.png" data-src="myimage.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="이미지가 포함된 전체 HTML Div에 대한 클릭 가능한 링크를 만드는 방법은 무엇입니까?" >
</span>

이 방법을 사용하면 이미지가 이제 앵커 태그 내에 포함된 인라인 블록 요소인 상위 div 내에서 수직 중앙에 유지됩니다.

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

<br><div id="parentdivimage" style="cursor: 포인터;" onclick="window.location='https://www.php.cn/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9';">
<pre class="brush:php;toolbar:false"><div id="childdivimage" style="position: absolute; top: 50%; height: 62px; margin-top: -31px;">
    <img  src="/static/imghwm/default1.png" data-src="myimage.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="이미지가 포함된 전체 HTML Div에 대한 클릭 가능한 링크를 만드는 방법은 무엇입니까?" >
</div>

이 솔루션에서는 상위 div가 마우스 클릭에 반응하는 블록 수준 요소로 변환됩니다. 클릭 시 자바스크립트를 활용하여 브라우저를 원하는 URL로 리디렉션합니다.

3. 스타일 '커서: 포인터' 및 앵커 태그와 함께 DIV 사용

<br><div style="cursor:pointer;">
<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="/static/imghwm/default1.png" data-src="myimage.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="이미지가 포함된 전체 HTML Div에 대한 클릭 가능한 링크를 만드는 방법은 무엇입니까?" >
    </div>
</a>

< ;/div>
`

이 접근 방식에서는 커서 포인터 스타일이 제공되는 앵커 태그 주위에 두 번째 div가 도입됩니다. 시각적으로는 인라인 블록 방식과 유사하게 작동하지만 링크를 처리하기 위해 앵커 태그를 사용합니다.

위 내용은 이미지가 포함된 전체 HTML Div에 대한 클릭 가능한 링크를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

스크린 독자를 탈취시킵니다. 액세스 가능한 양식 및 모범 사례Mar 08, 2025 am 09:45 AM

이것은 우리가 양식 접근성에 대해 한 작은 시리즈의 세 번째 게시물입니다. 두 번째 게시물을 놓친 경우 "사용자 초점 관리 : Focus-Visible"을 확인하십시오. ~ 안에

WordPress 블록 및 요소에 상자 그림자를 추가합니다Mar 09, 2025 pm 12:53 PM

CSS Box-Shadow 및 개요 속성은 주제를 얻었습니다. 실제 테마에서 어떻게 작동하는지에 대한 몇 가지 예와 이러한 스타일을 WordPress 블록 및 요소에 적용 해야하는 옵션을 보자.

GraphQL 캐싱 작업Mar 19, 2025 am 09:36 AM

최근에 GraphQL 작업을 시작했거나 장단점을 검토 한 경우 "GraphQL이 캐싱을 지원하지 않음"또는

첫 번째 맞춤형 전환을 만듭니다Mar 15, 2025 am 11:08 AM

Svelte Transition API는 맞춤형 전환을 포함하여 문서를 입력하거나 떠날 때 구성 요소를 애니메이션하는 방법을 제공합니다.

고급스럽고 멋진 커스텀 CSS 스크롤 바 : 쇼케이스Mar 10, 2025 am 11:37 AM

이 기사에서 우리는 스크롤 바의 세계로 뛰어들 것입니다. 너무 화려하게 들리지는 않지만 잘 설계된 페이지가 손을 잡고 있습니다.

쇼, 말하지 마십시오Mar 16, 2025 am 11:49 AM

웹 사이트의 컨텐츠 프레젠테이션을 설계하는 데 얼마나 많은 시간을 소비합니까? 새 블로그 게시물을 작성하거나 새 페이지를 만들 때

NPM 명령은 무엇입니까?Mar 15, 2025 am 11:36 AM

NPM 명령은 서버 시작 또는 컴파일 코드와 같은 것들에 대한 일회성 또는 지속적으로 실행되는 프로세스로 다양한 작업을 실행합니다.

Redwood.js 및 동물 군을 사용하여 이더 리움 앱 구축Mar 28, 2025 am 09:18 AM

최근 Bitcoin의 가격이 20k 달러가 넘는 USD가 최근에 등반되면서 최근 30k를 끊었으므로 Ethereum을 만드는 데 깊이 다이빙을 할 가치가 있다고 생각했습니다.

See all articles

핫 AI 도구

뜨거운 도구

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.