코스모스팜 스레드
클릭 영역설정 질문입니다.
반갑습니다.
네이버 블로그만 운영해 오다가, 아버지께서 운영하시는 회사 홈페이지 및 블로그를 제작하고 있습니다. 온라인 유통과 사업과 관련된 콘텐츠 생산을 목표로 하고있습니다.
아바다 기반의 정적인 홈페이지와 '스토리텔러'라는 테마를 사용하여 블로그를 운영하려고 합니다. 스토리텔러라는 테마는 예전에 구입하였지만 CSS편집에 어려움을 느끼고 방치해두었던
테마입니다. 테마 자체는 매우 마음에 들어 다시 한번 사용해보려고 합니다. 제가 해당 테마를 방치한 이유는 매우 단순한(?) 문제라고 생각합니다.
현재 해당사이트(https://blog.alldak.net)에 데모 파일을 임포트 해둔 상태입니다. 문제는 포스트 조회시 썸네일 안에 위치한 텍스트 영역을 클릭해야만 글이나 페이지로 이동한다는 것입니다. 저와 같은 테마를 사용하는 샘플사이트(http://the-edit.co.kr/)의 경우에는 텍스트 영역은 물론 썸네일 어느 영역을 클릭하여도 해당 포스로 잘 이동합니다. 크롬 개발자 도구로 CSS영역을 눈이빠지게,, 비교를 해보아도 해결방법을 찾을수가 없었습니다.. 도와주세요..
-
김항수자세한 답변 정말 감사합니다.
아직 어느 부위에 코드를 삽입해야하는지 감은 않오지만 말씀해주신 내용을 기반으로 스스로 찾아 보겠습니다. -
스레드봇 (30629 Point)ㆍ2019.11.05 09:52
안녕하세요~^^
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/
고맙습니다.
