svg로 스크롤 인디케이터 만들기
블로그 & 스킨/How to
svg로 스크롤 인디케이터 만들기

svg의 stroke-dashoffset 값을 통해 만드는 스크롤 인디케이터입니다. 스크롤 해보세요! HTML123<svg id="scroll-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">  <path fill="rgba(255,255,255,.5)" stroke=..

190221 티스토리 스킨 #5 제작일지
블로그 & 스킨
190221 티스토리 스킨 #5 제작일지

헤더 카테고리예전엔 하위 카테고리가 있는 카테고리와 하위 카테고리가 없는 카테고리의 너비가 달랐는데, 너비가 똑같아지도록 수정했습니다.하위 카테고리가 있는 카테고리는 5개의 글을 불러오고 하위 카테고리가 없는 카테고리는 6개의 글을 불러옵니다.헤더헤더 카테고리가 중앙정렬되도록 변경했습니다.슬라이더모양만 똑같이 유지하고 스크립트는 아예 뜯어고쳤습니다.예전엔 슬라이더 안에 들어있는 항목을 모두 1열 횡대로 배치하고 컨테이너의 left 값을 수정하며 슬라..

190220 티스토리 스킨 #5 제작일지
블로그 & 스킨
190220 티스토리 스킨 #5 제작일지

꽤 오랫동안 작성하지 않아 긴가민가한 게 많은데, 뭐 제대로 생각나지 않는 건 크게 중요한 게 아니라 그런 거겠거니 하고 넘어가렵니다.저번 제작일지에 새로운 이름을 붙이겠다고 얘기하곤 아직 생각난 게 없네요;글 목록 화면글 목록 화면에서 글 목록 뒤에 있던 흰색 배경을 지워봤습니다.아직 어떤 게 더 나은지 정확하게 모르겠네요.404 페이지사진 하나 뜨던 404페이지를 새롭게 바꿨습니다.사진은 불러오는데 시간이 걸리기도 해서 그냥 사진 없이 구성했습니..

[JS] Iframe 내부 요소 수정하기
블로그 & 스킨/How to
[JS] Iframe 내부 요소 수정하기

Iframe으로 가져오는 요소들은 css로 백날 건드려봐야 수정할 수 없습니다. 하지만, 간단한 스크립트를 통해 내부에 있는 요소들을 수정 / 제거할 수 있습니다. Loading... 예를 위해 https://publish.twitter.com/ 에서 불러온 트위터 타임라인을 수정해보겠습니다. 550px로 높이를 변경하는 커스터마이징만 하고 가져온 타임라인입니다. Loading... 수정된 타임라인입니다. 상단과 하단에 고정돼있던 heade..

[JS] 요소가 뷰포트 안에 있는지 확인하기
블로그 & 스킨/How to
[JS] 요소가 뷰포트 안에 있는지 확인하기

들어가기에 앞서, 뷰포트에 대해 설명하자면 위 스크린 샷처럼 긴 페이지 내에서 내가 보고 있는 영역을 뷰포트라 칭합니다. 이 글에 설명한 스크립트와 얼추 비슷하지만, 범용성은 조금 더 넓습니다. 12345678$.fn.isvisible = function() {  var a = $(this).offset().top,     &..

190124 티스토리 스킨 #5 제작일지
블로그 & 스킨
190124 티스토리 스킨 #5 제작일지

한 게 꽤 됐던 것 같은데, 다른 스킨 작업하다 보니 깔-끔하게 잊었습니다...이제 marshall-ku.tistory.com/1234 등으로 접속하면 .tistory가 사라진 경로로 자동으로 이동합니다.굳이 필요는 있을까 싶습니다..;; 이거 듣다 갑자기 생각나서 로딩 창에 다시 바람개비를 넣어 봤습니다.예전에 있던 svg는 로딩 창이 너무 빠르게 사라져서 애니메이션이 표시조차 안 되고 사라지곤 했는데, 바람개비는 일단 바람개비 모양이라도 나오니..

티스토리 반응형 스킨 #7 묘한 스킨
블로그 & 스킨/주문 제작
티스토리 반응형 스킨 #7 묘한 스킨

묘한 오빠님의 주문으로 제작된 스킨입니다.글에는 summer nights 2.0을 많이 차용하되, 이곳저곳 요청대로 많이 뜯어고쳤습니다.글 목록입니다.여백 없이 20개의 글이 화면을 꽉 채웁니다.로딩이 완료되면 이런 식으로 이미지들이 드러납니다.검은색을 바탕으로 무채색 계열의 색을 사용했으며, 헤더 카테고리를 중앙에 배치했습니다.배너의 이미지는 화면을 꽉 채우도록 했습니다.1단형 스킨으로 만들며, 기존에 사이드바에 들어가던 요소들은 모조리 내비게이션..

190121 티스토리 스킨 #5 제작일지 - 커버 업데이트
블로그 & 스킨
190121 티스토리 스킨 #5 제작일지 - 커버 업데이트

커버 업데이트에 맞춰, 홈 화면을 꾸밀 수 있도록 업데이트했습니다.종일 슬라이더 스크립트만 잡고 있었네요.슬라이더입니다.기본적으로 화면 최상단에 고정되며, 스크롤하면 아래 내용이 슬라이더 위를 덮으며 올라옵니다.이거 작업이 당연하지만 제일 오래 걸렸네요;간단하게 썸네일을 중심으로 보여주는 글 목록입니다.Masonry를 사용한 글 목록입니다.기본적으로 글 목록의 것과 크게 다를 건 없지만, border-radius가 없고, box-shadow가 없습니..

티스토리 툴바