링크 클릭 가능 영역 늘리기 - HTML/CSS
자막 뿐만 아니라 사진에도 링크를 걸어야 합니다.
세 가지 방법이 있습니다: 좋은 것, 나쁜 것, 추한 것.
나쁜
제목과 그림을 모두 링크로 묶으십시오.
<div>
<a href="#">
<img src="image.jpg">
</a>
<h2>
<a href="#">text</a>
</h2>
</div>
못난이
모든 것을 하나의 링크로 묶습니다.
<a href="#">
<img src="image.jpg">
<h2>
text
</h2>
</a>
더 굿
헤더에 링크를 배치합니다.
:before
의사 요소를 사용하여 링크 영역을 전체 카드로 확장합니다.<div>
<img src="image.jpg">
<h2>
<a href="#">text</a>
</h2>
</div>
<style type="text/css">
div {
position: relative;
}
a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
물론 과장해서 이 세 가지 옵션 중 하나를 사용할 수 있지만 제 조언은 마지막 옵션을 사용하는 것입니다 :)
Reference
이 문제에 관하여(링크 클릭 가능 영역 늘리기 - HTML/CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vadimfilimonov/increase-link-clickability-area-htmlcss-20j6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)