워드프레스 재사용 가능 블록

워드프레스 재사용 가능 블록(서식 관리)

워드프레스 재사용 가능 블록, 티스토리에서는 서식 관리라고 하죠. 반복적으로 사용하는 것을 서식 화해서 필요할 때 불러와 사용할 수 있어 편리한데요. 간략하게 "재사용 가능 블록" 사용 방법을 알아보겠습니다. TIP 워드프레스는 각 문단을 비롯해 테이블, 리스트, 이미지 등 각각이 하나에 블록단위로 이루어진 블록들의 집합이라고 생각하시면 이해가 편할 것 같습니다. 워드프레스 재사용 가능 블록 티스토리는 관리자 페이지 메뉴에 "서식 관리"가 있지만 워드프레스는 관리자 페이지에 "재사용 가능 블록"으로 접속할 수 있는 링크가 별도로 있지 않습니다. "재사용 가능 블록" 페이지로 접속하려면 본문 글 쓰기 에디터에서 이동하는 방법과 아래 주소를 이용해 바로 접속하는 방법이 있습니다. 재사용 가능 블록 바로가기 주소 https://도메인주소/wp-admin/edit.php?post_type=wp_block 본문 글 쓰기 에디터에서 이동하려면 상단 메뉴 오른쪽 끝에 옵션 아이콘을 클릭 후 "재사용 가능한 블록 관리"를 클릭하면 바로 이동됩니다. "재사용 가능 블록" 관리 페이지로 이동되면 상단에 "새로 추가" 버튼을 클릭해 재사용 블록을 추가할 수 있습니다. "재사용 가능 블록"은 본문 글 작성 중에도 추가할 수 있는데요. 해당 블록을 클릭하며 상단에 메뉴 바가 나타나는데요 오른쪽 끝…

2022-09-19
티스토리 접은글 펼침으로

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

티스토리 접은글 기본 값을 펼침 상태로 변경하는 방법입니다. 기본 값은 닫힘 상태로 "더보기" 문구를 클릭해야 숨겨진 부분이 펼쳐지게 됩니다. 간단하게 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 이하에서는 작동되지 않습니다.

2024-12-07
크롬 다운로드 폴더 변경

크롬 브라우저 다운로드 폴더 위치 변경 방법

크롬 다운로드 폴더 변경 방법입니다. 크롬 브라우저에서 다운로드한 파일의 기본 위치가 불편해 바탕화면으로 경로를 변경해 보았습니다. 크롬 다운로드 폴더 변경 크롬 브라우저에서 다운로드를 하면 기본 적으로 C:\Users\사용자\Downloads에 파일이 위치하게 됩니다. 보다 찾기 쉽고 관리하기 편한 경로로 변경해 보겠습니다. 1. 크롬 브라우저를 열고 상단 툴바 오른쪽 끝에 있는 아이콘을 클릭 후 "설정"을 선택합니다. 2. 설정 화면으로 이동되면 오른쪽 메뉴에서 "다운로드"를 선택합니다. 3. 다운로드 설정창이 열리면 "변경"버튼을 클릭합니다. 4. 위도우 탐색 창이 열리면 원하는 경로를 선택 후 하단 "폴더 선택"버튼을 클릭해 줍니다. 여기서는 "바탕 화면"을 선택해 보았습니다. 5. 조금 전 선택한 경로로 위치가 변경된 것을 확인할 수 있습니다. 6. 선택 사항으로 다운로드 전 파일 저장 위치를 결정하고자 한다면 "스위치"버튼을 클릭해줍니다. 이상 크롬 브라우저 다운로드 위치 변경 방법을 알아보았습니다.

2022-09-10
화면 캡처 프로그램 Lightshot

화면 캡처 프로그램 추천 스크린샷 도구

화면 캡처 프로그램 추천, 컴퓨터 화면과 브라우저 화면을 캡처 후 간단한 편집까지 즉시 할 수 있는 무료 화면 캡처 도구인 'Lightshot (스크린샷 도구)'을 소개합니다. 단순히 캡처된 이미지만 제공하는 것이 아니라 화면 캡처와 동시에 이미지에 글자를 입력하거나 화살표 표시, 사각형 박스, 선, 마커, SNS 공유, 프린트 등 다양한 도구들을 제공하고 있어 2차 가공 없이 편집된 이미지를 즉시 사용할 수 있습니다. 화면 캡처 프로그램 Lightshot Lightshot 화면 캡처 프로그램은 무료로 크롬 브라우저 확장 프로그램과 위도우와 맥OS, 우분투 등 데스트탑에 설치해 사용할 수 있습니다. 우선 설치를 위해 Lightshot 홈페이지로 접속 후 상단에 "Download Lightshot for free" 버튼을 클릭해 줍니다. PC에 설치할 경우 나열된 운영체제의 "install" 링크를 클릭하면 다운로드가 진행됩니다. 설치 방법은 특별한 것이 없으니 생략합니다. 크롬 브라우저에 확장 프로그램으로 추가 할 경우 'install' 링크를 클릭하면 크롬 브라우저의 웹스토어 Lightshot 으로 이동됩니다. "chrome에 추가" 버튼을 클릭 후 팝업 창이 나타나면 "확장 프로그램 추가"를 선택해 줍니다. 추가로 브라우저 툴바에 고정하려면 툴바에 확장 프로그램 아이콘을 클릭…

2022-09-08
input type number 화살표 제거

Html input type number 화살표 제거(스핀 버튼)

Html input type number 화살표 제거, input 태그 중 숫자만 입력할 수 있는 type number에 표시되는 스핀 버튼 화살표를 CSS를 이용해 제거하는 방법입니다. 기본 적으로 넘버 타입 인풋은 입력 창에 마우스를 올리거나 포커스가 되면 오른쪽에 스핀 버튼이 표시됩니다. 표시된 스핀 버튼의 화살표를 클릭해 숫자를 증감시킬 수 있어 편리하지만 때론 숨겨야 할 때도 있어 제거하는 방법 알아보았습니다. input type number 화살표 제거 CSS를 이용해 화살표 표시를 제거하는 방법으로 아래 코드를 이용할 수 있습니다. /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } 크롬 브라우저와 사파리, 엣지, 오페라, 파이어 폭스까지 모두 화살표 표시가 제거된 것을 확인했습니다.

2022-09-08
티스토리 크롬 브라우저 오류

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

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

2024-12-07
티스토리 Square 스킨

티스토리 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은 모바일에서 위치입니다. 기본 위치가 마음에 들지 않는 다면 숫자를 수정해 주세요.

2024-12-07
서치콘솔 메타태그 찾기

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

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

2022-08-04
티스토리 본문 줄 간격 조정

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

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

2024-12-07
티스토리 본문 줄 간격

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

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

2024-12-07