| CMS/프레임워크 | Rhymix 1.9 |
|---|---|
| 개발 언어 | PHP 7.3 |
위젯에서 게시글 제목을 정확히 눌러야 글로 들어가지는데
해당 li 영역을 눌러도 게시글에 들어갈수 있게 하고싶습니다
소스
<li>
<span class="list_main">
<a class="list_title" href="글주소">글제목</a>
<a class="pt_col list_cmt" href="댓글주소">댓글갯수</a>
<span class="list_icon new">N</span>
</span>
<span class="list_info">
<span class="list_date">2시간 전</span>
</span>
</li>
이런상황이고 PC와 모바일둘다 같은 위젯을 쓰는 상황으로
CSS로 a링크 영역을 수정하는게 최선인거같은데
질문은 저 게시판 제목 영역을 모양세는 유지하면서 터치영역만 li 영역처럼 수정할 수 있을까요?
스포
Lv. 5
![질문.PNG [File Size:6.8KB/Download:3]](/files/download/link/1216658/b90c3ef17274d8b3c1578228e93c6968/%EC%A7%88%EB%AC%B8.PNG){kind=link}
![질문2.PNG [File Size:3.1KB/Download:3]](/files/download/link/1216659/74e98211821d53e0e37a46c8a59ffcc9/%EC%A7%88%EB%AC%B82.PNG){kind=link}
댓글 9
따라서 해당 속성을 변경해줄 필요가 있어요.
a { display:block; width:가로; height:세로; }
이런식으로 수정해보세요 (진짜 저렇게 적으라는게 아니라 a는 클래스 이름 지정해주는거 아시죠?)
그리고 li에 있는 가로 세로 속성은 제거하시면되요
답변 감사합니다 다만 한가지 문제가 있습니다
위 글처럼 A링크가 list_title pt_col list_cmt (글제목, 댓글수) 이렇게 두개라서 글제목에 속성을 넣으면 아래처럼 나옵니다
그 태그 하나하나 답변자가 알 수 있는게 아니라 그냥 답변이 어려울거같아요.
display:block 를 block-> inline-block 으로 속성을 바꿔보세요
<a class="어쩌고 저쩌고" href="글주소">
<span class="list_main">
<span class="list_title">글제목</span>
<span class="pt_col list_cmt">댓글갯수</span>
<span class="list_icon new">N</span>
</span>
<span class="list_info">
<span class="list_date">2시간 전</span>
</span>
</a>
</li>
li {position:relative;}
a {display:block; width:100%; height:100%; }
간단하게는 이런식으로 처리하고, 여기부터 디테일 잡아가는 방법이 있을 것 같네요..
(a 태그 따로 만들기...)
만약 태그를 놔두고, css만 가지고 처리하려면, 실제로 소스 뜯어가며 해봐야할 것 같아요.
html5 부터는 a 링크가 block 계열 테그를 감싸는게 인정되고 있습니다.
그리고 a링크 안에 a링크는 논리적이지 않기에 전체를 감싸는 a링크 안에 다른 a링크가 들어가면 안되고요.
딱 위에 적은분처럼 처리하시며 됩니다.
단순히 li 태그 영역 클릭시 패이지를 이동시키려면
<li onclick="location.href='주소'">
</li>
li 태그에 onclick 속성을 추가해주면 됩니다.
다만, 이 경우네는 마우스 커서가 변하지 않으므로 css에서 cursor: pointer 를 추가해주면 됩니다.