링크 클릭 가능 영역 늘리기 - 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>


물론 과장해서 이 세 가지 옵션 중 하나를 사용할 수 있지만 제 조언은 마지막 옵션을 사용하는 것입니다 :)

좋은 웹페이지 즐겨찾기