지원되지 않는 브라우저입니다
blogImage
Marshall K
티스토리 스킨 제작하려고 블로그를 만들어서 채워 넣을 글을 쥐어짜느라 주제가 우왕좌왕하는 블로그

About

傑吾
Marshall

97년 10월에 출생하였습니다.
걸오라는 호는 어머니께서 주신 호입니다.
Marshall이란 이름은 중학생 시절부터 좋아하던 래퍼인 에미넴의 본명에서 빌려 온 이름입니다. 여담이지만, Mar이나 Shall발음 모두 한국어엔 없는 발음이라 마르쉘, 마셀 등등 굉장히 다양하게 불립니다만, 정확한 발음은 '마셜'에 가장 가깝지 싶습니다.
물론 어떻게 읽으시건 크게 신경을 쓰진 않습니다.

About blog

우리는 살면서 수많은 경험을 하게 됩니다. 세월이 지나며 IT와 관련된 기술은 비약적으로 발전하였고, 종이에 글로만 일상을 기록하고 그것을 되짚어보기엔 우리의 일상은 멀티미디어들로 가득합니다.

그래서 글로는 그 경험을 온전히 기록할 수 없는 것들을 기록하기 위하여 이 블로그에 짬이 날 때마다 글을 끼적입니다.

Writing

어릴 적부터 독서를 즐겼습니다.
동화에서 시작해, 각종 소설로 확장됐고, 철학가의 사상이 담긴 책들도 즐기기 시작했습니다.
수많은 글들 속에서 '나'를 발전시키는 과정에 재미를 느꼈습니다.
고등학생이 된 후에는 글을 쓰는 재미에 빠져 소설을 한 권 집필했고, 성인이 된 선물로 어머니께 만년필을 선물 받은 후에는 손글씨를 쓰는 재미에도 빠졌습니다.

Gaming

아마 저 외에도 수많은 사람이 취미로 즐길 '게임'이란 분야입니다.
어린 시절 포켓몬스터 금, 스타크래프트를 시작으로 게임을 즐기기 시작했습니다.
그 후 닌텐도라는 콘솔에 빠졌고, 타이틀 중에서도 젤다 시리즈와 포켓몬스터 시리즈에 큰 애정을 갖게 되었습니다.
이후 Left 4 Dead 2, League of Legends 등을 시작으로 PC 게임에 다시 발을 들이게 되었고, 오버워치, 스타크래프트 2, Osu!, 마인크래프트 등으로 폭을 넓혔습니다.

가장 오랫동안 즐긴 게임은 Mojang의 Miencraft입니다.
중학교 1학년 쯤 친구의 권유로 시작해, 맵들을 만드는 재미에 푹 빠졌습니다. 당시 운영하던 네이버 블로그는 평균 투데이가 3만을 웃돌았을 정도로 많은 유저들의 사랑을 받으며 활동하다, 최근에는 혼자 플레이하거나 지인들과 즐기는 용도로만 플레이 중입니다.

Web Designing

우연한 계기로 홈페이지를 디자인해본 뒤, 웹페이지를 만드는 취미가 생겼습니다.
미흡한 실력으로 티스토리 스킨을 만들어 배포 중입니다.
17년 겨울에 시작해 정보를 공유할만한 단계까지 오르는 목표로 달리다가, 이젠 어느 정도 그 목표에 도달하지 않았나 싶습니다. Fastboot 등과 같은 여러 사람이 만족하면서 쓸만한 스킨을 만드는 게 2차적인 목표입니다.

Contact

티스토리 반응형 스킨 [Summer Nights] 1.4 배포
글자 크기 조절하기

최신 버전 업데이트


https://marshall-ku.tistory.com/178





다운로드

Summer Nights 1.4.1.3 - Cool Summer.zip

banner.zip



Summer Nights 1.4.1.3 - Fruity Orange.zip

banner.zip



Summer Nights 1.4.1.3 - Lovely Heart.zip

banner.zip



Summer Nights 1.4.1.3 - Snowy Snow.zip

banner.zip



스킨 내부의 저작권과 관련된 문구는 수정 및 삭제하지 않으셨으면 합니다.

이 스킨은 인터넷 익스플로러와 완벽하게 호환되지 않습니다.


완전히 무료로 제공되는 스킨이지만, 무료로 제공한다는 것이 배포의 자유를 허락하는 것은 아닙니다.

스킨을 내려받으신 후에 이 글을 참고하시면 수월한 커스터마이징을 하실 수 있습니다.


데모 페이지


소개


Cool Summer



Fruity Orange



Lovely Heart



Snowy Snow


화면을 꽉 채우는 이미지로 구성된 인덱스 페이지가 특징인 반응형 스킨입니다.

완벽한 보안 연결을 사용하실 수 있으며, 쉬운 커스터마이징, 스크립트를 이용한 다양하고 세세한 기능을 제공합니다.



글 목록엔 masonry 디자인이 사용됐습니다.

별도의 페이지 전환 없이, 클릭 한 번으로 다음 페이지의 글 목록을 불러옵니다.



배너에는 본인이 원하는 영상을 사용할 수도, 해당 글의 대표 이미지를 사용할 수도 있습니다.


기본 설정은 영상을 사용하게 되어 있습니다.

html에 banner-alt란 class를 추가하시고, #banner을 div로 바꿔주시면 됩니다.

상술했던, 커스터마이징 정리 글을 참고하시면 쉽습니다.



사이드바의 모습입니다.


Manage, Write은 본인의 블로그가 아니면 보이지 않습니다.


기존의 사이드바는 보통 x 버튼을 누르거나 화면의 검은 공간을 눌러서만 닫을 수 있지만, 모바일 사용자를 배려해 뒤로 가기 버튼으로도 닫을 수 있도록 해뒀습니다.



우측 상단에 보이는 사진을 클릭하면 펼쳐지는 메뉴입니다.


티스토리에서 제공하는 툴바에 있는 기능 중 유용한 것과, '어두운 모드'라는 옵션을 사용하실 수 있습니다.


티스토리 툴바에서 가져온 것이니, 블로그 사진, 관리 링크, 글쓰기 링크, 링크 목록 등은 모두 방문한 사용자의 것으로 표시됩니다.



'어두운 모드'를 활성화한 모습입니다.

활성화 여부는 쿠기로 저장되어, 방문자가 설정했던 상태로 유지됩니다.



스킨에 포함된 이모티콘 외에도, 이미지 / 동영상 / 오디오 / 유튜브 동영상을 댓글에 사용하실 수 있습니다.

도움말





유튜브 비디오들을 세로/가로 영상 모두 반응형으로 감싸줍니다.



Chaeyoung


글을 작성하실 때 팝업 버튼을 사용하실 수 있습니다.


1
2
3
4
5
6
7
8
<button class="dialog__trigger"><span>Click Me!</span></button>
<div class="dialog">
    <span class="dialog__close icon-times"></span>
    <h2 class="dialog__title">제목</h2>
    <div class="dialog__content">
        내용
    </div>
</div>
cs




비디오 하나를 중심으로 한 포스트를 작성할 때 유용한 '비디오 포스트' 기능이 있습니다.

제목을 비디오 아래로 내려주고, 비디오가 스크롤 밖으로 벗어나면 7시 방향에 비디오를 고정합니다.


데모 페이지


1
2
3
<div class="video-post">
    <iframe></iframe>
</div>
cs

사용하시고 싶으실 때, 글에서 html 편집을 눌러서 위와 같이 iframe을 .video-post로 감싸주시면 됩니다.



요소로 부드럽게 스크롤이 되게 할 수 있습니다.


1
<a href="#id" class="smt-scr">부드러운 스크롤</a>
cs


smt-scr 을 쓰면 해당 요소까지 이동하고, smtscr을 쓰면 해당 요소에서 헤더 높이를 뺀 만큼 이동합니다.

데모 페이지


위 페이지의 오른쪽 아래 마우스 모양을 클릭해보시면 활용 방법을 고민하시는 데 도움이 되지 않을까 싶습니다.


라이센스

Copyright 2018. Marshall K All rights reserved


마치며

상술한 내용 외에도 스킨을 편하게 사용하기 위한 기능들이 많습니다.

추가됐으면 하는 기능, 빼고 싶은 기능, 수정했으면 하는 디자인 등을 말씀해주시면 적극 반영하겠습니다.


댓글이나 방명록, 이메일(taengoo890309@naver.com), 디스코드(Marshall Ku #8417)로 편하게 연락해주세요.

Thanks for your likes!
태그
이모티콘 (이미지 클릭)
  • smile
  • cry
  • nervous
  • disappointed
  • drunk
  • confused
  • kiss
  • love

이미지 첨부 비디오 첨부 유튜브 첨부
업로드 후 이미지/비디오 주소를 댓글에 붙여 넣어주세요.
유튜브의 경우 공유를 누르면 나오는 링크를 바로 넣으시면 됩니다.도움말
정렬 : 최신순 오래된순
  1. Profile
    GTK_LeonHeart
       
    오~ 빨리 나왔네요 ㅎ 잘쓰겟습니다 ㅎㅎ
    • Profile
      Marshall K
         
      아시다시피 얼마 남지 않아서요 ㅠㅠ
      이용해주셔서 감사합니다.
    • Profile
      GTK_LeonHeart
         
      카테고리부분 js가 또 바꼈나봐요 ㄷㄷ;;;
    • Profile
      Marshall K
         
      js 는 난독화를 해뒀습니다.
      css에서 작업하셔야 할 것 같습니다 ㅠㅠ
    • Profile
      GTK_LeonHeart
         
      css에서 .view-all{display:none} 는 일단 안먹히네요;
    • Profile
      Marshall K
         
      아마 제가 inline-block으로 지정해둔 것 위에 적으셨지 싶네요. css에선 속성이 중복되면 더 아래에 적힌 것을 실행합니다.
      .sub_category_list li:first-child 를 display:none!important 주시면 해결되지 싶습니다.
    • Profile
      GTK_LeonHeart
         
      바로 되네요~ 감사합니다 ㅎ 아 그리고 카테고리서는 더 보기 버튼 없이 카테고리를
      자동으로 불러오진 못하나요?
    • Profile
      Marshall K
         
      아직 그까지는 작업을 못했습니다.
    • Profile
      GTK_LeonHeart
         
      그렇군요^^;;
    • Profile
      GTK_LeonHeart
         
      방명록 메뉴옆 메뉴의 write 메뉴가 잘못되어있네요. 쿨썸머스킨에서만 확인했습니다. manage/endtry/post 로 가게 되어있네요.
      entry가 오타가 나신듯 합니다.
    • Profile
      Marshall K
         
      수정했습니다. 이용에 어려움을 드려 죄송합니다. ㅠㅠ
  2. Profile
    묘한오빠
       
    거의 마지막 버전인가요 ^^;
    입대 전, 얼굴 한번 더 봐요
    • Profile
      Marshall K
         
      아마 뭐 문제 생겨서 마이너 패치 하는 게 아니면 근 100일간은 업데이트가 없겠지요..ㅎㅎ
      이번 주는 내일 빼고 괜찮을 것 같습니다.
  3. Profile
    zerostudio
       
    수고 하셧어요.. ^*^ 몸 조심히 다녀 오세용.
  4. Profile
    GTK_LeonHeart
       
    버전업 하셨던데 1.4.1에서 1.4.1.2는 js 파일 변경만으로 적용이 될까요?

    자답입니다. js파일 교체 및 css 변경부분 수정했네요^^;
  5. Profile
    TetraTheta
       
    오우... 정말 멋지네요. 보면서 전율이 일 정도입니다! 제가 원하던 그런 종류의 스킨이었네요! 감사히 잘 쓰겠습니다!
    • Profile
      Marshall K
         
      전율이랄 것 까지요 ㅋㅋㅋㅋ 칭찬 감사합니다.
    • Profile
      TetraTheta
         
      다만 적용할때 '커스터마이징 정리 글'에 있는 내용이 실제 적용하려고 보니 없다거나 하는게 있네요. 아마 구버전에서 적용되는 방법 같은데, 그런 부분도 '버전 X.X.XX에 적용되는 트윅입니다' 같은 명시가 되었으면 더 좋을거 같습니다.

      다시 한번 스킨 감사드립니다.
    • Profile
      Marshall K
         
      가서 확인해보니, 404페이지의 이미지 수정에 달린 링크를 https로 변경하지 않았기에, 변경했습니다.
      혹 저것 말고도 제대로 동작하지 않던 것이 있던가요??
    • Profile
      TetraTheta
         
      about 편집할때 검색해보니 a href ="about"이 없다고 나오더라고요. 지금은 파일 적용한 후에 어느정도 고쳐보고 있습니다.

      크게 문제되는건 아니고, '아, 이건 없네? 넘어가도 되겠지' 정도라서 괜찮습니다. 게다가 html쪽에서도 주석으로 나름 설명이 잘 되어있어서 F12 개발자 도구와 함께 조합해서 수정하면 큰 불편함은 없네요.

      PS. 티스토리 앱에선 덧글에 html 태그를 못달게 하는군요... a href= 붙었다고 금칙어라니...
    • Profile
      Marshall K
         
      수정했습니다. 감사합니다~~
      앱에서 댓글을 안 달아봐서, 그런 금칙어가 등록돼있는 걸 처음 알았네요 ㅋㅋㅋ

      좋은 주말 되세요!
  6. Profile
    TetraTheta
       
    Javascript가 난독화가 되어있는데, 이 블로그에 있는 '블로그/How to'의 글 내용을 적용하려니 이게 이 스킨에 적용이 된건지 아닌지 확인이 어렵네요. 그냥 HTML에서 새로 Javascript를 불러오게 하면 무조건 적용은 되겠지만, 이미 적용되어 있는데 두번 적용한다거나 하는건 덜 깔끔해보이네요.

    난독화 안된 JS는 배포하실 생각이 없으신건가요?
    • Profile
      Marshall K
         
      죄송하지만 난독화 되지 않은 스크립트는 배포할 계획이 없습니다 ㅠㅠ

      티스토리 이미지 강제로 원본 표시하기, 요소를 클립보드로 복사하기 둘 외에는 모두 스킨에 적용한 내용을 뽑아다 글을 쓴 겁니다. 어지간한 기능은 모두 포함되어 있습니다!
  7. Profile
    Foxywish
       
    업데이트했어요~ https://tistory4.daumcdn.net/tistory/2837190/skin/images/smile.svg 매우 감사합니다!

티스토리 툴바