티스토리 뷰

1. 마우스오버 / 마우스아웃

 

 

 

<tr onmouseover="this.style.background='#f1f6ea'" onmouseout="this.style.background='white'" style="cursor: pointer;" onclick="location.href='noticeview.do'">

 

- 나는 이렇게 tr 전체에다가 onmouseover 와 onmouseout 값을 넣어서, tr의 어느곳이든지 마우스를 가져다대도 클릭가능하여 페이지이동하게 만들었다.

- style로 커서이미지도 마우스모양 -> 손가락모양으로 변하도록 지정해주었다.

- mouseover 색은 은은한 그린색, mouseout하면 다시 흰색으로 돌아오게 하였다.

 

 

 

 

2. 첨부파일 다운로드 버튼 만들기

 

- 고캠핑의 공지사항 디자인을 벤치마킹 하였다.

 

<div class="p-3 bg-gray-100 bg-opacity-10 border border-gray border-start-0 border-end-0">
  <strong>첨부파일</strong> &nbsp;&nbsp;<a href="./resources/bootstrap-5/html/img/photo/어바웃4.jpg" download><i class="fa-solid fa-file-circle-plus"></i> 2022_야영장업사업자안전교육_최종본.pdf [5606298 byte]</a>
</div>

 

- 폰트어썸 아이콘도 넣어주었다.

 

 

'FINAL PROJECT' 카테고리의 다른 글

[성공]고캠핑 api - xml 파싱  (0) 2022.08.09
html button  (0) 2022.08.04
로그인하면 -> 로그아웃 버튼으로 만들기  (0) 2022.08.04
[html] 웹폰트 적용하기  (0) 2022.07.26
SEQUENCE DIAGRAM  (0) 2022.07.23
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함