AOS란 무엇인가?AOS(Animate On Scroll)는 웹 페이지에서 스크롤을 할 때 특정 요소에 애니메이션 효과를 적용하는 라이브러리입니다. 사용자가 페이지를 아래로 스크롤할 때, 미리 정의된 애니메이션이 실행되어 콘텐츠가 부드럽게 나타나거나 사라지는 방식으로, 사용자 경험을 향상하는 데 큰 도움을 줍니다. AOS는 간단한 설정으로 다양한 애니메이션 효과를 제공하여, 웹 개발자와 블로거들 사이에서 인기를 끌고 있습니다.AOS의 주요 특징사용 용이성: AOS는 HTML 요소에 간단한 데이터 속성을 추가하는 것만으로 애니메이션 효과를 적용할 수 있습니다. 복잡한 코드 작성 없이도 쉽게 사용할 수 있습니다.다양한 애니메이션 효과: AOS는 페이드, 슬라이드, 확대, 회전 등 다양한 애니메이션 효과를 제..

티스토리 날짜 형식 바꾸기티스토리 블로그를 운영하면서, 날짜 형식을 사용자 맞춤형으로 변경하고 싶은 경우가 많습니다. 기본적으로 제공되는 날짜 표시 형식이 블로그의 스타일과 맞지 않거나, 보다 직관적인 날짜 표현을 원할 때 CSS와 JavaScript를 활용하여 손쉽게 변경할 수 있습니다. 이번 글에서는 글 본문과 목록에서 날짜 형식을 어떻게 변경하는지에 대해 자세히 설명하겠습니다.날짜 표시 형식 변경의 필요성블로그에 게시되는 날짜는 독자에게 중요한 정보입니다. 날짜 형식이 직관적이지 않거나 블로그 디자인과 어울리지 않는다면, 독자에게 혼란을 줄 수 있습니다. 따라서 날짜 형식을 변경하여 블로그의 일관성을 높이고, 사용자 경험을 개선하는 것이 중요합니다.글 본문 날짜 형식 변경하기1 원본 코드우선, 기본..

콘솔오류Uncaught SyntaxError: Unexpected token '}' 오류는 무슨오류일까요?이 오류는 JavaScript 코드에서 발생한 것으로, 보통 중괄호({})의 사용이 잘못되었거나 닫는 중괄호가 누락된 경우 발생합니다. 코드를 다시 살펴보고 중괄호를 올바르게 열고 닫았는지 확인해야 합니다.해결방법중괄호의 짝을 찾는 가장 간단한 방법은 코드 에디터나 통합 개발 환경(IDE)를 사용하는 것입니다. 대부분의 코드 편집기는 중괄호의 짝을 자동으로 강조해주거나 매칭해주는 기능을 제공합니다. 코드를 보면서 중괄호를 여는 부분과 닫는 부분을 살펴보고, 각 중괄호가 올바른 위치에 있는지 확인하세요. 이렇게 하면 오류를 찾고 수정하는 데 도움이 될 것입니다.

hELLO 스킨hELLO 스킨은 티스토리 블로그를 이용하는 분들은 다들 아실 텐데요. 초기에 여러 오류 해결을 하지 못해서 다른 스킨으로 옮겨 가시는 분들도 있습니다. 하지만 간단하게 오류를 하나씩 해결해 가면서 블로그를 관리하시는 것도 재미있습니다.lightbox 오류처음 hELLO 스킨을 설치하고 이용하게 되면 콘솔에서 lightbox 오류를 확인할 수 있습니다. 이 오류는 블로그 글에 첨부된 이미지를 클릭하여도 팝업창으로 이미지를 확대해서 볼 수 있도록 하는 lightbox 기능이 작동되지 않는 오류입니다.해결방법hELLO 스킨 lightbox 오류 해결 방법은 생각보다 간단히 해결할 수 있습니다.위 작성된 스크립트를 적당한 위치에 붙여 넣어 주시면 lightbox가 정상적으로 동작하게 됩니다.마..

블로그 성능 향상블로그(사이트)의 로딩 속도가 중요하나요?네, 블로그나 웹사이트의 로딩 속도는 매우 중요합니다. 느린 로딩 속도는 사용자들의 경험을 저하시키고, 검색 엔진 최적화(SEO)에서도 중요한 요소 중 하나로 사이트 점수에 영향을 줍니다.빠른 로딩 속도는 사용자들이 페이지를 빠르게 접근하고 내용을 쉽게 읽을 수 있도록 도와줍니다. 또한, 사용자들이 웹사이트에서 머무는 시간을 증가시키고 이탈률을 낮출 수 있습니다. 따라서 로딩 속도를 최적화하여 웹사이트의 성능을 향상하는 것은 중요합니다.Lazyload AnalyticsLazyload는 사이트에 등록된 이미지를 지연로드하기 위해 더 많이 사용하지만 타사코드의 영향을 줄이기 위해 애널리틱스에도 Lazyload를 적용할 수 있습니다. 아래 스크립트를 자..

댓글 미디어 첨부블로그 댓글에 미디어(이미지나 영상)를 첨부할 수 있는 기능은 사용자들에게 더 풍부한 댓글 작성 경험을 제공할 수 있습니다.이미지 첨부 방법댓글창 하단에 보이는 사진 아이콘을 클릭합니다.댓글에 등록할 이미지 파일이 있는폴더로 이동하여 등록할 이미지를선택합니다.그럼 댓글창에 이미지 URL이 생성됩니다.</..

Highlight하이라이트 JS (Highlight.js)는 코드 문법을 감지하고 색상을 부여하여 코드를 강조 표시하는 JavaScript 라이브러리입니다. 이 라이브러리는 다양한 프로그래밍 언어와데이터 형식에 대해 문법 감지를 지원하며,웹 페이지나 앱에서 코드 조각을 보기 좋게 표시할 수 있도록 도와줍니다.Highlight.js를 사용하면 코드 조각을 감지하고 자동으로 색상을 지정하여 문법적으로 올바르게 표시할 수 있습니다. 이는 코드의 가독성을 향상하고 사용자에게 코드의 의미를 빠르게 이해할 수 있도록 돕습니다.그래서 Highlight.js는 프로그래밍 블로그, 온라인 문서, 개발자 커뮤니티 등 다양한 곳에서 널리 사용되고 있습니다.기본설정티스토리 html편집으로 이동하여 head 사이에 아래 코드를..

Uncaught TypeError무료로 제공되는 hELLO 스킨은많은 사람들이 사용하고 있는티스토리 스킨 중 하나입니다.저 또한 hELLO 스킨을 사용하려고 하는데처음 발생하는 오류를 어느 정도 해결하고사용하려고 준비하고 있습니다.오류발생스킨을 처음 설치 후 콘솔을 확인하면빨간색으로 확인되는 오류정보입니다.Uncaught TypeError: Cannot read properties of null (reading 'click') at toggleAdminLayer (common.js:599:18) at common.js:610:1이건 무슨 오류일까요?오류정보이 오류는 JavaScript 코드에서 'null' 값을 가진 객체의 속성을 읽으려고 할 때 발생합니다.여기서는 'click' 속성을 가진 객체를 참조..

콘솔오류웹페이지 성능을 확인하다가알 수 없는 빨간색경고를 확인하게 되면깜짝 놀라게 되고는 합니다.이 오류는 티스토리, 블로그스폿등모든 웹브라우저에 해당하는 오류입니다.Unchecked runtime.lastError:A listener indicated an asynchronous response by returning true, but the message channel closed before a response was receive.이건 무슨 오류일까요?오류의 원인이 오류는 Chrome 확장 프로그램 또는 웹 애플리케이션에서 발생하는 것으로, 일반적으로 Chrome의 확장 프로그램 API를 사용할 때 발생합니다.Chrome 확장 프로그램이나 웹 애플리케이션이 백그라운드에서 비동기 작업을 수행할 때 ..

파비콘(favicon)파비콘은 웹사이트의 브라우저 탭에 표시되는 아이콘을 말합니다. 브라우저 탭의 왼쪽에 작은 그림이나 아이콘이 보이는데, 이것이 파비콘입니다. 사용자가 웹사이트를 쉽게 식별할 수 있도록 하거나, 웹사이트를 나타내는 작은 시각적 신호 역할을 합니다. 예를 들어, 구글의 파비콘은 "G"로 되어 있습니다. 파비콘은 웹사이트의 브랜드 아이덴티티를 강화하고 사용자 경험을 향상하는 데 도움이 됩니다.선명하게 표시하는 방법파비콘을 더 선명하게 표시하는 방법은 이미지를 더 높은 해상도로 제공하는 것입니다. 일반적으로 고해상도의 디스플레이를 지원하는 장치에서 파비콘을 선명하게 표시하려면 다음 단계를 따를 수 있습니다.고해상도 아이콘 제작파비콘 추가HTML에 링크 추가먼저 원본 이미지를 더 높은 해상도 ..

카테고리 괄호 지우기티스토리 카테고리에 게시글 개수에 표시되어 있는 괄호를 지우는 스크립트입니다. 여러 가지 복잡한 설명 없이 간단하게 스크립트만 넣어주면 됩니다.기본 스크립트아래는 기본적으로 티스토리에 많이 사용되고 있는 코드입니다. sidebar-category경우 자신이 사용하고 있는 스킨의 id값을 확인하여 수정하여야 합니다.const side_category = document.getElementById('sidebar-category');const c_cnt = side_category.getElementsByClassName('c_cnt');for (i = 0; i hELLO 전용아래는 제가 사용하고 있는 hELLO스킨 전용 스크립트입니다. 저와 같은 스킨을 사용하고 계신다면 그냥 복사 붙여..

FancyBox 티스토리에서 lightbox기능이 예전처럼 잘되지 않는 것 같습니다. 그래서 다른 라이브러리를 찾다가 FancyBox를 사용하는 분의 글을 보게 되어 기록을 남겨놓습니다. FancyBox Script head사이에 스크립트를 추가해 주시면 됩니다. 기존의 티스토리 lightbox부분을 삭제하고 FancyBox속성으로 바뀌어 넣습니다. 그렇기 때문에 전체 이미지가 FancyBox속성으로 바뀌기 때문에 이미지는 무조건 갤러리 형식으로 고정됩니다. 알아두세요 hELLO스킨을 사용하시는 분들은 아래 코드를 주석처리 해주셔야 합니다. window.addEventListener('DOMContentLoaded', function() { return Alpine.start(); }); 주석처리를 하지..