스크롤 압박이 심할때 맨위로 이동 시킬수 있는 버튼 만들기 material+css

thum

스크롤 압박이 심할 때 맨위로 이동할 수 있는 버튼 만들기

아래로 스크롤하면 버튼이 나타납니다.

↑




※ 이 사이트의 모든 포스팅은 협찬 및 유료광고를 포함하고 있지 않습니다. ※개인 취향에 따른 리뷰이니, 부디 참고만 하시길!


daily-inklings 전체 글 보기

이글은 에 최종으로 업데이트된 글입니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

웹 성능 최적화를 위한 Image Lazy Loading 기법

이미지
Image Lazy Loading은 페이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩을 할 수 있도록 하는 테크닉입니다. 웹 페이지 내에서 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것이라 볼 수 있습니다. 이 방식은 웹 성능과 디바이스 내 리소스 활용도 증가, 그리고 연관된 비용을 줄이는데 도움을 줄 수 있습니다. 영어 단어 중 'lazy'는 '가능한 길게 일을 미루는 행위' 란 의미에 기반합니다. <img src="…" loading="lazy" alt="…" width="200" height="200"> <img src="…" loading="lazy" alt="…" style="height:200px; width:200px;"> loading="lazy"
Read more »

블로그스팟 위젯 항상 펼치기 코딩 소스

이미지
블로그스팟 위젯 항상 펼쳐지기 개인적으로 위젯 중 라벨(태그) 부분은 항상 펴기로 설정하는 것을 선호합니다. 라벨(태그) 가젯 항상 펼치기 HTML 편집 모드에서 다음 코드를 찾아봅니다. 현재 라벨 가젯이 하나라면 2곳을 찾을 수 있습니다. 코드 수정 전 <b:attr cond='data:view.isLabelSearch' name='open' value='open'/> 코드 수정 후 <b:attr name='open' value='open'/> 확인 사항 (2020.08.04) 'Blogger > 테마 > HTML 편집'을 통해 직접 코드를 수정하기 전에 반드시 'Blogger > 테마 > 백업' 기능을 이용하여 XML 파일을 사전 다운로드하세요. 변경 후에는 다시 다운로드하여 의도한 부분만 수정되었는지 비교해보세요. 추가 설명 앞서 찾은 두 곳의 코드 중 하나는 <head> 안에 있으며, 기본 라벨 가젯 속성을 정의하여 앞으로 추가하는 라벨 가젯에도 영향을 줍니다. 다른 하나는 <body> 내부에 있으며, 현재 존재하는 라벨 가젯의 속성을 설정합니다. 위 수정 작업을 완료하고 '저장' 버튼을 누르면 현재 라벨 가젯과 앞으로 추가하는 라벨 가젯 모두 항상 펼쳐진 상태로 유지됩니다.
Read more »