Project Record

공부한 내용을 정리합니다
Project Record/Project

Notion + Next.js blog starter kit 사용기

2022년 10월 30일, 그러니까 개발 관련 지식이 거의 없었던 시절의 기록이다. 지금은 이런저런 편의성 때문에 다시 티스토리로 돌아왔지만 다시 정적 사이트 생성기를 이용한 블로그 만들기를 시도하고 있다. 지금 시점에서 보면 얼마나 우당탕탕 좌충우돌했는지 재미있는 (..) 기록. 사건의 발단 카카오 서버 문제로 티스토리가 며칠간 제대로 표시가 안 되는 오류가 있었다. 티스토리가 그들에게 얼마나 뒷전인지 깨닫고 ㅠㅠ 지금까지 마크다운 문제로 소소하게 불편했기에 이참에 티스토리를 탈출하여 다른 곳에 블로그를 만들고자 하는 결심을 하게 되었다. 그러다가 정말 우연히 react-notion-x로 직접 만들었다고 써있는 태호님의 페이지 https://taeho.io/ 를 보고 감동했다. “노션을 웹페이지로 (o..

Project Record/Customize Tistory

티스토리 hELLO 스킨에 달력 추가하기

아무래도 폰트 크기가 제각각인게 거슬려서 오디세이를 포기하기로 했다.. 예쁜 hello 스킨도 발견했고! 그러나 오디세이 스킨에 있는 달력을 너무 쓰고 싶었기에 방법을 찾아보았다. 🔍달력 구조 알아보기 우선 오디세이 스킨의 HTML에서 어떤 부분이 달력인지 찾기 이 부분이다. (2023.01.23 기준 티스토리에서 설정을 바꾸었는지 티스토리 치환자를 넣으면 달력이 본문에서도 그대로 출력되는 문제가 있어서 부득이하게 캡쳐로 대체하였다. 코드 안에서도 달력 자체로 출력되는 건 충격적이다ㅠㅠ) 아래의 블로그를 참고하면 달력 스킨의 구조와, css 정보를 알 수 있다 Section 23 - 티스토리 반응형 스킨 만들기 - [사이드바] 달력 이번 시간에는 "사이드바 달력" 모듈입니다. 제 경험상 티스토리 블로그에..

Project Record/Customize Tistory

티스토리 오디세이 스킨 소소하게 업그레이드하기

1. 디자인을 소소하게 업그레이드하기 제목과 본문 사이에 줄 넣기 그렇다 나는 아직 아티클 헤더와 와까리아우하지 못했다. 하지만 와까리아우하지 못한 게 뭐 어떠냐! 어차피 겉모습만 그럴듯하게 나오면 된다! 그래서 그냥 아티클뷰에다가 탑을 줘버렸다. .article-view { margin-bottom: 12px; word-break: break-word; margin-top: 45px; padding-top: 45px; border-top: 1px solid #efefef; } 아랫쪽에 2px 줄 넣기 이제 본문 아랫쪽에도 줄을 넣어보았다. 사실 아티클뷰 하단에 넣고 싶었는데 왜인지 줄이 생기지 않았다 (아마 마진 패딩의 특성 차이로 추측됨) 그래서 그냥 footer박스 자체에 위쪽 마진 패딩 주고 보더..

Project Record/Customize Tistory

티스토리 오디세이 스킨 심플하게 만들기

개인용으로 쓰는 블로그는 티스토리에서 제공하는 오디세이스킨을 쓰고 있다. 오로지 개인 기록용으로만 쓸 거라 이것저것 필요없는 기능이 있어서 제거 위주로 수정해보았다. 지우자! 렛츠 display : none 1. 사용하지 않는 기능 없애기 방법 : 대충 개발자 모드로 들어가서 해당 부분을 찾는 다음 display : none을 추가해주었다. 혹시 몰라 !important도.. 관련 사이트 버튼 없애기 : box-site #footer .box-site { display: none !important; } 공감 버튼 등등 없애기 : postbtn .container_postbtn { display: none !important; } 상세페이지 댓글 없애기 : article-reply /* article-r..

Project Record/Customize Tistory

티스토리 오디세이 스킨 폰트 수정하기 em, list

css를 얼마 만에 만져보는지 모르겠다.. (아련) 티스토리 구조도 잘 모르겠고 알쏭달쏭함. 이 오디세이 스킨 본문2가 기본으로 설정되어있는 듯한데 그게 너무 작길래 본문1 만큼 사이즈를 키우고 싶었다. 나는 성격상 매번 본문1로 지정할 사람이 못 되기 때문이지! 결과는 (일단) 성공! css에 구글 검색으로 걸린 아래의 코드를 붙여넣기했다. /* 포스팅 본문 폰트 사이즈 - 본문1 */ #tt-body-page p[data-ke-size='size18'], p[data-ke-size='size18'] { font-size: 1.2em; } /* 포스팅 본문 폰트 사이즈 - 본문2 */ #tt-body-page p[data-ke-size='size16'], p[data-ke-size='size16'] {..