Moazum Blog is...

유용한 정보를 기록하는 '페이 발렌타인'입니다 !

유용한 정보를 기록합니다
대표이미지 티스토리 블로그 모바일웹 비활성화 · 2023 최신코드
모바일 비활성화 왜 하나? 티스토리 모바일웹은 스킨 편집이 불가능합니다. 거의 대부분 티스토리 사용자들은 반응형 블로그를 사용하고 있습니다. 하지만 티스토리는 모바일 비활성화 대한 방법을 제공하지 않습니다. 모바일웹을 비활성화하게 되면 일관된 디자인을 보여줄 수 있습니다. 다른 블로그 자료와 다른 점 다른 블로그에서 제공하는 코드의 경우 게시글은 리디렉션 되지만 홈페이지는 모바일웹으로 보이는 경우가 많습니다. 하지만 지금 제공해 드리는 코드는 위와 같은 문제가 없습니다 제공하는 코드의 장점 모바일 웹 홈페이지에 접속해도 PC버전으로 리디렉션 됩니다. 티스토리 어플을 사용하셔도 모바일 화면으로 보이지 않습니다. 개발자 콘솔 오류가 발생하지 않습니다. 비활성화 적용방법 아래 자바스크립트 코드 파일을 다운로드..>
category_list_image
Moazum 2023.08.17
(0)
대표이미지 티스토리 콘텐츠 페이드인 효과 적용 방법 | CSS, Javascript
페이드인 효과 지금 저의 티스토리 블로그에는 Fade-in 효과가 적용되어 있습니다. 게시글을 표현할 때 가장 예쁘게 표현할 수 있는 방법이 아닐까 생각합니다. 저와 같은 생각을 가지고 계신 분들에게 이글이 도움이 되었으면 합니다. /*이미지 스크롤 효과*/ figure.imageblock, #tt-body-page figure.imageblock,.image-container { opacity:0; } 위에 있는 CSS 코드를 복사하여 스킨편집 CSS 영역에 붙여 넣어줍니다. Fade-in 기능이 적용되는 범위는 이미지와 이미지를 2~3장 붙여 나열하는 imageblock과 container 두 가지입니다. 페이드인 적용 방법 위코드는 HTML 편집영역에서 코드 바로 위에 붙여 넣어주시면 완료입니다. ..>
category_list_image
Moazum 2023.08.16
(0)
대표이미지 특정 창크기 줄어들면 특정요소 숨기기 미디어쿼리 CSS
반응형 블로그 또는 웹사이트에 적용하기 편한 방법입니다. 노출시키고 싶은 또는 감추고 싶은 요소를 컨트롤하는 방법은 많지만 그중에 가장 간단하게 적용하기 좋은 방법은 미디어쿼리를 이용하는 방법입니다. 우선 아래와 같은 특정요소를 숨기기위한 CSS 코드를 살펴보겠습니다. .notice-go-to-index { display: none; } 위와 같은 기본CSS 코드에 media-query를 사용해 보겠습니다. 아래 코드를 보시면 @media로 시작하고 max-width를 보실 수 있습니다. @media screen and (max-width: 1000px) { .notice-go-to-index { display: none; } } 위 코드는 최대 화면 크기가 1000px 까지는 노출이 된다는 것입니다. ..>
category_list_image
Moazum 2023.08.16
(0)
대표이미지 티스토리 본문에 TOC 목차 만들기 소스
∴ Toc Toc란? Table of Contents를 의미하고 있으며, markdown으로 작성한 글의 header를 모아서 간편하게 보여주는 용도입니다. 제가 사용한 toc는 tocbot이며, 기본적 스타일도 깔끔하게 되어있지만 저만의 스타일로 살짝 CSS를 수정하였습니다. ∴ 적용하기 아래 첨부 파일을 다운로드하시고 티스토리 스킨 편집에 해당 파일을 업로드해 주세요. ∴ Header 부분 ∴ Body 부분 ∴ Jabascript 부분 ∴ Css 부분 /*toc Start*/ .toc { position: fixed; top: 12%; right: 1.1%; width: 250px; padding: 10px 0px 15px 6px; border-radius: 10px; box-sizing: borde..>
category_list_image
Moazum 2022.11.23
(0)
상단이동 테마변경 Created with Fabric.js 1.7.22 팝업