반응형 log.20 티스토리 게시물 상단에 읽기 진행도 표시하기 - 상단 프로그레스바로 완성! 게시물 로딩바 보기 1. HTML1.1. 태그내 최상단에 div 코드 추가 1.2. 태그내 최하단에 script 코드 추가여기서 '#content' 부분이 게시물 시작되는 부분의 태그인데요.태그명이 다를 수 있으니 본인의 블로그에서 게시물이 시작되는 div의 id가 무엇인지관리자도구-검사로 체크해서 해당하는 div id를 작성해주세요.저는 게시물이 시작하는 부분의 태그아이디가 content여서 '#content'라고 설정하였습니다.2. CSSCSS 최하단에 코드추가/* content progress-bar */.scroll-bar { position: fixed; top: 0; z-index: 9999; width: 100%;}.progress-container { width:.. 2024. 12. 9. 내가보려고 적어두는 이미지변환 유용한 사이트들 1. 다양한 이미지 작업https://www.iloveimg.com/ko/download/7fk4lvw63vggnkxdqnAnAncpswnr2lhmtqv3rskjqhc1Az4829k8f7s9zpddg6c68l77pcztmqp05851mhAp2rksmrd76fgpnf7s53ypmg1g00vnzpm6ckmqs10njAA94kz2rgns2w4939m8yv68fggb1Ap2010lg5hm6x7Ayjw53dpv3xw1/26 파일 다운로드 | iLoveIMGiLoveIMG로 작업 완료한 파일을 다운로드하고 링크를 공유하세요.www.iloveimg.com 2. 동영상 -> gifhttps://www.veed.io/ko-KR/convert/gif-converter Online GIF Converter - Conver.. 2024. 12. 9. 티스토리 자동목차 설정으로 쉽게조회수 늘리기 - 스크롤 따라 움직이는 반응형 목차(TOC) 만들기 SEO, 자동목차를 설정해야 하는 이유티스토리 게시물에 목차가 생성되어 있으면 구글에서 해당 사이트를 좋은 사이트로 인식하면서 SEO 점수가 높게 측정됩니다. SEO(Search Engine Optimization) - 검색엔진최적화검색 엔진에서 특정 키워드를 검색했을 때 웹사이트가 상위에 노출되도록 콘텐츠, 링크, 기술적 요소 등을 최적화하는 과정을 말합니다. 구글에서 제공하는 사이트인 성능측정사이트에 주기적으로 들어가서 SEO 측정 점수를 확인하면서 블로그를 운영하는 것이 좋아요.https://pagespeed.web.dev/ PageSpeed Insights올바른 URL을 입력하세요.pagespeed.web.dev 티스토리 자동목차 생성하기자동목차(TOC, Table Of Contents)는 티스.. 2024. 12. 9. CodePen :: 티스토리에 HTML CSS JS 코드 예쁘게 첨부하기 1. 코드펜 사이트에 회원가입 후 로그인 해줍니다.저는 깃허브 계정으로 로그인 해버렸어요.https://codepen.io/ CodePenAn online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.codepen.io 2. html, css, js를 작성합니다.3. save - embed - html - 코드복사지금보니 gif가 잘 안보이네요..상단의 save - 하단의 embed - html - 코드복사를 차례대로 눌러주세용 4. 티스토리 글쓰기에서 html블럭에 붙여넣.. 2024. 12. 3. 이미지 사이즈 5초만에 변경하기 :: iloveimg 이미지 무료 변경 사이트소개! 회사에서 이미지크기 변경이 필요해서이것저것 뒤져보다 찾아낸 사이트https://www.iloveimg.com/ko iLoveIMG | 쉽고 빠른 온라인 무료 이미지 편집 툴신속하게 파일 수정이 가능한 무료 이미지 편집 툴 iLoveIMG. 잘라내기, 크기 조정, 압축, 변환 등의 작업을 진행해 보세요!www.iloveimg.com이미지 크기 전환, 확장자 변경, 배경제거 등다양한 기능을 제공하고 있습니당무료라고 해놓고 이미지 올려놓으면돈 달라는 사이트들 많은데여기는 찐이여서 소개해봤어요 ~ 2024. 11. 29. Cookie와 로그인 :: 브라우저를 닫아도 로그인 유지시키기 처음 개발을 공부할 때팀 프로젝트를 진행하게 되면필수로 경험하게 되는 백엔드 개발이 있다. 게시판, 회원가입, 로그인... 등등 그 중에서도 내가 가장 겁내고 피했던 개발이 '로그인' 이었는데..DB를 조회해서 아이디 비밀번호를 대조하고, 로그인 시키는 것 자체는 간단하지만로그인에 엮여있는쿠키.세션과 같은 설정개발이 당시에는 너무 어려웠고개념자체도 제대로 들어오지 않아서.. 피하기만 했었는데 이번에 회사 업무로 jwt 토큰을 관리하게 되면서로그인, 로그아웃 시 사용자별 jwt 유저토큰을 쿠키에 저장하고이어서 헤더에 쿠키를 넣었다, 뺐다, 숨겼다이러한 업무들을 하게되었다 개발이 늘 그렇듯이하기전에는 두렵고 무섭지만한 번 활용하고나면 준전문가가 되는데뭐 대부분의 개발을 팀원분인 프론트엔드 개발자분의 도움으로.. 2024. 11. 15. 이전 1 2 3 4 다음 728x90 반응형
