윈도우환경에서 ATOM을 쓰며 생긴 이슈들을 이 포스트에 지속적으로 업로드할 예정이다. ⚙️초기 설정 1. 자동 줄바꿈 setting -> editor -> soft wrap 체크 아래쪽에 있다. 2. 유용한 플러그인 인스톨 emmet : 필수툴. 자동완성 기능이 좋았다 atom-beautify : 코드를 예쁘게 정리해준다. 사용법 : 단축키 ctrl+alt+b autoclose-html : HTML태그를 자동으로 닫아준다 minimap : 내비게이터 open-in-browser : 브라우저에서 파일을 바로 열도록 해준다. 사실 이게 기본으로 장착되어 있지 않아서 당황했다.. pigments : 색을 직관적으로 표시해준다 color-picker : 컬러피커가 생겨서 색상 넣을 때 편하다 🔧 문제해결 1...
아무래도 폰트 크기가 제각각인게 거슬려서 오디세이를 포기하기로 했다.. 예쁜 hello 스킨도 발견했고! 그러나 오디세이 스킨에 있는 달력을 너무 쓰고 싶었기에 방법을 찾아보았다. 🔍달력 구조 알아보기 우선 오디세이 스킨의 HTML에서 어떤 부분이 달력인지 찾기 이 부분이다. (2023.01.23 기준 티스토리에서 설정을 바꾸었는지 티스토리 치환자를 넣으면 달력이 본문에서도 그대로 출력되는 문제가 있어서 부득이하게 캡쳐로 대체하였다. 코드 안에서도 달력 자체로 출력되는 건 충격적이다ㅠㅠ) 아래의 블로그를 참고하면 달력 스킨의 구조와, css 정보를 알 수 있다 Section 23 - 티스토리 반응형 스킨 만들기 - [사이드바] 달력 이번 시간에는 "사이드바 달력" 모듈입니다. 제 경험상 티스토리 블로그에..
💡 윈도우환경에서 VSCode를 사용하며 생긴 이슈들을 이 포스트에 지속적으로 업로드할 예정 첫 화면에서 튜토리얼(Get start with VS Code)을 안내하는데, 이 튜토리얼을 따라해보길 추천한다. Visual Studio Code Tips and Tricks 에서 모든 기능들을 안내하고 있다. JavaScript in VSCode 소개 페이지처럼 TOPIC를 눌러보면 각 언어별로 VSCode에서 제공하는 편의 기능(IntelliSense 등)을 볼 수 있다. Commit & Push 왼쪽 버튼에서 간단하게 커밋과 푸시가 가능하다. 스테이지에 올라간 항목도 가시적으로 확인 가능하기에 편리하다. ⚙️Tips and Tricks 복수의 폴더 열어놓고 작업하기 EXPLORER탭에서 우클릭 → Add ..
1. 디자인을 소소하게 업그레이드하기 제목과 본문 사이에 줄 넣기 그렇다 나는 아직 아티클 헤더와 와까리아우하지 못했다. 하지만 와까리아우하지 못한 게 뭐 어떠냐! 어차피 겉모습만 그럴듯하게 나오면 된다! 그래서 그냥 아티클뷰에다가 탑을 줘버렸다. .article-view { margin-bottom: 12px; word-break: break-word; margin-top: 45px; padding-top: 45px; border-top: 1px solid #efefef; } 아랫쪽에 2px 줄 넣기 이제 본문 아랫쪽에도 줄을 넣어보았다. 사실 아티클뷰 하단에 넣고 싶었는데 왜인지 줄이 생기지 않았다 (아마 마진 패딩의 특성 차이로 추측됨) 그래서 그냥 footer박스 자체에 위쪽 마진 패딩 주고 보더..
개인용으로 쓰는 블로그는 티스토리에서 제공하는 오디세이스킨을 쓰고 있다. 오로지 개인 기록용으로만 쓸 거라 이것저것 필요없는 기능이 있어서 제거 위주로 수정해보았다. 지우자! 렛츠 display : none 1. 사용하지 않는 기능 없애기 방법 : 대충 개발자 모드로 들어가서 해당 부분을 찾는 다음 display : none을 추가해주었다. 혹시 몰라 !important도.. 관련 사이트 버튼 없애기 : box-site #footer .box-site { display: none !important; } 공감 버튼 등등 없애기 : postbtn .container_postbtn { display: none !important; } 상세페이지 댓글 없애기 : article-reply /* article-r..
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'] {..
