브레이크 아웃 버튼

Andy는 Semantic HTML을 사용하여 클릭 가능한 카드 구성 요소를 작성하는 영리한 방법을 보여줍니다. 이 기술에는 카드 내의 버튼이 포함되지만 전체 카드는 클릭 가능한 영역 역할을합니다. 이것은 버튼의 경계를 넘어 전체 카드를 다루는 의사 요소를 사용하여 달성됩니다. 단점은 텍스트가 오버레이되는 의사 요소로 인해 텍스트 선택이 약간 손상됩니다. 그러나 Andy는이 접근법이 전체 카드를 만드는 것보다 우수하다고 주장합니다.<a></a> 요소는 의미를 손상시키고 잠재적으로 보조 기술에 중요한 문제를 야기 할 수 있으므로 요소.

사용할 때도 동일한 원칙이 적용됩니다<a></a> 버튼 대신 링크. 그러나 이러한 경우 링크에 전체 영역을 감싸는 것은 일반적으로 더 간단하며 버튼과 같은 부분이<span></span> 또는 시각적 일관성을위한 유사한 요소.

이 기술은 중첩 된 링크와 유사한 일반적인 문제를 다룹니다. 다른 독립적 인 연결된 영역을 포함하는 큰 링크 블록입니다. 중첩 앵커 링크가 문제가됩니다. Sara Soueidan의 우아한 솔루션에는 카드 내부에 절대적으로 위치 된 "커버링"링크를 배치하여 전체 클릭 가능 영역을 포함하여 z-index 사용하여 카드 내의 다른 링크를 상단에 겹칠 수 있습니다.

Sara Soueidan의 솔루션을 보여주는 코드 펜을 참조 할 수 있습니다.

위 내용은 브레이크 아웃 버튼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!