지원되지 않는 브라우저입니다
blogImage
Marshall K
Insanity laughs, under pressure we're cracking<br><br>Queen - Under Pressure

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

우연한 계기로 홈페이지를 디자인해본 뒤, 웹페이지를 만드는 취미가 생겼습니다.
미흡한 실력이라 포스팅이 얼마나 될진 모르겠지만, 실력을 쌓고 여러 정보를 공유할만한 단계까지 올라가는 게 1차적인 목표입니다.

Contact

티스토리 반응형 스킨 [Summer Nights] 1.2 배포

다운로드


스킨에 포함된 인터파크 고딕 폰트는 개인의 비상업적 용도에 한해 무료로 제공되는 폰트입니다.


Summer Nights 1.2.2 - Purple & Pink.zip

wil.zip


Summer Nights 1.2.2 - Skyblue.zip

dtna.zip



다운로드하신 후, 이 포스트를 참조하시면 각종 설정을 하실 수 있습니다.

포스트의 내용은 지속해서 업데이트될 예정입니다.


데모 페이지


소개

위는 Skyblue (Dance the Night Away), 아래는 Purple & Pink (What is Love) 테마입니다.


화면을 가득 채우는 사진과 로고로 구성된 인덱스 페이지, 자유로운 커스터마이징 등의 특징을 지닌 반응형 스킨입니다.



카테고리 목록엔 Masonry 디자인이 사용됐습니다.

페이지를 전환할 필요 없이 스크롤을 아래로 내리기만 하면 자동으로 다음 페이지의 글 목록을 불러옵니다.


기존의 사이드바보다 훨씬 쉽게 닫을 수 있습니다.

화면의 검은 공간을 누르거나, 뒤로 가기 버튼으로도 닫을 수 있습니다.


여담이지만, 뒤로 가기를 눌러 사이드바를 닫은 후에 앞으로 가기를 눌러도 다시 사이드바가 열립니다.



티스토리에서 첨부한 비디오, 유튜브에서 가져온 비디오 등의 iframe 요소들을 반응형으로 감싸줍니다.



댓글 작성 시, 이모티콘을 쓸 수 있을 뿐 아니라, 각종 링크, 이미지 주소, 비디오 주소를 자동으로 해당 태그로 변환해주며, 유튜브 비디오는 링크를 복사해 붙여 넣으면 iframe으로 감싸줍니다!



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


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">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/Fm5iP0S1z9w?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
</div>
cs


DTNA MV


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


글 내부에서 href="#id"를 통해 이동할 때 "smt-scr"이라는 class를 통해 부드럽게 스크롤 됩니다.


smt-scr은 해당 요소까지 스크롤하고, smtscr은 해당 요소에서 헤더 높이를 뺀 만큼 이동합니다. 적재적소에 잘 활용해주세요.

테스트 (페이지에서 우측 하단의 마우스 아이콘 클릭)



비디오 포스트를 이용하시면 비디오가 돋보이는 포스팅을 작성하실 수 있습니다.


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

이렇게 iframe을 video-post란 class를 지닌 요소로 감싸주시면 됩니다.


제목을 영상 아래로 옮겨주고, 영상이 스크롤 밖으로 나가면 좌측 하단에 고정됩니다. 데모 페이지



마치며

상술한 내용 외에도 유용한 기능들이 꽤 있습니다!

추가되었으면 하는 기능, 빠졌으면 하는 기능, 수정하면 좋을 디자인 등을 제보해주시면 항상 감사한 마음으로 받아들이고 있습니다.


문제를 발견하시면 댓글이나 방명록, 이메일(taengoo890309@naver.com), 디스코드(Marshall Ku #8417)로 언제든 문의해주세요.

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

이미지 첨부 비디오 첨부 유튜브 첨부
업로드 후 이미지/비디오 주소를 댓글에 붙여 넣어주세요.
유튜브의 경우 공유를 누르면 나오는 링크를 바로 넣으시면 됩니다.도움말
정렬 : 최신순 오래된순
  1. Profile
    땀똔
       
    아임 그룻~ (Good~)
    https://i.imgur.com/jJUGPXh.gif
  2. Profile
    이영자.
       
    블로그 스킨을 둘러보는 중인데 실력이 대단하십니다!
    https://tistory2.daumcdn.net/tistory/2837190/skin/images/kiss.svg
    • Profile
      Marshall K
         
      감사합니다~ 더 노력해야지요 https://tistory2.daumcdn.net/tistory/2837190/skin/images/smile.svg
  3. Profile
    청춘일기
       
    우와! 멋집니다 블로그가 더 다이나믹해졌네 싶었더니 그 스킨까지 배포하시는군요!
    역시 마샬님은 능력자시네요^^
    근데 첫 페이지 왓이즈러브 눌러서 트와이스 프로필 들어갔다가 빠져나오는 길이 없어서;;; 개미지옥 페이지군요 ㅎㅎㅎ
    • Profile
      Marshall K
         
      개미지옥 같은 매력을 표현...했다기 보단 그냥 뒤로 가기 버튼으로 나오면 되는 문제라 굳이 홈 버튼을 달지 않았는데, 달아놔야겠네요 ㅋㅋㅋㅋ
      능력자 타이틀 달려면 멀었습니다 ㅠㅠ
    • Profile
      청춘일기
         
      억, 뒤로가기! 나 왜 그생각을 못했죠-_-;;
      그냥 보통의 웹페이지면 뒤로가기 썼을텐데 아마 독특한 페이지라 구경하면서 메뉴를 찾아봤나봅니다 ㅎㅎ
    • Profile
      Marshall K
         
      ㅋㅋㅋㅋ 이젠 자동 스크롤 옆에 홈 버튼도 달아놨습니다.

      https://i.imgur.com/bYjNVzY.gif
  4. Profile
    묘한오빠
       
    다시 멋진 스킨을 공개하시네요 https://tistory4.daumcdn.net/tistory/2837190/skin/images/smile.svg
    전, 마셀님의 애드온 같은 스크립트만 차용해서 블로그를 꾸미는 것만해도 감지덕지입니다. https://tistory4.daumcdn.net/tistory/2837190/skin/images/love.svg
    이모티콘이 옆으로 잘 붙네요.
    • Profile
      Marshall K
         
      이미지는 아무런 설정도 하지 않았습니다 https://tistory2.daumcdn.net/tistory/2837190/skin/images/drunk.svg

      그냥 svg의 너비와 높이를 50px로 맞춰주면 그만입니다. https://tistory2.daumcdn.net/tistory/2837190/skin/images/smile.svg

      올릴만한 게 생각나는 게 없네요. 동이 빨리 납니다. ㅠㅠ

      https://i.imgur.com/wTjtvNN.mp4
  5. Profile
    zerostudio
       
    감사합니다 .. 잘 쓰겠습니다.
  6. Profile
    GTK_LeonHeart
       
    스킨이 멋집니다. ㅎ 저도 요 스킨으로 갈아타 볼려고 임시로 다른 블로그에 올려서 세팅중이네요 ㅎㅎ
    임시세팅중인 블로그는 life-stream.tistory.com 입니다 ㅎㅎ 그럼 감사하고 잘 쓰겠습니다 ㅎㅎ!!

    PS. 그리고 궁금한것이.. 카테고리 목록에 마우스를 가져다 대면 받아간 스킨에는 그림자 효과만 생기네요. 마쉘k님 홈에서는 카테고리에서 마우스를 가져다 대면
    약간 올라가는 효과가 있던데 요건 추후 업데이트 예정이신가요? 아니면 따로 세팅해야할 부분인지 궁금합니다^^;
    • Profile
      Marshall K
         
      음...적용을 잠깐만 미뤄두시면 제가 다음 버전을 배포하도록 하겠습니다. 이용해주셔서 감사하고 칭찬해주셔서 감사합니다 ㅎㅎㅎ
    • Profile
      GTK_LeonHeart
         
      일단은 적용을 했어요 ㅎㅎ 지금 카테고리에 아코디언 메뉴 수정중인데 잘 안되네요 ㅎㅎ 다음버전이 기다려집니다 ㅎㅎ
    • Profile
      Marshall K
         
      최대한 빨리 정리해서 올려보겠습니다!!!
    • Profile
      GTK_LeonHeart
         
      넵! 화이팅!! 입니다ㅎ
  7. Profile
       
    비밀댓글입니다
    • Profile
         
      비밀댓글입니다
    • Profile
         
      비밀댓글입니다
    • Profile
         
      비밀댓글입니다
    • Profile
         
      비밀댓글입니다
    • Profile
         
      비밀댓글입니다

티스토리 툴바