Tip 17

오디세이 스킨 편집: 단락 간격 조절하기

'엔터'와 '쉬프트+엔터'를 구분하여 글쓰기 일반적으로 Word나 한글 문서를 쓸 때 줄바꿈을 하려면 '엔터'를 누릅니다. 하지만 웹, HTML 상에서 에디터로 글을 작성할 때는 단순 줄바꿈이 아닌 단락이 나뉘게 되는데요. 엔터를 치고 타이핑을 때마다 p태그가 생성되며 의 형태로 감싸 쥔 상태로 타이핑이 들어가게 됩니다. '엔터'를 누를 때마다 이와 같은 p태그가 자동으로 추가됩니다. Word나 한글 문서를 쓸 때 단락을 나누려면 의도적으로 '엔터'를 두 번 누르곤 합니다. 웹 상에서도 동일하게 '엔터'를 두 번 누르게 되면 불필요하게 가 입력이 되게 되며 SEO 상에서는 빈 단락으로 인식하여 검색 시에 좋은 점수를 받지 못하는 데 영향을 줄 수 있습니다. 티스토리 에디터에서는 '엔터'와 '쉬프트+엔터'..

Tip 2023.11.27

오디세이 스킨 편집: 댓글에 비밀글 옵션 숨기기

불필요한 비밀 댓글 잠그기 티스토리뿐만이 아니라 네이버 블로그, 지금은 없어진 이글루스나 싸이월드 블로그에는 비밀 댓글 기능이 있었는데요. 비교적 나중에 생긴 브런치, 해외 서비스인 Ghost, Tumbler, 그 외 댓글 기능을 지원하는 서비스들은 이러한 비밀 댓글 기능이 없습니다. 누군가가 댓글로 질문을 하면 작성자나 또 다른 누군가가 답변을 하고 그것을 누군가 검색해서 보게 되면서 도움이 되는 선순환 구조를 가져야 한다고 생각합니다. 가능한 비밀글 기능을 숨기고 싶어서 오디세이 스킨 편집에서 조금 수정했습니다. 비밀글 스킨 편집 👉 HTML 편집에서 위 부분을 각주 표기 감싸 넣어주면 비밀글 버튼을 숨길 수 있습니다. 티스토리 앱에서는 막을 수 없는 비밀 댓글 작성 스킨을 수정해도 모바일 티스토리 ..

Tip 2023.10.27

오디세이 스킨 편집: 포스터 타입에서 모바일 타이틀 2줄로 변경하기

모바일 환경에서 타이틀이 너무 짧게 나오는 경우 해결 스킨편집 👉 기본설정 👉 기본 목록 스타일 👉 포스터 타입을 설정하면 모바일 환경에 경우 2개의 칼럼으로 포스팅된 글이 표현되는데요. 칼럼이 2개다 보니 가로폭이 짧아 타이틀이 너무 조금 출력되는 게 마음에 걸렸습니다. 데스크톱 환경의 경우에도 타이틀이 2줄에서 말 줄임표 처리가 되는데 모바일 환경에서는 1줄에서 말줄임 처리가 되었거든요. 모바일 환경에서 타이틀 2줄로 변경하기 /* ----- media query - mobile ----- */ @media screen and (max-width: 1060px) { .article-type-common .title { max-height: 48px; margin-bottom: 7px; font-siz..

Tip 2023.10.12

애플 캘린더로 스케줄을 계획하고 기록하기

처음에는 유튜브를 보다 보니 애플의 캘린더를 일상생활에서 활용하는 것을 보고 따라 해보자 생각했습니다. 캘린더야 회사 업무용도로 미팅에 초대할 때 주로 사용했었지 일상생활이나 개인 스케줄에 활용할 생각은 전혀 하지 않고 있었는데요. 이 참에 쉬고 있을 때 제대로 한 번 써보자 하고 시작했습니다. 처음에는 캘린더 말고 노션도 생각했지만 아이폰과 아이패드, 맥을 이미 쓰고 있는데 빠릿한 애플 순정 캘린더가 훨씬 편하겠다 싶었습니다. 그리고 노션 캘린더는 캘린더 만의 자체 기능만으로는 부족했고요. 애플의 ‘미리 알림’ 앱도 활용해 보려고 했으나 버킷리스트나 체크리스트로 사용하기에 용이하지 스케줄이나 루틴 한 일을 적는 데에 사용하기에는 적합하지 않았습니다. 캘린더는 예전부터 사용해보았지만 캘린더를 추가하고 삭..

Tip 2023.08.24

광고가 불편한 구독자가 애드블록을 끄게 만드는 방법 - Adsense

블로거인 저 또한 애드블록 유저입니다. 데스크톱 크롬 확장프로그램으로 Adblock Plus란 프로그램이 있습니다. 웹페이지가 더럽(?)지만 봐야 할 게 있어 들어가 봐야 할 경우 싹 청소해 주며 무료입니다. 모바일의 경우에는 유니콘이란 프로그램을 구매하여 쓰고 있는데요. 모바일 환경을 광고 없이 쾌적하게 만들어줍니다. 필터링이 안된 경우 직접 광고 단락을 선택하여 지워주기도 합니다. 취미로 블로그를 하면서 애드센스와 같은 광고 서비스 연동도 해보고 얼마가 벌리는 지 살펴보는 것은 생각보다 재미있는 일이었는데요. 막상 제가 광고를 설치하는 사람 입장이 되니 저조차 애드블록 프로그램을 쓰는데 누가 내 광고를 볼까 의문이 들었습니다. 게다가 최대한 광고가 블로그를 방해하지 않으면서 광고를 설치할 수 없을까에..

Tip 2023.05.04

유선 인터넷 속도가 언제부턴가 안나올 때

언제부턴가 유선 랜이 연결된 PC의 인터넷 속도가 너무 안 나온다는 생각이 들었습니다. 그래도 그러려니 버티면서 쓰다가 포맷하면 되겠지 싶었는데 유튜브 조차 버거워하는 속도라 공유기를 바꿔야 하나 생각까지 들었는데요. 그래서 구글링을 몇 가지 해보게 되었습니다. 인터넷 속도가 나오지 않을 때는 링크 속도를 확인해보라는 내용을 보고 설정 👉 네트워크 및 인터넷 👉 이더넷으로 들어가 확인해 보니 10 mbps로 찍혀있었는데요. 그래서 다운로드 속도가 1MB/s 밖에 나오지 않았던 것을 알게 되었습니다. 그래서 시도해 본 것은 3가지였습니다. 유선 인터넷 속도가 느릴 때 해볼 수 있는 것 랜선을 교체해 볼 것 공유기에 연결된 유선랜을 모두 제거해 볼 것 공유기 펌웨어 업데이트 랜선이라고 해서 다 똑같은 랜선이..

Tip 2023.04.01

블로그에 GIF 대신 움직이는 MP4 영상 넣기

곧바로 재생되는 MP4 영상 넣기 지난번 포스팅에서는 라이브포토로 GIF를 만들어 올리는 방법을 소개한 적이 있습니다. GIF는 오래된 파일 형식이고 용량 대비 표현의 한계가 있기 때문에 동영상을 '움짤'로 만들 수 있는 방법을 찾았는데요. GIF 파일을 올리는 것보다 번거롭지만 효과는 확실한 방법이 있었습니다. 참고 링크 티스토리에서 GIF대신 MP4를 이용하는 방법 이전에 움직이는 이미지 mp4로 표시하기 포스팅에서 GIF대신 MP4가 훨씬 좋은 이유를 포스팅한 적 있다. 티스토리에서 글쓰기로 GIF대신 MP4를 쓰는방법 먼저, 공식 글쓰기에서 지원하는 게 아니기 tistory.hi098123.com 구글링을 해보니 필요한 내용이 곧바로 나왔기에 바로 포스팅에 적용해 보았습니다. 동영상 파일 용량을 ..

Tip 2023.03.12

블로그 SEO와 성능을 위한 이미지 최적화하기

수고스럽지만 필요한 이미지 작업 2023년, 블로그를 다시 시작하다 보니 어느새 포스팅 다듬기가 취미 생활이 되었습니다. 옛날 포스팅도 다시 열어서 글을 고쳐 쓰거나 이미지를 수정하곤 합니다. 이미지 최적화는 검색 엔진 최적화(SEO)와 웹 페이지 성능 개선을 위해 필수적인 작업입니다. 이를 위해 이미지 용량을 줄이고, 이미지의 가로세로 비율을 조정하며, 대체 텍스트를 추가하는 등의 작업이 필요합니다. 여행 포스팅과 같이 이미지가 많이 들어가는 경우 자연스럽게 최적화가 필요해집니다. 찍은 사진을 보정만 해서 올리다 보면 용량이 커서 페이지로딩이 오래 걸릴 수 있습니다. 귀찮아서 마구 올릴 수도 있지만 조금이나마 SEO를 최적화하여 검색이 잘되도록 만들고 성능을 개선해서 중간에 이탈하는 독자를 줄일 수 있..

Tip 2023.03.10

오디세이 스킨 편집: 포스팅 타이틀 가로폭 수정하기

포스팅 타이틀의 애매한 줄바꿈 고치기 오디세이 스킨의 기본 설정은 포스팅 타이틀이 width: 780px; 로 잡혀있는데요. 짧은 제목은 상관없지만 긴 제목의 경우 애매한 위치에서 줄바꿈이 되는 듯한 느낌을 줍니다. 사이드바를 노출 설정을 한 영향이 있는 지도 모르겠습니다. 일단은 블로그의 전체 가로폭인 1020px로 수정했습니다. 티스토리 스킨편집 👉 HTML 편집 👉 CSS 탭에서 수정 개발자 도구로 확인해 보니 .box-meta 와 .title-article의 max-width가 780px로 잡혀 있어서 둘 다 1020px로 수정해 줍니다. .article-header .box-meta { position: absolute; bottom: 56px; width: 100%; max-width: 102..

Tip 2023.03.03

오디세이 스킨 편집: 타이틀 배경 이미지 고정(Fix) 시키기

포스팅 페이지를 보다 문득 타이틀 배경에 깔린 배경이미지를 스크롤과 상관없이 고정시키고 싶어졌습니다. 워드프레스, 엘리멘터를 사용했을 때는 Background 이미지에 Position을 Fix로 변경하면 간단히 되었는데요. 검색을 하다보니 티스토리 스킨 내에서도 간단히 해결할 수 있었습니다. 해당 셀렉터를 찾아서 background-attachment:fixed; 추가하기 .article-header에서 배경 이미지를 조정하는 부분을 확인 후 background-attachment를 추가해 주었습니다. /* area-view - 상세 페이지 */ /* article-header */ .article-header { position: absolute; top: 0; left: 50%; width: 100v..

Tip 2023.03.01

오디세이 스킨 편집: 사이드바와 본문 콘텐츠 가로폭 수정하기

블로그 광고 배너 시작하기 블로그에 광고 달기는 제대로 수익을 벌기 위해서 라기보다는 인터넷 배너 광고 절차가 어떠한 지 프로세스를 한 번은 경험해 보고 싶은 점이 컸습니다. 실제로 제대로 수익을 내기까지 몇 년이 걸렸다는 포스팅도 많이 보았고요. 수익을 위해서면 광고를 인터넷 기사 웹페이지 수준 이상으로 붙여야 하기 때문에 본문을 해치지 않는 선에서 간단하게 넣어 보고 싶었습니다. 애드센스와 애드핏 승인 받기 애드센스는 이미 몇 년 전에 설치를 했었는데요. 제대로 광고 집행까지 가지 못하고 블로그는 방치상태였습니다. 올해 제대로 블로그를 써보자는 생각으로 포스팅을 하고 애드센스 2차 승인을 요청했지만 2주가 넘도록 준비 중 상태에서 반응이 없었습니다. (2023-02-25 기준으로 준비됨 상태로 넘어가..

Tip 2023.02.26