mouseover / mouseout / file download 버튼

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>

 

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