HTML 태그 중 링크 이동은 <a>로 가능합니다.

자바스크립트(javascript) onclick 이벤트를 활용하시면 다른 태그에도 적용할 수 있습니다.

해당 사이트에서 썸네일 안에 위치한 텍스트 영역을 클릭해야만 글이나 페이지로 이동하는 건

<a> 태그가 썸네일 안에 위치한 텍스트 영역 쪽에 적용되어 있기 때문입니다.

샘플 사이트에서 썸네일 어느 영역을 클릭하여도 해당 글로 이동하는 건

썸네일을 표시하는 코드 밖에서 <a> 태그가 적용되어 있기 때문입니다.

아래 예제 코드를 비교해서 확인해보시면 이해가 되실 듯합니다.

<div style="height: 300px; background-color: black;">
	<a href="https://www.cosmosfarm.com/" style="color: white;" target="_blank">코스모스팜</a>
</div>

<a href="https://www.cosmosfarm.com/" style="color: red;" target="_blank">
	<div style="height: 300px; background-color: blue;">코스모스팜</div>
</a>

첫 번째 코드는 영역 안에 글씨를 클릭했을 때 페이지 이동이 가능하며

두 번째 코드는 영역 어느 곳을 클릭해도 페이지 이동이 가능합니다.

display 속성을 비교해서 확인해보시면 이해가 되실 듯합니다.

<div> 태그는 기본적으로 display 속성이 block으로 설정되어 있고

<a> 태그는 기본적으로 display 속성이 inline으로 설정되어 있습니다.

아래 관련 링크를 참고해보시겠어요?

https://ruden91.github.io/blog/inline-vs-block-vs-inline-block/

고맙습니다.