티스토리 꾸미기

모바일 비활성화 왜 하나?티스토리 모바일웹은 스킨 편집이 불가능합니다. 거의 대부분 티스토리 사용자들은 반응형 블로그를 사용하고 있습니다. 하지만 티스토리는 모바일 비활성화 대한 방법을 제공하지 않습니다. 모바일웹을 비활성화하게 되면 일관된 디자인을 보여줄 수 있습니다.다른 블로그 자료와 다른 점다른 블로그에서 제공하는 코드의 경우 게시글은 리디렉션 되지만 홈페이지는 모바일웹으로 보이는 경우가 많습니다. 하지만 지금 제공해 드리는 코드는 위와 같은 문제가 없습니다제공하는 코드의 장점모바일 웹 홈페이지에 접속해도 PC버전으로 리디렉션 됩니다. 티스토리 어플을 사용하셔도 모바일 화면으로 보이지 않습니다. 개발자 콘솔 오류가 발생하지 않습니다.비활성화 적용방법아래 자바스크립트 코드 파일을 다운로드합니다. 스크..

페이드인 효과지금 저의 티스토리 블로그에는 Fade-in 효과가 적용되어 있습니다. 게시글을 표현할 때 가장 예쁘게 표현할 수 있는 방법이 아닐까 생각합니다. 저와 같은 생각을 가지고 계신 분들에게 이글이 도움이 되었으면 합니다./*이미지 스크롤 효과*/figure.imageblock,#tt-body-page figure.imageblock,.image-container { opacity:0;}위에 있는 CSS 코드를 복사하여 스킨편집 CSS 영역에 붙여 넣어줍니다. Fade-in 기능이 적용되는 범위는 이미지와 이미지를 2~3장 붙여 나열하는 imageblock과 container 두 가지입니다.페이드인 적용 방법 위코드는 HTML 편집영역에서 코드 바로 위에 붙여 넣어주시면 완료입니다.페이드인 ..

미디어 쿼리 CSS 활용반응형 블로그 또는 웹사이트를 구축할 때, 특정 요소를 화면 크기에 따라 숨기거나 노출시키는 방법은 매우 유용합니다. 그중 가장 간단하고 효과적인 방법은 미디어 쿼리를 사용하는 것입니다.기본 CSS 코드우선, 숨기고자 하는 특정 요소에 대한 기본 CSS 코드를 설정합니다. 예를 들어, 다음과 같은 클래스를 사용할 수 있습니다..notice-go-to-index { display: none;}미디어 쿼리 사용이제 미디어 쿼리를 사용하여 특정 화면 크기에서 요소의 표시 여부를 제어할 수 있습니다.1. 최대 화면 크기 기준아래 코드는 최대 화면 너비가 1000px 이하일 때 요소를 숨기는 방법입니다.@media screen and (max-width: 1000px) { .notice..

TOC란 무엇인가?TOC는 Table of Contents를 의미하며, Markdown으로 작성한 글의 헤더를 모아 간편하게 보여주는 용도로 사용됩니다. TOC를 통해 독자는 문서의 구조를 쉽게 파악하고 원하는 내용을 빠르게 찾을 수 있습니다.제가 사용한 TOC는 tocbot이라는 라이브러리로, 기본 스타일이 깔끔하게 구성되어 있지만, 개인적인 취향에 맞게 CSS를 수정하여 사용하고 있습니다.TOC 적용 방법TOC를 웹사이트에 적용하려면 다음 단계를 따라 주세요.파일 다운로드 및 업로드아래 첨부 파일을 다운로드한 후, 티스토리 스킨 편집에서 해당 파일을 업로드합니다.더보기Header 부분 코드Body 부분 코드JavaScript 부분 코드CSS 부분 코드/* toc Start */.toc { posit..