ΛneOK v4 blog
일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.
# Side Menu
-
recentPost
-
popularPost
-
Archive
-
recentComment
Document/Tistory
Document/Tistory
-
티스토리 스킨 만들기 로그 - 두번째네이버 블로그와 티스토리의 다른 점이 설치형 유무에 따른 차이가 있습니다. 이 점 때문에 전 네이버보다는 티스토리에 더 신경을 쓰고 더 좋아합니다. 저처럼 스킨 만들기를 좋아하는 분(?)은 이 점이 좋아 티스토리에 몸답고 있나 봅니다. 아무튼 이번에도 질렀습니다. 예전부터 사용하던 아이디가 새로운 에디터로 가면서 많은 부분이 꼬이고 있어 이번에 아이디 변경과 함께 새로운 보금자리를 만들어서 좀 더 깔끔하게 단장을 해보자는 마음으로 만들고 있습니다. https://sknow.tistory.com/ Simple knowledge 간단한 지식들 sknow.tistory.com 제목 그대로 간단한 지식을 적는 블로그로 제가 알고 있는 또는 알게된 지식을 적을 보금자리입니다. 아직은 스킨 만들고 있는 중이라 오픈..Document/Tistory 2 2021. 7. 9.
-
티스토리 코드블럭에 라인번호 붙히기 (Line Number)티스토리에 글을 작성하다 보면 코드블럭에 코드를 입력하고 가독성을 높이기 위해 Highlight.js를 적용하고 있습니다. 하지만 라인번호(Line Number)가 없어 아쉬움이 있었는데 'highlightjs-line-numbers.js'를 적용하시면 라인번호도 출력이 됩니다. 긴코드에서는 장점이죠~ 그래서 이번에 적용된 부분을 정리 했습니다. 다운로드 선 적용 다운로드 : highlightjs.org/ highlight.js Version 10.3.2 Tiny tiny release, just to fix the website incorrectly not listing Javascript in the list of languages you could choose for a custom build. T..Document/Tistory 2021. 4. 10.
-
Skin v3로 변경몇 번을 수정하면서 무언가 틀어지기 시작해서 결국에는 모두 갈아서 버리고 다시 시작했습니다. 물론 디자인적이나 외형적으로는 그대로 계승을 하면서 시대의 흐름에 따라 JQuery에서 점점 JavaScript로 넘어가려고 합니다. 물론 아직 JavaScript를 잘 몰라 인터넷 광클로 찾아가면서 변경을 하니 쉽지가 않네요. 최종에는 JQuery를 쓰지 않는 것이지만 티스토리에서 사용하니 되지가 않을 것 같네요. ㅎㅎ 변화된 것들 1. 공통 전체 부분에 라운드 처리와 다크 모드 기준에 크게 색을 강조하지 않았습니다. 또한 링크색이나 기타 부분에 강약으로 조정하여 가독성이 좋도록 하였습니다. 가독성 이것 역시 답이 없을 것 같네요. 링크: 2가지 색과 다크모드와 라이트 모드의 색을 틀리게 하여 좀 더 좋게 디자..Document/Tistory 5 2021. 4. 2.
-
티스토리 스킨 v3 제작 일지(3)Size 오늘의 작업은 사이즈를 정의했습니다. 지금까지는 주먹구구식의 사이즈였다면 이번에는 4,8,12,16... 등의 기준을 잡고 작업했습니다. 그러니 예전보다 더 라인을 잡기가 쉬워지고 뭔가 모르게 작업이 잘되고 있다는 생각이 들더군요. color 이번에는 다크 모드를 먼저 신경 쓰면서 만들기로 했습니다. 예전에는 먼저 만들고 다크 모드를 짜깁기 식으로 하였는데 뭔가 부자연스러움이 있어서 이번에는 다크 모드를 먼저 생각하고 만들다 보니 조금 나아지는 것 같습니다. 그리고 색의 투명도로 색을 내니 예전보다는 색상수가 적어지는 것 같습니다. 그리고 1개의 색으로 통일하다시피 해서 그런지 예전보다는 더 통일성이 있지 않나 싶네요. v3.0 Color 100 % #ffffffDocument/Tistory 5 2021. 3. 22.
-
티스토리 스킨 v3 제작 일지(2) - dark Mode다크 모드 몇 번이나 테마를 겹치는 부분이라 '다크 모드'에 적합한 부분을 찾기가 쉽지 않네요. 이번에 한 작업은 웹 브라우저에 다크 모드 사용 시 블로그에 접속을 하면 바로 다크 모드로 접속되게 하는 부분입니다. @media (prefers-color-scheme: dark) { /* Your CSS */ } 저의 블로그는 html태그에 class로 테마가 변경됩니다. 그래서 이 부분을 어떻게 매치할까 고민하다가 위의 부분이 다크 모드라는 것을 몇 번이나 고민하고 찾고 해서 알게 되었네요. 바보같이... html{ ... light Theme } html.dark{ ... dark Theme } 아무튼 자바스크립트로 읽어 들이기만 해서 막상 해보면 몇 줄로만 가능한 부분인데 고민했습니다. let $do..Document/Tistory 2021. 3. 19.
-
티스토리 스킨 v3 제작 일지(1)이번에 버전 3(Ver 3)으로 업데이트하면서 많은 부분을 정리하고 다시 만든다고 생각에 시작한 것이 번써 1달이 훌쩍 넘어가네요. 몇 번이나 바꾸고 뒤집고 갈아서 만들다 보니 이제는 스킨의 소스가 산으로 넘어가는 것 같습니다. 그것을 방지하고자 이렇게 작업 일지를 적어 봅니다. round 이번 v3로 변경하면서 가장 눈에 띄는 부분이 라운드 처리입니다. 물론 v2도 라운드는 들어갔지만 미미해서 있나 싶을 정도였습니다. 이 라운드는 요즘 자주 사용하는 현대카드 앱이나 롯데카드 앱이나 기타 부분에서도 많이 사용해서 유행인가 싶을 정도였습니다. 그래서 이번에 과감히 사용하기로 했습니다. 다크 모드 요즘 유행이죠 야간에 눈이 편안하게 한다고는 하지만 그렇게 편안하다고 느껴지지 않아요. 하지만, 유행이라 저도 ..Document/Tistory 2021. 3. 18.
-
티스토리 스킨(미완성분) - (r5xs)백업 v2r5xs skin backup r5xs 티스토리 스킨 백업 예전에 사용한 r5xs 티스토리 스킨 부분입니다. 저에게 맞게 한 것이고 이번에 클라우드 백업하면서 나온 부분이라 사용하기에는 많은 부분이 맞지 않을 것입니다. 그냥 이런 것이 있다고 생각하시고 저처럼 이런 것을 만들었느냐고 해서 백업하는 것입니다. 위의 스크린 캡처는 그냥 skin.html파일을 실행한 스크린 캡처고요 밑의 부분은 다운로드 메뉴를 클릭하면 나오는 화면입니다. 이 부분은 외부 호스팅을 쓸려고 했고요. 링크 뒤에 '?id=' 를 사용하려는 흔적이 있습니다. 그렇게 만들려고 하다가 접은 부분입니다. 디자인 적으로는 몇 년을 사용한 스킨입니다. 지금에야 촌스러움이 있지만, 그때는 괜찮은 디자인으로 만족한 기억이 납니다. 특징일괄적인 디..Document/Tistory 2020. 11. 17.
-
티스토리 스킨(미완성분) - (the3)백업 v3.5.1the3 skin backup the3 티스토리 스킨 백업 예전에 사용한 the3티스토리 스킨입니다. 만들다가 만 스킨이라 디자인참고용으로 그냥 백업만 해 놓습니다. 몇년이 지나서 보니 무엇을 디자인 하려고 했는지 가물가물 하고해서 잠깐의 기억만 있는 부분을 적을려고 합니다. 특징 1. https://the3.tistory.com/ 부분의 새롭게 만들려는 디자인.2. the3부분의 로고 디자인 변경 3. 버전부분의 폰트 변경(Proxima Nova-하, Homenaje-상)4. 전체 디자인 색상 변경 (구형은 검정, 빨강 계열 - > 흑백) 5. 부트스트랩 -> Uikit로 변경이정도 였는 것 같습니다. 나머지는 기억이... 다운로드 v3.5.1.zipDocument/Tistory 2020. 11. 17.
-
티스토리 - html 구조티스토리 스킨을 직접 제작하려고 결심하신 분들 계실 것 입니다. 그분들에게 조금이나마 도움이 되었으면 하는 바램에 또한 티스토리 스킨을 처음 만들려고 도전했을 때, HTML 스킨 구조가 어떤건지 쉽사리 파악이 되지 않아서 다소 고생한 경험이 있습니다. (저 또한) 경험이 있어 저의 생각을 바탕으로 최대한 자세하면서 단순하게 설명해 보겠습니다. 또한 티스토리에서 제공하는 스킨 가이드 페이지 도 같이 참고하시면 이해하는데 도움이 될 것입니다.일단 까먹기 전에 적을려고 합니다.기본티스토리 구조도 다른 웹사이트와 뼈대는 같습니다. 에 ... ... ..Document/Tistory 2020. 4. 21.
-
티스토리 - NexT-Ti Skin v1 > v2로 변경Version 2.0.0 이번에 시간이 조금 남아 새롭게 시작하는 마음으로 리뉴얼했습니다. 처음부터 다시 만든다는 생각에 만들기 시작했지만 몇 번이나 접고 다시 시작하는 등 우여곡절(迂餘曲折)이 있었지만 이렇게 완성했네요. 물론 손볼 것은 많이 있겠지만 그래도 완성해서 보인다는 것이 대단하다고 생각합니다. (예전에 적은 것이지만 이 스킨은 hexo의 NexT 테마를 티스토리 버전으로 컨버전한 것입니다.) 이번에 눈에 띄게 바꾼 것은 없지만 그래도 많은 부분이 바꾸었습니다. 밑에 부분에서 예전 것에 비해 개선돼 부분을 적어 보겠습니다. 1. 링크 가장 크게 작용하는 부분인 링크 부분을 '#fa3420'에서 '#4a65f6'으로 변경하였습니다. 기존의 color은 그대로 두었습니다. 2. 폰트 변경 이것은 ..Document/Tistory 7 2020. 2. 9.