'분류 전체보기' 카테고리의 글 목록 (8 Page) - hi098123 Tistory Tip

티스토리에서 GIF대신 MP4를 이용하는 방법

이전에 움직이는 이미지 mp4로 표시하기 포스팅에서 GIF대신 MP4가 훨씬 좋은 이유를 포스팅한 적 있다. 티스토리에서 글쓰기로 GIF대신 MP4를 쓰는방법 먼저, 공식 글쓰기에서 지원하는 게 아니기 때문에 HTML 편집을 써야 된다. HTML을 쓸 줄 모른다면 이 포스팅은 이해하기 어려울 수 있다.. MP4 파일을 업로드하기 (영상 주소 확보) 글쓰기에서 파일을 업로드합니다. (티스토리 업로드 제한 10MB) 해당 글을 비공개로 저장합니다. 저장한 글에서 업로드한 파일을 우클릭하여 "링크 주소 복사"를 클릭하여 주소를 복사합니다. 영상을 글 본문에 삽입하기 아래의 video태그가 기존 gif를 삽입할 위치에 들어가면 된다. autoplay loop muted playsinline은 모두 필요한 속성으..

티스토리 로딩을 빠르게 dns-prefetch

DNS Prefetch 란? 먼저 DNS값을 가져오는 과정으로 페이지내 로딩하는 외부 리소스가 있다면 적용해 볼 수 있다. 초기 연결시 DNS 쿼리 응답시간을 단축할 수 있다. 쉽게 비유 하자면, 선행학습을 하여 수업 진도를 빠르게 익힐수있다? 정도가 될것같다. 미리 DNS를 가져와서 타 서버 초기로딩시간을 줄여준다. IE10 이상에서 적용할수 있으며, 남용(너무 많이 사용)하는것은 오히려 안좋다. 티스토리 적용법은? HTML HEAD 최상단에 다음의 코드를 작성한다. tistory.daumcdn.net tistory.daumcdn.net는 스킨 관련 리소스 위치이므로 스킨리소스를 images폴더에 올리지 않은경우 지워도 좋다. blog.kakaocdn.net 이미지를 업로드시 이 주소를 통해 전달받는다..

"색인이 생성되었으나 robots.txt에 의해 차단됨" 해결하기

경고 문구는 아래와 같습니다. Search Console이 사이트에서 1개의 색인 생성 범위 문제를 발견했습니다. 주요 경고 경고는 개선을 위한 제안사항입니다. 일부 경고는 검색결과 노출에 영향을 미칠 수 있으며, 나중에 오류로 격상될 가능성이 있는 경고도 있습니다. 사이트에서 발견된 경고는 다음과 같습니다. 색인이 생성되었으나 robots.txt에 의해 차단됨 가능한 경우 문제를 해결하여 사이트의 사용자 환경과 Google 검색 노출을 최적화하시기 바랍니다. 색인 생성 범위 문제 해결하기 링크를 누르면 아래와 같은 페이지에서 어떤문제인지 나온다. 영향을 받은 페이지를 확인하자 티스토리에서 이와 동일한 오류발생가능한 주소는 아래와 같고 /search 는 정상적으로 실행되는 주소라 /search로 오류가 ..

움직이는 이미지 mp4로 표시하기

GIF는 MP4에 비해 모든면에서 안좋다. 화질 용량 최적화 CPU사용량 때문에 GIF이미지를 mp4로 변경하여 사용하는 사이트가 요즘 늘어나는 추세다. FFMPEG와 같은 미디어인코더를 통해 서버에서 GIF를 MP4로 변환시키거나. 사용자 브라우저에서 WASM기술을 이용해 인코딩할수도 있다. 이렇게 변환한 파일을 gif.mp4라고 가정하고 설명한다. GIF를 MP4로 변환했다면 아래와 같이 mp4파일을 autoplay loop muted playsinline 옵션을 준다면 GIF와 동일하게 동작한다. Video태그 각 옵션에 대해 설명 autoplay 자동재생을 한다. GIF도 로딩과 동시에 움직이는 이미지로 보인다. loop 무한 반복을 한다. 보통 GIF는 무한반복을 이용한다. muted 음소거를 ..

SEO 글쓰기 팁 : 목차 TOC(Table of contents)

SEO 글쓰기 팁에 목차기능을 넣은건 h1~h6 태그의 중요성을 설명하고자 작성합니다. 문서는 깔끔하고 정리된 순서로 작성되어야 합니다. 제목을 정하고 소제목으로 내용을 정리하면 매우 깔끔하게 글이 완성될 수 있습니다. 아래의 목차는 a태그 설명에 포함되어있는 목차입니다. 왜 목차를 추천하는가? 아까 말했듯 h1~h6 제목태그 활용을 위해서입니다. 기계가 읽어 들이는 방식이 그대로 표현되면서도 사람이 읽기 편해지기 때문에 목차기능을 추천합니다. 목차기능을 적용하면 이점이 많이 있습니다. 사용자가 읽기 쉽다 = 사용자가 보기 편하고 좋은글 = 검색엔진의 최종 목표 검색엔진도 읽기 쉽다 = 높은 순위에 오르기 좋다. 작성시 신경을 쓴다 = 보통은 신경을 잘 안쓰게 되지만 좋은글을 위해 신경쓰기 좋다. 적용방..

블로그, 최소한 IE11은 지원해주세요.

방문자에게 2020-08-12 작성일 기준 IE를 더 이상 이용하지 말라고 말하겠지만, MS에서 지원하는 중이므로 IE는 사용자가 있고 지원을 계속해줘야 됩니다. IE 지원하기 싫어도 지원해야 하는 이유 블로그 컨텐츠는 사용자와 상호작용보다는 일반적인 웹문서 제공에 불과하기 때문에 IE11을 지원해줘야 됩니다. 미지원시에는 IE에서 검색 시 블로그 자체가 안뜰수 있습니다. 구형 브라우저를 차별시 저사양 PC나 구형 휴대기기 등에서 이용이 불가합니다. 그러나 국내에 사용자가 있으며, 이들을 차별시 검색엔진의 순위가 좌우될 수 있습니다. 블로그 컨텐츠는 단순히 글을 읽는 것에 불과하여 어떻게든 글을 읽게 만들 수 있기 때문에 지원이 어려운 건 아닙니다. 또한 IE 사용자는 애드블럭을 99.9% 사용하지 않기..

HTML 기초 : title attribute 툴팁을 만들자.

이번 글의 주제는 title 속성값이다. title태그와는 다른 속성에 들어가는 값이다. 들어가기 앞서.. HTML 속성(attribute)이란? hi098123-skin:타이틀 속성 위와 같은 html 구조에서 href="URL", target="_blank" 부분을 의미한다. href는 속성(attribute)으로 a태그에서 어디로 향할지 주소를 입력할 수 있다. href의 값(value)은 https://hi098123-skin.tistory.com/29 로 웹 주소이다. TITLE 속성(attribute) 알아보기 여기의 title은 hi098123-skin 이에요 미리보기 여기의 title은 hi098123-skin 이에요 title 속성(attribute)에 적힌 hi098123-skin이라는..

iframe간 CORS무시? postMessage

다른 도메인이어서 CORS가 걸려있어도 로딩한 iframe과 통신할 수 있는 한가지 방법이 있다. (window.open 팝업등도 가능하다.) 대신 두 통신할 도메인 여기에서는 aa.com과 bb.com으로 예를 들겠다. aa.com bb.com : CORS aa.com bb.com : X-frame-options "allow-from https://aa.com/" iframe으로 통신시 서버상에서 iframe을 로드할수없게 만드는 기능이 꺼져있어야된다. postMessage targetWindow.postMessage(message, targetOrigin, [transfer]); targetWindow targetWindow의 예시로는 아래의 내용이 있다. Window.open (새 창을 만들고 새 ..

< 이전 1 ··· 5 6 7 8 9 10 11 12 다음 >

인기 글

최신 글

링크
hi098123 Tistory Tip 소개
hi098123 Tools
hi098123 블로그

Design by hi098123 이 사이트의 게시글을 복제하지 마십시오. 링크공유만 허용됩니다.

티스토리툴바