PC Geek's

편하다. 그래서 모바일에서도 블로깅을 할 수 있게 되었다. 티스토리는 PC웹 새편집기에서 아직 그림편집을 지원하지 않고 업로드만 지원하는데, 모바일의 편집기 역시 마찬가지다. 그래서 모바일에서 블로깅하려면 그 좁은 화면에서 이미지편집할 수 있는 앱을 따로 하나 가지고 있어야 한다. 전화기 기본 이미지편집기는 겨우 crop정도에 잘해야 선긋기, 얼굴가리기 정도니.. 어쨌든 지금 상태로도 꽤 유용하고, 댓글알림도 해주고 해서 편한데, 티스토리 제공 스킨을 써도 뷰화면에서 모바일 레이아웃을 다 보여주지 못하는 단점이 있기는 하다. 이건 별로 불편하진 않으니 차차 나아지겠지. 그리고 버그라고 해야 하나, 모자란 부분도 있다. 버그가 생긴 부분은 PC웹으로 로그인해서 고쳐야 한다. 예를 들어, 그림업로드하다 어떤..

새 에디터에 반영되면 좋겠다 싶은 부분(구 에디터에서도 지원되지 않는 내용) 1. 예약발행할 때 날짜 시간을 직접 입력하는 창에서,구분점은 공백문자든 "."이든 ":"이든 뭐든 숫자만 아닌 1바이트 문자면 인식하게 하면 어떨까. 이건 특별히 바뀌지 않아도 상관없지만. 2. 태그입력화면에서,최근사용태그를 표시해주는 부분은 좋은 기능.그런데 전에 지원해주던, 태그 자동완성기능이 없어진 것은 아쉬움. 예를 들어, "인터넷저장공간"이라고 쳤는지 "인터넷 저장공간"이라고 쳤는지 모를 때, 자동완성 후보태그 목록이 나오면 편하다. 태그를 더 유효하게 활용해 글을 분류하는 데 도움이 된다.

*2019.12) 새 편집기도 그런지 모르겠습니다만..일단 구편집기이야기입니다. 그러니 고쳐달란 얘기는 아닙니다. 이런 식으로, 글을 쓰다가 html편집모드로 보면 태그가 막 달라붙어 복제되는 일이 있습니다. - 이미지/파일을 삽입하거나- 외부에서 텍스트를 복사해 넣을 때 그렇게 되는 것 같더군요. 다른 모 블로그 서비스의 편집기도 비슷한 현상을 보이는 걸 본 적 있어서, 아마 웹브라우저가 업데이트되며 블로그 편집기와 미스매치가 생긴 게 아닌가하는 짐작을 했습니다. 일단 내용을 보여주는 건 지금은 깨지지 않기 때문에 결벽주의자가 아니라면 무시해도 상관없습니다. html 소스가 기껏 몇십에서 몇백 바이트가 덧붙고 렌더링할 때 조금 복잡해지겠지만 설마 그 정도로 CPU를 더 먹진 않을 테니까요. (2020...

요즘은 구글 블로그도 세련되게 꾸며 잘 쓰는 분들이 많습니다. 특히 티스토리가 백업을 지원하지 않게 된 뒤로, 실력있으면 고칠 여지가 많다는 구글로 옮긴 분이 늘었다고 합니다. 저는 실력이 없어서 그런 건 꿈꾸지 못하지만. 하여튼.. 별로 고치지 않고 기본제공기능만 사용해도, 요즘은 몇 년 전처럼 허접한 블로그 레이아웃을 보여주지는 않는 모양입니다. 예를 들어 이런 블로그 https://charlychoi.blogspot.com/2020/01/kdp.html도 나름 깔끔합니다. 욕심내지 않으면 글자 그대로의 blog로서는 괜찮죠. 하지만 단점도 있는데, 몇 가지 꼽아봅니다.이 글에서는 레이아웃, 테마 불만은 적지 않습니다. 블로그 관리화면과 글쓰기 화면 로딩이 깁니다.태그(레이블)을 자유롭게 써서 많아지..

(2020년 1월 기준입니다)자신의 네이버 블로그에서 "관리" 링크를 클릭합니다. 작은 글씨지만 보일 겁니다. :) 아래 관리화면에서 "기본 설정"> "사생활 보호" 섹션 아래 블로그 초기화를 클릭하면, 아래 화면이 나옵니다. (클릭하면 원래크기) 이렇습니다. 티스토리/구글 블로거와 달리 즉시초기화는 아니고 예약. 24시간으로 정하고 신청버튼을 클릭하니, 휴대폰 SMS인증을 받아 확인받습니다. 이런 식입니다. "초기화는 안내된 예정일 새벽에 진행됩니다"라고 위에 적혀있군요. 그러니까 24시간으로 하면 다음날 새벽(새벽은 00시라는 뜻은 아닙니다). "초기화신청한 다음에 블로그는 비공개처리된다"고 위에 적혀있군요. (로그인한 사람 화면에는 보입니다) "블로그초기화"라는 것이, 빈 블로그를 표시하는지 아니면..

버튼을 누르는 순서에 따라 다르게 표현됩니다. :) 티스토리 구형 편집기의 밑줄긋기 기능에 대해 이렇게 적은 다음에, A.티스토리 구형 편집기의 밑줄긋기 기능에 대해: 밑줄을 긋고 글꼴 색상을 정하면 이렇게 됩니다. B.티스토리 구형 편집기의 밑줄긋기 기능에 대해: 글꼴 색상을 정하고 밑줄을 그으면 이렇게 됩니다. 티스토리 구형 편집기의 밑줄긋기 기능에 대해 : 이건 글꼴색을 파랑으로 한 다음에 위의 A와 같은 순서로 버튼을 누른 것입니다. 즉, 버튼누를 때는 선택된 텍스트의 글꼴색으로 밑줄을 긋는다는 말. 스킨을 건드리지 않으면 보통 아래와 같이 나옵니다(스킨에서 그걸 신경써준 경우는 제외). 하지만 지금 제 스킨에서는 밑줄 스타일을 색까지 고정해놔서 색이 적용되지 않는군요. 이런 속성적용 순서는 글꼴..

태그의 항목, 그 외 태그의 본래 속성을 다르게 바꿀 때. 줄대신 옆으로 나열되게. 예를 들어 이 블로그의 태그목록.https://www.google.com/search?q=display%3Ainlinedisplay 속성과 visibility 속성 https://aboooks.tistory.com/85https://mainia.tistory.com/3295?category=591853 CSS Layout - display: inline-block https://www.w3schools.com/css/css_inline-block.aspCSS display Property https://www.w3schools.com/cssref/pr_class_display.aspCSS: Cascading Style S..

이거 잘 만들었는데, 티스토리 블로그에 적용할 방법이 없을까..자바스크립트만으로 가능할까?back버튼을 눌러 돌아가는 URL을 변경하는 언론사 웹사이트가 많은 걸 보면 바로 앞 주소는 자바스크립트에서 구할 수 있을 것 같다.

언제나 그렇듯, 스킨을 고쳐가며 적고 적어가며 알게된 내용. font-stretch 속성은 장평, 즉 "A"나 "가"같은 글자의 가로폭을 늘였다 줄였다 한다. 하지만, 모든 글꼴에 대해 적용되지 않는다. 글꼴 파일에 정의된 폭이 있을 때만 적용되므로, 특정 웹폰트를 임베딩할 때처럼 결과가 분명할 때만 사용할 것. 출처: https://www.w3schools.com/cssref/css3_pr_font-stretch.asp(매우 유용한 곳이지만, 열어놓고 방치해두면 웹페이지가 가끔 cpu를 잡아먹는 사이트 중 하나. 오래 켜놓지는 말 것)https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch width, min-width, max-width 는 글자 ..

(2019.12.05) 공지글이 떴군요. 이달 내 다운받을 수 있도록 공개하겠다고 하며, 빠르면 다음 주말까진 올려준다고 합니다. https://notice.tistory.com/2518 출시 일정2019년 12월 9일 월요일 대상 OSAndroid, iOS 업데이트 주의사항기존 앱에서 임시 저장해 둔 글은 업데이트 시 보존 되지 않습니다. 기존 앱 내 임시 저장 글의 보존이 필요할 경우, 업데이트 전 작성을 완료해 주시거나 비공개 글로 발행을 권고합니다. 부득이하게 글을 발행 하지 못할 경우 기타 문서 백업용 애플리케이션(메모장, 워드프로세서, Html 에디터 등)을 활용하여 미리 저장하여 주시기 바랍니다. 통계와 알림을 개선하고 구독∙피드를 추가했습니다. 많은 이용자 여러분의 바람이었던, PC 작성 ..

스포카 한 산스의 저용량 서브셋은 한글 완성형을 기본으로 약간 추가된 글꼴입니다.매우 작은 용량으로 웹페이지 로딩에 걸리는 시간이 짧은 것이 장점입니다. 2015년에 공개되었으며, 무료로 사용할 수 있습니다. (전에 적은 글) 오픈소스 라이센스라고 합니다. 지금 사용 중인 스킨이 이 글꼴을 기본으로 쓰기에, 한 번 써보기로 했습니다.https://spoqa.github.io/spoqa-han-sans/ko-KR/ 2.0버전 기준으로 스포카 한 산스 KR오리지널스포카 한 산스 KR서브셋 (매우 가벼운 - 용량이 작다는 - 글꼴은 이것입니다)스포카 한 산스 JP오리지널스포카 한 산스 JP서브셋 모두 다운받으면 140MB정도(압축풀면 270MB)가 되고, KR서브셋만 받으면 4.7MB정도입니다. 그 중 레귤러..

티스토리 스킨에 들어가는 이미지와 배너를 편의상 블로그글에 올려놓고 사용할 때, 특히 http주소로 IMG, url()에 넣어둔 경우에는 그냥, '안전하지 않다'며 웹브라우저가 주소창에 느낌표를 띄우는 게 요즘 기본인 듯. 문득 보니 내 블로그에도 붙어있다. 아래는 Mozilla Firefox. "더 알아보기"를 클릭하면 아래 링크: Firefox의 혼합 컨텐츠 차단https://support.mozilla.org/ko/kb/mixed-content-blocking-firefox?redirectlocale=ko&as=u&redirectslug=how-does-content-isnt-secure-affect-my-safety&utm_source=inproduct "더 보기"를 클릭하면 어떤 이미지가 htt..

박스-쉐도우(box-shadow): 박스에 그림자나 비대칭두께 선, 장식을 넣을 때.그라데이션(계조)넣기 됨. https://developer.mozilla.org/ko/docs/Web/CSS/box-shadowhttps://www.google.com/search?q=box-shadow :visited selectorhttps://www.w3schools.com/cssref/sel_visited.asphttps://www.google.com/search?q=css+%3Avisited 질문)id (#)와 class(.)의 차이는?예를 들어, id는 매크로, class는 서브루틴이란 식으로 이해해도 되나?단순히 그런 건 아님. https://thrillfighter.tistory.com/487style > ..

엘리멘트 자리와 패딩, 마진을 지정할 때 DIV가 먹히지 않으면 table로 둘러치면 먹히는 경우가 있음. CSS Tableshttps://www.w3schools.com/css/css_table.asp width, height borderborder-collapse, border-spacing padding text-align, vertical-align color background-color empty-cellstable-layout 배경이미지https://aboooks.tistory.com/162background-imagebackround-repeatbackground-positionbackground-size (쓸만한 게 있다) background (위의 백그라운드관련 여러 속성을 한 번에 지..

초보거나 오랜만에 건드릴 때 착각할 수 있는 부분. 티스토리 관리자 화면에서 스킨 편집을 누르면 스킨편집 화면으로 들어가는데, 여기서 알다시피 화면 왼쪽은 미리보기, 오른쪽은 편집창입니다. 편집창은 HTML 탭, CSS 탭, 파일업로드 탭이 보이고, 오른쪽 끝에 "적용" 버튼이 보입니다.적용 버튼은 수정한 내용이 있으면 저렇게 까만바탕으로 활성화됩니다. 여기서, "적용"버튼을 누르면 현재 웹브라우저가 로드한 skin.html 과 style.css 모두를 저장합니다.지금 보이는 화면이 HTML 탭이라도, 이 화면이 마지막 로딩(또는 리프레시)됐을 때의 CSS탭도 저장해버립니다. HTML탭을 편집하다가 저장하지 않고 CSS탭을 클릭해 CSS화면을 열거나, CSS를 편집하다가 저장하지 않고 HTML탭을 열면 ..

그 둘 다 블로그에 메타코드를 넣어주는 방식으로 쓸 수 있는데, 티스토리에서는 더 편하게, 플러그인을 준다. 완전히 별 생각없이 블로그에 글쓴다면 굳이 알아둘 필요는 없지만, html, css공부와 블로그 사이트가 어떻게 동작하는 지 공부할 겸 겸사겸사 기능과 서비스를 시험하는 용도로 블로그를 운영한다면, 해봐서 손해볼 것 없다. 티스토리의 플러그인 설명이다: https://notice.tistory.com/2265 이런 건 나쁘게 말하면 방문자집단을 익명화해 일종의 개미집단으로 간주해 행동패턴을 연구하는 데 도움을 주는 그런 툴이란 느낌이다. 꽤 상세한 정보를 주지만, 개인블로거에게는 그다지 도움이 안 된다. 사람들이 일 주일 중 무슨 요일에 많이 방문하는가, 또는 주방문경로는 어디인가 정도는 요즘은 ..

블로그 스킨을 반응형으로 바꾼 김에 그렇게 해보았습니다. 관리자 화면, 꾸미기 > 모바일 항목으로 들어가서, 티스토리 모바일웹 자동 연결을 "사용하지 않습니다." 선택. PC용 웹주소 https://pcgeeks.tistory.com/13526모바일 웹주소 https://pcgeeks.tistory.com/m/13526 저 설정을 꺼도 모바일 웹주소에 접속할 수 있습니다. 그래서 저건 모바일 단말기에서 접속했을 때 티스토리 서버가 모바일 주소로 리다이렉션해줄지를 정해주는 옵션같습니다. 티스토리는 모바일웹 연결로 보여주는 기본 스킨이 몇 가지 장점이 있습니다. 1) 플러그인 중에 모바일에서만 동작하는 것이 있습니다.2) PC화면용으로 골라 놓은 기본 스킨에서는 제공하지 않고, 모바일에서만 보여주는 편리한 ..

반응형스킨으로 넘어와서 의아했던 것이, 티에디션 대문 화면은 반응형스킨에 연동되지 않는 것이었습니다. 몇 가지 꽁수를 찾아내긴 했는데 만족스럽지 못하군요. 티스토리 스킨 편집 화면에 들어가면 대문화면을 고를 수 있는데, 반응형 스킨일 때는 윈도우 창을 옆으로 길게 늘여놓고, 미리보기창(왼쪽 블로그창)의 창너비를 조절해가며 바뀌는 것을 확인할 수 있습니다. 티스토리 편집화면의 미리보기는 그다지 만족스럽지 못하고 곧잘 오동작하지만, 그래도 이런 용도로는 쓸 수 있습니다. 이런 식으로, PC, 태블릿, 폰화면 폭을 정해 주기도 합니다만 몰라도 별 상관은 없는 듯. 오른쪽에 이렇게, "최신글", "티에디션", "테터데스크" 이렇게 있습니다.좀 재미있는 현상은, 티에디션은 화면폭이 바뀌어도 그대로지만,훨씬 오래된..

전에도 적은 적 있을 텐데, 이번에는 반응형 #2 스킨에서 해본 것이다.예를 들어, 티스토리 관리화면의 사이드바항목에서, 사이드바에 태그 클라우드를 넣었다고 하자.그런 다음 skin.html에서 태그 클라우드 코드를 복사해, 본화면에 넣으면 본화면에는 태그 클라우드가 안 나온다. skin.html의 사이드바 부분에서 태그 클라우드 코드를 지워도 마찬가지니까 그건 지우지 말자.이때 관리화면의 사이드바 항목에서 태그 클라우드아이템을 사이드바에서 빼주고 적용버튼을 누르면, 메인 화면에서 원하는 부분에 집어넣은 태그 클라우드 코드가 보일 것이다. 단, 간단한 스킨에서는 이렇게만 해줘도 그럭저럭 보이지만,조금 복잡한 스킨에서는 다단계로 스타일을 잡아놨을 테니까, 레이아웃이 깨져나온다.이럴 땐 skin.html의 ..

.area_view blockquote 항목을 style.css 에서 찾아 적당히 고쳐주면 됩니다.예를 들어, 백그라운드 색을 정해주면 이렇게 보입니다. 그 외, 인용박스의 배경이미지라든가, 인용부호로 쓸 만한 특수문자를 추가할 수도 있습니다.

1. 티스토리는 앱을 만들 때, 구버전 호환성은 체크하지 않는 모양.안드로이드 4.4 킷캣에서, 구글 플레이스토어에서 티스토리 앱을 검색해 설치하는 데는 지장이 없고, 구버전 호환성 알림도 없으며, 애초에 티스토리에서 앱을 퍼블리시할 때 버전 호환성을 고려한 것 같지도 않다. 어쨌든 설치 후 실행하면 아래와 같다. 한 번도 실행해보지 못했다. 이걸로 설명 끝. 2. 네이버 앱은 개편 후 여러 가지 단점이 생겼는데 그 중 하나가 Airs라는 물건. 시도 때도 없이 튀어나와서 불편하게 한다. "한 달 동안 보지 않기"라는 게 있긴 하지만 아예 안 보면 안 되겠냐?

블로그 백업, 가져오기 또는 삭제https://support.google.com/blogger/answer/41387 블로그 백업은 설정>기타 메뉴를 통하면 되고그 외 테마 백업은 따로 블로그 메뉴에서 할 것. 사진 등 이미지는 저걸로 백업되지 않음. 그건 '내 데이터 다운로드'(구글 테이크아웃)에서.https://takeout.google.com/settings/takeout?pli=1 이 항목에 대한 설명https://support.google.com/accounts/answer/3024190?hl=ko

1. 각주 말풍선 몇 년 전에 쓴 글이 둘 있고, 그때 코코넛냠냠님의 도움말을 더해 스킨에 어울리게 한 것이 지금 이 블로그 각주다. 과거글 참고https://pcgeeks.tistory.com/12164https://pcgeeks.tistory.com/10368 지금 이 블로그에 적용한 코드는 이렇다: skin.html ( 사이에) ※ 일부 스킨에서는 동작하지 않거나 레이아웃이 깨져 추가로 손봐야 할 수 있음. 이것이 기본이다. 티스토리 블로그의 각주 배경이미지는 포스트잇같이 생긴 풍선말칸인데, 이것은 세로로 계속 늘어나며 가로로는 배경이미지폭으로 정해져 있다. 그래서, 각주말풍선폭을 화면대비 %로 하거나 지정된 크기보다 넓히면 배경이미지가 반복해 패턴식으로 깔리거나 깨지는 식으로 깔끔하지 않게 됨. ..

대화면에서 검색창을 원하는 만큼 늘이는 부분은 아직 하지 못했다. 중화면과 소화면에서는 딱히 손볼 게 없다. 검색 돋보기를 클릭하면 나오는 창에 보이는 기본값은 placeholder 라는 속성으로 지정돼 있다.placeholder는 HTML5에 생긴 것이라고. 활용법 참고: https://www.codingfactory.net/10755 이 스킨에서 기본값은 'Search' 인데, 그걸 '검색어 입력'으로 바꿨다. skin.html

카테고리나 사용자 링크목록에 쓰기구글검색: css box expandw3schools.com How TO - Collapse/ Create A Collapsible/ Animated Collapsible (Slide Down)/ Add Iconshttps://www.w3schools.com/howto/howto_js_collapsible.asphttps://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible여기서 시작. 카테고리 링크를 수동으로 추가하는 것은 쉽다. 이전에도 알고 있었던 방법. 저것은 보다 편하게 한 것으로, 저 스크립트를 변용하면 사용자가 html을 추가해주는 배너에 임의로 접히고 펼쳐지는 목록을 편하게 만들 수 있다.하지..

전에도 지나가며 적었을 텐데, 티스토리 카테고리 기능은 공개, 비공개를 지정할 수 있습니다. 공개카테고리는 언제나 보이는 것이고, 비공개카테고리는 로그인해야 보이는 것입니다.관리목적이나 개인적인 용도로 사용하는 비공개글을 비공개카테고리에 넣어둘 수 있습니다. 단, 비공개카테고리에 들어간 글이라 해도 글 자체 설정이 공개면 공개글이므로 주소를 직접 입력해 아무나 볼 수 있습니다. 따라서, 남에게 보여줄 글이 아니거나 작성 중인 글이라면 비공개상태로 저장해야 합니다.덧붙이면, 티스토리나 구글 블로그나, 비공개글로 저장해도 비공개가 되는 건 기본적으로 텍스트고, 이미지는 공개속성이 되거나 거기에 준하게 관리된다고 보면 될 겁니다. 그래서, 블로그에 비공개글로 개인사생활을 적는 건 그다지 권할 만한 습관은 아닙..

1. 블로그 첫페이지 로딩이 된 다음 왼쪽에- 그림을 넣을 때는 스킨 편집화면으로 가서 글목록갯수메뉴 바로 밑에 보이는 그림파일 업로드.- 단순히 색을 바꿀 때는 아마 이거. 나중에 확인해볼 것. style.css 카테고리와 메뉴를 호출하면 그 바탕화면색은, skin.html 2. 글 본문 글자 크기와 글자색 만약 이렇게 했는데 바뀌지 않는 글자가 있다면(특히 몇 년 전, 옛날 스킨, 옛날 편집기로 적은 과거글), 그 위에 있는 .area_view 에도 설정을 넣어준다. 3. 본문 글자 크기를 키웠기 때문에,본문 하단에 카테고리의 다른 글 보기 플러그인이 표시해주는 글자 크기도 키웁니다.테두리선색을 바꾸고, 여백을 넣고, 그러면서 글씨를 키웠으니 테이블도 키우고, 레이아웃이 깨지지 않게 몇 가지 고쳐준 ..

메타태그는 스킨을 직접 수정하지 않아도 되게 해주는 것이니까 편리하게 해주는 쪽이고 메타태그를 자주 수정하진 않으니까 없어도 별 지장은 없지만, 코드블럭은 이쪽 내용으로 블로깅하는 사람에게는 없으면 번거로운 것. https://notice.tistory.com/2483 지금은 안 쓰지만, Syntax Highlight은 언제 쓰게 될 것 같아 체크.

skin.html 파일과 style.css 파일을 편집하기 전에 주의: 1. 고치기 전에 스킨과 스타일 파일 편집창을 열어 ctrl-a 로 전체선택해 ctrl-c 로 복사한 다음, 윈도우 메모장을 열어 붙여넣기할 것. 그래서 skin.2019-10-22-1.txt 라는 식으로 저장할 것. 고치다 스킨이 깨졌는데 뭐때문인지 모르면 그걸로 원상복구한 다음 재시도. 다 고친 다음에도 그날의 완성본 파일을 같은 방식으로 다른 이름으로 백업. 2. 편집은 티스토리의 편집화면에서 해도 무방하지만, 은근히 불편하고 단축키가 다르게 먹기도 하기 때문에, 자기 컴퓨터에서 손에 익숙한 편집기에 붙여넣어 거기서 고친 다음에 티스토리에 붙여넣기하고 적용하는 것도 괜찮음. 1. 블로그를 깔끔하게 보이기 위해 본문 퍼블리시 일시..

아래와 같은 식입니다. 노랑색 동그라미친 X표 버튼은 원래 없었죠. 기본 스킨에선 오른쪽에만 있습니다. 내비게이션 화면이 닫혀 있을 땐 그 자리가 내비게이션 화면을 여는 버튼입니다. 그래서 더블클릭하면 열었다 닫았다가 됩니다. 화면을 연 다음 닫을 때 커서를 움직일 필요가 없습니다. skin.html에 한 줄 추가해주면 됩니다. 클래스를 새로 만들진 않았고 그냥 자리만 옮겨주었습니다.style.css는 건드리지 않았습니다. 해당하는 부분: 그런데 이렇게 하면, 화면폭이 줄어들 때 반응형 화면에서 보이는 엘레멘트와 새로 집어넣은 X표가 겹치가 됩니다. 그래서 그 부분을 X표의 오른쪽으로 조금 밀어 고쳐줍니다.하지만 여기까지 해놓고 보니 화면폭을 바꿀 때 예쁘지가 않고, 됐다 안됐다 해서, 완성은 아니고 일..