DIV를 클릭 가능한 링크로 만드는 방법(XHTML 호환)

사용자는 클릭 가능한 링크를 우아한 디자인 요소 내에 통합해야 하는 어려움에 직면하는 경우가 많습니다. 콘텐츠의 미적 무결성을 손상시키지 않으면서 DIV 블록과 같습니다. 표준 HTML 마크업은 DIV 내 앵커 태그(A)의 직접 중첩을 제한하므로 이러한 링크를 생성하는 데 어려움이 있습니다. 그러나 XHTML 1.1 사양을 준수하는 솔루션이 존재합니다.

이 기술에는 유효한 HTML 및 CSS 규칙을 사용하여 DIV 블록을 신중하게 구성하는 작업이 포함됩니다. DIV 내에 빈 범위 태그를 배치하여 전체 DIV 영역을 덮는 투명한 오버레이 역할을 해야 합니다. 그런 다음 이 범위 태그는 DIV 내에서 전체를 포괄하는 절대 위치를 정의하는 CSS 속성으로 스타일이 지정됩니다. 앵커 태그 내에 상주하므로 전체 DIV 블록이 클릭 가능한 링크로 작동할 수 있습니다.

투명 범위 오버레이의 원활한 기능을 보장하려면 높은 Z-색인을 할당하면 모든 블록 위에 배치됩니다. DIV 내의 콘텐츠입니다. 또한 범위에 배경 이미지(예: 빈 GIF)를 추가하면 IE7/8과 같은 이전 브라우저에서 잠재적인 중복 문제가 해결됩니다.

이 기술을 사용하면 개발자는 변경 없이 DIV 블록을 클릭 가능한 링크로 원활하게 변환할 수 있습니다. 그들의 시각적 콘텐츠. 중요한 것은 이 방법이 XHTML 1.1 사양을 준수하므로 다양한 웹 개발 프로젝트에 적합하다는 점입니다.