프론트엔드/CSS 3

[CSS] 티스토리 블로그 목차 만들기

블로그를 보다보면 스크롤을 내림에 따라 목차가 따라오는 플로팅 목차를 보신 적이 있으실텐데요. 이를 TOC(Table Of Contents)라 합니다. 오늘은 TOC를 만들어 보려합니다. TOC란 Table Of Contents의 약자로, 작성한 글의 태그에 따라 목차를 생성하여 보여줍니다. tocbot을 활용해 만들어 보았습니다. https://tscanlin.github.io/tocbot/ Tocbot Tocbot builds a table of contents (TOC) from headings in an HTML document. This is useful for documentation websites or long markdown pages because it makes them easier ..

프론트엔드/CSS 2023.02.26

[CSS] 티스토리 로딩화면 구현

다른 개발자분의 블로그를 보던 중 본인만의 로딩 GIF가 있는걸 보곤 로딩화면을 넣어보고 싶었습니다. 먼저 html 편집 전에, 로딩화면에 나올 본인만의 gif 파일이 필요합니다. 저는 싸지방에서 만들것이기에, 웹 상에서 gif를 무료로 만들 수 있는 Canva를 사용하였습니다. https://www.canva.com/create/gif-maker/ Free GIF Maker: Create GIFs from images and videos | Canva Express yourself in the most fun and creative way. Make a GIF from images and videos using Canva’s free GIF maker. www.canva.com 회원가입 한 후 gif ..

프론트엔드/CSS 2023.02.24

[CSS] 티스토리 블로그 꾸미기 - 썸네일 애니메이션

CSS를 통해 예쁘게 꾸며놓은 블로그는 저에게 포스팅할 동기를 부여해주고 방문자에게도 좋은 인상을 남겨줄 수 있습니다. 추가적으로 프론트엔드 능력을 어필할 때도 활용할 수 있을 것 같습니다. 오늘은 티스토리 블로그 꾸미기 - 썸네일 애니메이션 적용 방법에 대해 알아보겠습니다. 이번에 적용하고자 할 것은 썸네일에 마우스 오버 시 애니메이션이 발생하도록 하는 것입니다. 그러기 위해 우선 썸네일의 태그를 알아야 합니다. 블로그에서 F12(개발자 도구)를 누른 뒤 아래 그림과 같이 좌측 상단을 클릭하여 element 선택 상태를 활성화합니다. (혹은 ctrl + shift + c 단축키) 그 후 아래와 같이 블로그 홈에서 썸네일을 클릭하면 해당 element의 class 명과 태그 위치를 확인하실 수 있습니다...

프론트엔드/CSS 2022.08.07
loading