hi098123 Tistory Tip
더보기

티스토리 팁

썸네일 이미지

"티스토리의 더 나은 광고를 위한 안내" 공지 대응하기

원글은 https://notice.tistory.com/2608 이곳에 있습니다. [중요] 티스토리의 더 나은 광고를 위한 안내 광고의 품질은 콘텐츠의 소비와 직결됩니다. 구글 서치콘솔의 환경보고서에서 "더 나은 광고 표준 위배로 인한 광고 필터링" 안내 메시지가 있었습니다. 구글 크롬 정책상 루트도메인 단위로 표 notice.tistory.com 설명이 조금 미흡하다 보니, 블로거들이 댓글로 다시 문의하네요. 화면의 30퍼센트 면적 초과? 브라우저..
썸네일 이미지

티스토리 댓글 차단 팁

티스토리를 운영중이라면 댓글 차단 한번쯤 이용해보셨을 수 있습니다. 어떻게 차단할지 감이 안잡히시거나, 작성자 차단/IP 차단 무엇을 해야될 지 모르겠다면 이 글을 읽어주세요. 댓글 차단 방법1 댓글 차단은 티스토리 관리페이지의 댓글·방명록 -> 댓글 관리 및 방명록 관리에서 가능합니다. 댓글 목록에 마우스를 올려보면 차단버튼이 있습니다. 작성자 차단과 IP차단을 선택할 수 있습니다. 방법2 댓글 차단은 티스..
썸네일 이미지

사이트맵 관련 구글 문서 오류

오류 발견 계기 최근에 큰 사이트맵이 필요한 다른 사이트를 새로 개설했는데 사이트맵 관련하여 오류가 여러번 나길래 공식문서상 규칙을 모두 지켜도 오류가 나더군요. 공식문서상에 잘못된 부분을 확인하였습니다. 구글은 사이트맵 제한을 크기 50MB이하와 URL 50,000개 이하로 제한한다고 안내합니다. 이 의미는 두가지 조건을 모두 충족해야한다는 의미입니다. 영어문서에서도 이와 유사하게 설명되어있습니다. 무엇이 잘..

[중요] 티스토리 API의 Implicit 방식의 제거 이유?

티스토리에는 OPEN API라는 기능이 있습니다. 외부 프로그램에서 티스토리에 글을 작성하거나, 수정등 티스토리 활용을 도와주는 기능입니다. 최근(2020-09-02)에 Implicit 인증방식이 제거되었던 이유는 바로 보안문제 때문이었습니다. 어떤 보안 문제가 있었나? 악의적인 해커는 여러분의 티스토리 글을 모두 스팸으로 바꾸거나 모두 삭제하거나 스팸글을 새로 작성 할 수 있었습니다. 현재는 임시로 Implicit 방식을 제거하여..
썸네일 이미지

티스토리 이미지에 링크걸기

티스토리 에디터에서 이미지에 링크를 거는 기능 다들 알고 계셨나요? 아래의 이미지에는 hi098123-skin.tistory.com으로 이동하는 링크가 걸려있습니다. 이미지에 링크 거는 방법 이미지를 클릭합니다. 이미지 정렬 옆에 링크버튼이 있습니다. 클릭하신 후 원하시는 링크 주소를 입력하시면 연결됩니다. HTML 구조 일반 이미지 ##_Image|kage@MzDPN/btqI07DcNEn/06IvC56UE3DDGoiBMguZWK/img.png|alignLeft|data-origin-width="..
더보기

티스토리 HTML

티스토리 스킨 변경사항, 광고 치환자

12일 전, 티스토리 스킨 관련 문서가 변경되었습니다. 수익 메뉴 관련하여 치환자가 새로 생겼는데, 무엇이 바뀌었나 알아봅시다. 공통 광고치환자 revenue_list_upper : 블로그 홈/목록 상단 revenue_list_lower : 블로그 홈/목록 하단 위의 두 가지 항목이 추가되었습니다. RSS구독 태그 방명록 사용 예시는 위와 같고, 블로그 홈 화면의 광고를 관리하는것으로 보입니다. 아마도 적용되는 광고를 치환하는 예시인것..
썸네일 이미지

티스토리에서 리스트 활용법

티스토리에서 글을 쓸때 저는 리스트 태그를 많이 사용합니다. 주된 이유로는 검색엔진이 받아들이기 쉬운 태그여서 그냥 글로 풀어쓰는것 보다 좋기 때문입니다. 로봇은 1., 2.과 같이 의미없는 글을 싫어하기도 합니다. 대신에 태그를 사용하면 로봇의 이해도 쉬워집니다. Google에서 스니펫에 올라가는 경우 태그의 내용을 우선적으로 색인하기도 합니다. 리스트 기본 활용법 그냥 순서대로 글을 쓴 뒤 리스트를 눌러 리스..
썸네일 이미지

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

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

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) 알아보기 여기..

티스토리 스킨 ##_rp_rep_class_##

티스토리 공식 스킨 페이지에 보면 설명이 좀 이상합니다. 댓글의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘 어떤 의미인가와 활용방법을 알아보고자 글을 작성합니다. 분류 값 일반 댓글 rp_general 비밀 댓글 rp_secret 본인의 댓글 rp_admin 숨겨진 댓글 hiddenComment 이렇게 반환됩니다. 결과 예시 만약 코드가 다음과 같았다면 일반 댓글 비밀 댓글 (내용을 볼 수 있는 경우) 블로그 주인의 댓글, 블로그..
더보기

티스토리 CSS

간단하고 깔끔한 제목 CSS로 꾸미기

제목을 간단하고 깔끔하게 꾸며보고자 합니다. 여러 디자인이 있겠지만 아래와 비슷한 느낌으로 꾸며보고자 합니다. 제목 CSS 코드 border-left 값으로 왼쪽 엣지를 꾸밀것이고 background-color로 배경색상을 줄것이고 padding으로 내부 여백을 줄것입니다. border-left 저는 PC, Mobile 모두 5px이 깔끔해보여서 5px으로 설정해보았습니다. border-left: 5px solid #FF9800; background-color 원하는 색상을 입력하시면 됩니다..
썸네일 이미지

티스토리 링크 미리보기, 투명이미지 버그 고치기

티스토리 링크 미리보기 티스토리에 링크를 걸고 링크 문장에서 엔터를 치면 아래와 같은 미리보기가 뜹니다. 위의 두 사진에서 차이가 보이시나요? 1번 이미지는 기본형태고, 2번 이미지는 이 글에서 소개할 내용을 적용한 이후의 이미지 입니다. 네 그렇습니다. 기본형태에서 티스토리 아이콘이 겹쳐보이네요. 이는 썸네일 이미지가 투명배경일때 발생하는 버그입니다. 투명 이미지 버그 고치기 투명색상 썸네일인경우 미리보..
썸네일 이미지

CSS Selector로 외부링크 선택하기

CSS를 보통은 초보자가 배우고 쓰기 때문에 CSS Selector OOO 선택하기 시리즈로 글을 써볼까합니다. 이 글은 링크()중 외부링크만 선택하는 방법입니다. 선택에 앞서 기초내용부터 한번에 다룹니다. 때문에 잘 몰랏어도 한번 정독하면 사용할 수 있을것입니다. CSS의 외부링크 선택법 사실 저는 초보자를 위한 글을 잘 쓰지 못합니다. 그냥 방법을 순차적으로 쓸것인데요. 공부에는 도움이 되지는 않아도 실제 쓸때는 도움은..
썸네일 이미지

드래그 색상 바꾸기

웹 사이트를 둘러보면 드래그 했을때 파란배경 흰색상 이 아닌 지정 색상을 이용하기도 합니다. 어떻게 설정할 수 있는지 알아보고 설정하는데 도움이 되도록 글을 작성합니다. 아래 예시코드는 배경색 : 검정, 글자색 : 흰색으로 이렇게 나타납니다. ::selection {/*예시코드*/ background-color: #000; color: #fff; } 원하는 색상으로 조합해서 코드를 만들어 볼 수 있을것입니다. 꾸며진 페이지에 맞게 깔끔해 보이는 색상..
썸네일 이미지

티스토리 "분류 전체보기" 지우기

카테고리에서 "분류 전체보기"가 별로 쓸모 없을것 같고 없애고 싶을때! HTML, CSS를 몰라도 적용 가능하게 설명해보고자한다. 적용 방법 관리 페이지에서 "꾸미기" - "스킨 편집"에 들어갑니다. HTML 편집에 들어갑니다. CSS에 들어가서 다음의 코드를 입력하시고 적용을 눌러 설정을 저장합니다. 코드는 아래와 같으며 복사가능합니다. ul.tt_category > li > a { display: none; } 코드의 동작은 티스토리 카테고리구조에서..
더보기

티스토리 JS

썸네일 이미지

티스토리 이미지를 Avast가 차단한다?

어제 티스토리 이미지가 Avast백신으로 부터 차단된다는 의견을 보았습니다. 당연히 Avast가 잘못 차단한것으로 보이는데, 방법은 Avast가 블랙리스트를 제거하거나 티스토리에서 다른 url으로 이동하는 방법도 있습니다. 티스토리같은 블로그 단점이 같은 도메인을 사용하기 때문에 일부 제재해야될것을 전체로 받는경우가 가끔있는것 같습니다. 저는 Avast백신을 안써서 잘 모르겠는데 이렇게 해결될거같다면 댓글남겨주세요...

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, tar..
썸네일 이미지

티스토리 2차도메인 댓글 문제 임시 해결하기

간단 해결 방법 다음의 코드를 스킨편집 - HTML편집에서 넣어줍니다. head, body 어디든 상관없습니다. 2020-08-07 업데이트 : 어디에 위치하던 동작하나 body의 맨끝에 위치시 조금더 실행속도가 빨라집니다. 적용을 한 후 2차도메인 티스토리에 접속하면, 댓글달기를 알아서 찾아 다음 문구를 보여줍니다. 티스토리 로그인이 해제 되었나요? 로그인하여 댓글 남기러가기 로그인 버튼을 클릭하면 "000.tistory.com/주소"..
썸네일 이미지

티스토리 댓글에 링크달기

이전에 작성한 글이 있어서 링크를 겁니다. hi098123.tistory.com/215 티스토리) 댓글에 링크 달기 댓글에 링크를 달 수 없을까? 아래와 같이 간단한 소스로 만들수있다. newTab (새탭으로 열기 true,false) comm 값 (CSS selector와 같은 방식으로) whitelist 값 (자바스크립트 배열 [] 로) 변형해줘야됩니다. 3 hi098123.tistory.com 페이지 하단에 아래의 script를 넣으면 댓글에 링크가 걸립니다. 아래의 whitelist설정에 따..
더보기

티스토리 설정

썸네일 이미지

티스토리 글 URL (숫자, 문자) 설정하기

티스토리의 글은 두 종류로 URL 사용 가능합니다. 숫자 주소 문자 주소 설정 방법 관리 페이지에서 관리-블로그에 들어갑니다. 주소 설정에서 원하는 주소형태로 사용가능합니다.
썸네일 이미지

티스토리 2차 도메인 연결하는 법

티스토리에는 2차 도메인 설정이 가능합니다. 설정중 연결이 안 되거나, SSL 발급이 안 되는 등 오류가 발생할 수 있습니다. 오류가 왜 발생했는지, 어떻게 해결되는지도 다룹니다. 어떻게 할수있나요? 만약, 이렇게 뜬다면? 도메인의 설정 정보를 확인할 수 없습니다. DNS 서비스의 설정 정보를 다시 확인해주세요. DNS 설정은 이렇게 이해하시면 쉽습니다. DNS(Domain Name Service : 전화번호부와 유사)는 도메인을 ip와 매..
썸네일 이미지

RSS 50개 설정하기

RSS는 Sitemap과 비슷하게 검색엔진에 도움이 될수있습니다. 관리 -> 블로그 -> 기타 설정 -> RSS 50개 -> 저장을 하면 된다. 글로는 복잡한데 아래의 사진으로보면 한눈에 보인다. RSS설정시 크롤러가 쉽게 사이트에 접근이 가능합니다. RSS가 어떤 역할을 하나요? 사이트의 여러 페이지 주소와 글(제목, 내용, 작성일, 작성자, 카테고리 등)을 포함하고 있습니다. 크롤러가 웹 사이트를 알기 쉽게 도와주는데요 더 쉽게 비유..
썸네일 이미지

모바일 페이지 제거하기

티스토리 관지자 페이지에 접속합니다. 꾸미기 박스에 있는 모바일에 들어갑니다. 사용하지 않습니다. 설정 후 저장 왜 모바일 전용페이지를 안쓰나요? 여러 이유가 있을 수 있습니다. 대표적인 이유는 아래에 나열해보겠습니다. 꾸며진 모바일 스킨을 사용하기 위해 반응형 스킨인 경우 꾸며진 모바일 스킨을 사용하기 위함이 있습니다. 반응형으로 만들었는데 기본 티스토리 모바일버전을 사용하긴 좀 그렇죠.. (당..
썸네일 이미지

카테고리 새 글 표시 지우기

주의 : 티스토리 최초설정값은 주황색  N 이나 한번 설정을 바꾸면 회색 N 으로 변합니다.. 이 표시는 제거할 수 있습니다. 카테고리 관리 -> 새 글 발행 표시 안함 -> 저장 한마디 한번 표시하지 않습니다를 설정하면 다음부터 색상이 무조건 회색으로 변하기 때문에 주의가 필요합니다. ("3일 이내 발행이내에 발행된 글이 있으면 새 글 여부를 표시합니다."를 변경해도 회색으로 변합니다.) 다시 바꾸기 이건 임시 조치로..