블로그 팁 - Iter - 12 / 3 페이지

티스토리 접은글 더보기 기본 값을 펼침 상태로 변경하기

티스토리 접은글 기본 값을 펼침 상태로 변경하는 방법입니다. 기본 값은 닫힘 상태로 "더보기" 문구를 클릭해야 숨겨진 부분이 펼쳐지게 됩니다. 간단하게 HTML 모드에서 'open' 클래스를 해당 요소에 삽입하는 방법을 사용하려고 했지만 클래스 추가가 되지 않아 부득이하게 자바스크립트를 이용해 해결했습니다. 티스토리 접은글 펼침 본문 작성 시 HTML 모드로 진입해 하단에 아래 코드를 복사해 붙여 넣습니다. 매번 복사 붙여 넣기 하는 것이 귀찮다면 서식으로 만들어 넣는 것이 효율적입니다. <script> (function () { // 접은글 펼침 상태를 기본 값으로 window.addEventListener('load', function () { const bodyId = document.getElementById('tt-body-page'); const moreLess = document.querySelector('div[data-ke-type="moreLess"]'); const btnToggleMoreless = document.querySelector('.btn-toggle-moreless'); if (bodyId && moreLess) { moreLess.classList.add('open'); btnToggleMoreless.innerText = '닫기'; } }) }()); </script> 이 또한 번거롭다면 블로그 스킨편집 HTML 하단 </body> 위에 넣는 것을 추천드립니다. 참고로 IE11 이하에서는 작동되지 않습니다.

2025-07-14

티스토리 크롬 브라우저 오류 문제 해결 방법

티스토리 크롬 브라우저 오류 문제 해결 방법, 티스토리 사용 중 접속 오류, 댓글에 댓글 "확인 버튼" 비활성화 문제, 본문과 스킨 편집 에디터에 입력이 안 되는 오류 등 4가지 사항을 경험했습니다. 티스토리 크롬 브라우저 오류 티스토리 접속 안됨(페이지가 동작하지 않습니다.)댓글에 댓글 확인 버튼 활성화 안됨본문 에디터 입력 안됨스킨 편집 에디터 입력 안됨 오류 문제 해결 방법 이 문제의 원인이 티스토리에 있는 것인지 아니면 브라우저에 있는 것인지 정확히 알 수는 없지만 해결을 위해 몇 가지 방법을 시도해 보았습니다. 참고로 네이버 블로그에서도 본문에 입력이 안 되는 문제가 있었습니다. 인터넷 사용기록 삭제(쿠키 및 기타 사이트 데이터)크롬 브라우저 초기화MS엣지 브라우저로 변경 우선 크롬 브라우저 쿠키 삭제나 브라우저 초기화를 하면 일시적으로 해결은 됩니다. 그런데 얼마 못 가서 다시 동일한 문제가 발생되었습니다. 수차례 크롬 브라우저의 쿠키를 삭제하거나 브라우저를 초기화하는 방식으로 해결하다 매번 반복하는 것이 효율적이지 못한 것 같아 브라우저를 Windows 내장 브라우저인 엣지로 변경했습니다. 인터넷 사용기록 삭제나 브라우저 초기화 후에도 지속적으로 문제가 발생된다면 엣지 브라우저를 사용하는 것이…

2025-07-14

티스토리 Square 스킨 라벨 리본 위치 수정 방법

티스토리 Square 스킨 라벨 리본 위치 수정, 티스토리 측에서 제공하는 일부 CSS 스타일과 Square 스킨 CSS와 충돌로 인해 라벨(리본) 위치가 아래쪽으로 밀리는 현상 있습니다. 최근 티스토리 측에서 사용자 스킨을 고려하지 않은 채 코드를 업데이트하고 있어 여러 가지 문제가 발생되고 있는데요. 아래는 Square 스킨 라벨(리본) 위치를 수정하는 간단한 방법입니다. 티스토리 Square 스킨 라벨(리본) 위치 1. 티스토리 블로그 관리 홈으로 접속 후 스킨 편집을 선택합니다. 2. 스킨 편집에서 html 버튼을 클릭해 줍니다. 3. CSS를 선택 후 하단 빈 곳에 아래 코드를 넣어준 후 적용합니다. #content #head .date {bottom: -44px} @media (max-width: 959px) { #content #head .date {bottom: -15px} } 참고 : 위 코드 중 bottom: -44px는 pc이고 bottom: -15px은 모바일에서 위치입니다. 기본 위치가 마음에 들지 않는 다면 숫자를 수정해 주세요.

2025-07-14

구글 서치콘솔 메타태그 찾기 소유권 확인 코드

구글 서치콘솔 메타태그 찾기, 소유권 확인에 필요한 서치콘솔 메타태그 코드를 잃어버린 경우 다시 찾아 확인하는 방법입니다. 사실 서치콘솔 메타태그를 꼭 찾을 필요는 없어요. 구글 서치콘솔에서 소유권 확인이 되지 않는다는 알림이 오면 그때 확인 절차를 다시 진행해도 무방합니다. 그런데 있어야 할 것이 없으면 왠지 찜찜하죠. 서치콘솔 메타태그 찾는 거 1초면 되니깐 한번 알아보도록 해요. 서치콘솔 메타태그 찾기 예전에는 구글 서치콘솔 설정 중 소유권 인증 페이지에서 쉽게 찾을 수 있었는데요 현재는 그 기능이 없어졌습니다. 지금은 구글 웹마스터 센터를 이용해 찾을 수 있습니다. 우선 구글 웹마스터 센터로 접속하면 구글 서치콘솔에 등록된 자신의 블로그 주소들이 나열돼있는데요. 찾고자 하는 블로그 주소 또는 오른쪽 "확인 세부 정보"를 클릭해 이동합니다.(로그인 필수) 그리고 메타태그 옆 "상세정보"를 클릭하면 그 아래에 이전에 인증된 서치콘솔 소유권 확인 메타태그가 나타납니다. 그대로 복사해 사용하시면 끝입니다. 서치콘솔 메타태그 등록 서치콘솔 등록 후 소유권 확인 메타태그를 메모장 등에 저장해 놓는 것이 좋은데요. 간혹 그 저장해 놓은 메모장을 찾지 못하는 경우도 있고 실수로 삭제하는 경우도 있어요.…

2022-08-04

티스토리 본문 줄 간격 조정방법(feat.북클럽)

티스토리 본문 줄 간격 조정 블로거 성향에 따라 줄 간격이 좁은 것을 선호하기도 하고 줄 간격이 넓은 것을 선호하는 것 같습니다. 저는 시력이 좋지 않아 개인적으로 줄 간격이 넓은 것을 선호는 데요. 티스토리에서 제공하는 스킨들 대부분 줄 간격이 제각각이라 스킨을 변경 후 기본적으로 줄 간격을 수정해서 사용하고 있습니다. 줄 간격은 줄과 줄 사이의 공간을 말하는 것으로 문단(단락) 간격과는 다는 것입니다. 본문 줄 간격, 줄 바꿈, 문단 간격 차이 티스토리 본문 줄 간격 조정 티스토리에서 줄 간격은 스킨에 따라 조금씩 다른 간격을 가지고 있는데요. 지금 사용하고 있는 스킨의 줄 간격이 마음에 들지 않아 조정하고 싶다면 스킨의 CSS 코드를 수정해야 합니다. 티스토리 스킨 중 가장 많이 사용되는 북클럽 스킨을 예로 들어보자면 글꼴은 Noto Sans KR이고 글자 크기는 15px 줄 간격은 글자 크기만큼 간격이 벌어지게 설정되어 있습니다. .entry-content p { line-height: 2; } 위 CSS 코드에서 line-height: 2; 이 부분이 줄 간격을 지정하는 속성인데요. 여기서 2라는 숫자가 줄 간격을 의미하는 것으로 글자 크기만큼…

2025-07-14

티스토리 본문 줄 간격 줄 바꿈 문단 간격 차이점

티스토리를 처음 사용하시는 분들 중 줄 간격과 문단 간격 그리고 줄 바꿈에 대해 헷갈려하시거나 잘 못 사용하고 있는 분들이 있어 간단하게 남아 요약해 보았습니다. 티스토리 줄 간격 줄 간격은 다들 아시겠지만 말 그대로 위 줄과 아래 줄의 간격을 말하는데 글을 쓰면서 엔터키 없이 글을 이어서 썼을 때의 간격을 의미합니다. 아래 예제 이미지 참고. 티스토리 본문 줄 간격 조정하기 티스토리 줄 바꿈 만약 문단 내에서 단순히 한 줄 아래로 줄 바꿈을 하고 싶다면 티스토리 설정에 따라 ENTER 키 또는 SHIFT + ENTER 키를 사용하면 한 줄 아래로 줄 바꿈이 됩니다. 티스토리 설정과 관계없이 줄 바꿈을 하려면 SHIFT + ENTER 키를 이용하시면 되며 이 것이 정석이며 정상적인 방법입니다. 티스토리 문단 간격 문단 간격은 아래 줄과의 간격이 보다 넓은데요. 이렇게 문단을 나누고 싶은 경우 엔터키를 치면 문단으로 나뉘게 되고 아래 예제처럼 넓은 간격을 갖게 됩니다. 단, 티스토리 설정에 따라 적용이 안될 수 있습니다. 엔터키를 이용해 문단에 간격을 주려면 티스토리 블로그 관리 홈으로 접속해…

2025-07-14

도메인 구매 사이트 추천, 가격 비교, 나에게 맞는 업체 선택

도메인 구매 사이트 추천할 때 가성비와 사용 편의성 때문에 가비아와 호스팅케이알을 주로 권해드리고 있는데요. 오늘은 도메인을 구매하고 등록해 주는 업체 별 가격 비교와 선택 요령에 대해 이야기해 볼까 합니다. 아래 설명은 비전문가인 일반인 초보자에게 중점을 두고 작성되었으며 워드프레스나 웹사이트 운영자의 경우 도메인을 구입하려고 이것저것 알아보고 따지는 게 싫다면 현재 사용 중인 호스팅 업체에서 도메인을 구입하는 것이 가장 편합니다. 도메인 구매 업체 선택 요령 각자의 이유로 도메인을 구매하게 되죠. 가령 티스토리 또는 구글 블로거에 개인 도메인을 입히기 위해서 구입하기도 하고 워드프레스나 회사 홈페이지 같은 웹사이트에 이용하기 위해 구입하기도 합니다. 나에게 맞는 도메인 구매 업체 선택 방법은 합리적 가격과 사용, 설정, 관리등의 편의성 및 용이성등을 따져 나에게 적합한 것을 선택해야 하는데요. 개인의 성향에 따라 중요하게 여기는 우선순위가 다르겠지만 제 경우 첫 번째가 가성비이고 두 번째가 사용 편의성입니다. 도메인의 경우 지극히 특별한 경우가 아닌 이상 업체에 따라 도메인 성능 차이라는 게 없고 설정 방법이나 관리적인 측면 또한 대동소이하다 할 수 있습니다. 도메인 가격…

2022-07-28

티스토리 소제목 꾸미기 서식, 사각형 박스 라운드 스타일

티스토리 소제목 꾸미기로 요즘 많이들 사용하는 둥근 라운드가 있는 사각형 박스 모양으로 제목을 보다 강조할 필요가 있을 때 사용하면 좋을 것 같습니다. 티스토리 소제목 꾸미기로 티스토리 서식을 이용해 개별 적용하는 방법과 CSS편집을 이용해 블로그 전체에 적용하는 방법 2가지를 설명하겠습니다. 티스토리 소제목 꾸미기 블로그 전체 포스팅의 소제목에 적용하는 방법부터 설명하겠습니다. 아래 코드를 복사해 티스토리 관리 홈 > 스킨 편집 > HTML 편집 > CSS로 이동해 복사한 코드를 편집 창 하단 빈 곳에 붙여 넣기 합니다. .contents_style h2 { margin-top: 30px; /*상단 간격*/ margin-bottom: 15px; /*하단 간격*/ padding: 15px 20px; /*내부 여백(상하 / 좌우)*/ font-weight: bold; /*글자 두겁게(불필요시 삭제*/ font-size: 22px; /* 글자크기 */ color: #ffffff; /*글자색*/ background-color: #70829a; /* 배경색 */ border-radius: 25px 5px 25px 5px; /* 라운드 크기*/ } 이제 포스팅 작성 시 제목1로 지정한 소제목은 위 이미지처럼 꾸며지게 됩니다. 그리고 글자 크기와 글자색, 배경색은 코드 옆에 표시한 주석을 보고 각자 취향에 맞게 수정해 사용합니다. 색상 코드는 HTML 색상 코드…

2025-07-14

다음 블로그 종료와 티스토리 향방

다음 블로그 종료, 카카오는 오늘 4일 다음 블로그를 9월 30일을 끝으로 서비스를 종료하고 티스토리와 통합한다는 공지를 했습니다. 티스토리 사용자로서 다음 블로그와 통합된다고 하니 왠지 마음이 불안해지네요. 다음 블로그 종료 다음 블로그는 2005년 2월 블로그 서비스를 시작해 현재까지 만 17년째 서비스 중인데요. 갑자기 서비스를 종료하고 티스토리와 통합한다고 해 좀 노랬습니다. 다음 블로그 사용자들 입장에서는 당황스럽기도 하고 앞으로 불편한 사항들이 많아 걱정스러울 것 같은데. 무엇보다 블로그 주소가 변경된 다는 문제와 그동안 쌓인 댓글과 방명록 그리고 블로그 친구, 방문 통계 등 초기화가 가장 큰 문제일 듯합니다. 2020년 5월 다음 블로그가 티스토리와 유사한 모습으로 리뉴얼되었는데요. 티스토리와 통합 시 반발을 줄이기 위한 수순이지 않았는지 의문이 생깁니다. 다음 블로그는 7월 4일 이후로 더 이상 신규 가입을 받지 않고 있으며 2022년 9월 30일 오전 중 서비스를 종료한다고 합니다. 티스토리로 이전 신청을 하지 않은 유저에게는 서비스 종료 후 백업 데이터를 블로그 계정의 이메일로 순차적 발송 예정이라고 합니다. 티스토리 이전 신청 관련 FAQ 티스토리 향방 역사 속으로 사라지는 다음…

2025-07-14

티스토리 대표이미지 지정 홈화면 카테고리 목록 썸네일

티스토리 대표이미지 의미와 원하는 이미지를 대표이지로 지정해 블로그 홈 화면 또는 카테고리 목록에 썸네일로 표시되도록 하는 방법을 설명합니다. 티스토리 대표이미지 티스토리 대표이지란 내 블로그 홈 화면과 카테고리 목록 화면에 보이는 이미지 썸네일을 말하는 것입니다. 참고 : 티스토리에서 지정한 대표이미지가 다음 검색 결과 또는 네이버 검색 결과에 썸네일로 보이는 것은 아닙니다. 어디까지나 내 블로그 내에서만 대표이미지로 사용됩니다. 다음 검색 결과에 보이는 썸네일 이미지는 몇 가지 규칙에 따라 보이게 되는데요. 포스팅 주제와 맞지 않으니 생략하고 별도의 포스팅으로 대체하도록 하겠습니다. 티스토리 대표이미지의 의미는 이제 알았으니 어떻게 지정하는 알아보도록 할게요. 티스토리 대표이미지 지정 티스토리에서 대표이미지를 지정하지 않을 경우 자동으로 본문 내 첫 번째 이미지가 대표 이미지가 됩니다. 대표이미지로 사용할 이미지를 직접 지정하는 방법은 2가지가 있습니다. 첫 번째는 본문 내 이미지 중 하나를 아래와 같은 방법으로 지정하는 것입니다. 본문에 업로드된 이미지를 마우스로 한 번만 클릭하면 이미지 위에 버튼 모양처럼 생긴 "대표"가 보입니다. 이 버튼을 클릭하면 해당 이미지가 대표 이미지로 지정됩니다. 두 번째는 포스팅 완료 후…

2025-07-14