링크 중첩 방법
HTML Standard ; 4.5.1 : The a element
Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified.
If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.
If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.
The target, download, ping, rel, hreflang, type, and referrerpolicy attributes must be omitted if the href attribute is not present.
If the itemprop attribute is specified on an a element, then the href attribute must also be specified.
잘못된 코드의 예:
<a href="#link1" class="movie-card">
<h1>Movie Title</h1>
<p>Movie description...</p>
<ul class="list">
<li>
<a href="#link2">Link n°2</a>
</li>
<li>
<a href="#link2">Link n°2</a>
</li>
<li>
<a href="#link2">Link n°2</a>
</li>
</ul>
</a>
따라서 모든 브라우저에서 실행 가능한 솔루션을 우회하고 제공할 수 있는 작은 트릭을 제안합니다.
absolute
및 relative
속성을 사용하여 전체 공간을 차지하는 클릭 가능한 요소를 표시합니다.유효한 코드:
<a href="#my-link">
Title
<span aria-hidden="true" class="p-absolute">
</a>
<style>
.p-absolute {
position: absolute;
inset: 0;
}
</style>
이전 코드를 사용하면 다음이 제공됩니다.
HTML
<article class="movie">
<h1>
<a href="#lien1">
Movie Title
<span aria-hidden="true" class="p-absolute"></span>
</a>
</h1>
<p>Movie description...</p>
<ul class="list">
<li>
<a href="#link-2">Link n°2</a>
</li>
<li>
<a href="#link-2">Link n°2</a>
</li>
<li>
<a href="#link-2">Link n°2</a>
</li>
</ul>
</a>
CSS
.movie {
position: relative;
}
.p-absolute {
position: absolute;
inset: 0;
}
.list a {
position: relative;
}
내부 링크의 경우
<span>
기술을 사용할 수도 있지만 HTML 구조를 복잡하게 만들지 않으려면 여기에서 상대 위치로 충분합니다. ::before
대신 의사 요소 ::after
또는 <span>
를 사용할 수도 있습니다.즐기세요 =)
Reference
이 문제에 관하여(링크 중첩 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/machou/how-to-nest-links-47jn텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)