svg로 스크롤 인디케이터 만들기
svg의 stroke-dashoffset 값을 통해 만드는 스크롤 인디케이터입니다. 스크롤 해보세요! HTML 1 2 3 <svg id="scroll-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"> <path fill="rgba(255,255,255,.5)" stroke="#fff" stroke-width="3" d="M362.3,181.1c2.8-3.2,14.5,6.7,10.1,12.6c-7.1,9.5-18.3-6.8-21.6-11.6c-1.4-2.1-3.2-4.1-5.2-5.7 c-3.7-3.3-8.4-5.4-13.3-6c-11.3-1.2-31.9,10.1-32.3,22.7c-0...
더보기
190221 티스토리 스킨 #5 제작일지
헤더 카테고리 예전엔 하위 카테고리가 있는 카테고리와 하위 카테고리가 없는 카테고리의 너비가 달랐는데, 너비가 똑같아지도록 수정했습니다. 하위 카테고리가 있는 카테고리는 5개의 글을 불러오고 하위 카테고리가 없는 카테고리는 6개의 글을 불러옵니다. 헤더 헤더 카테고리가 중앙정렬되도록 변경했습니다. 슬라이더 모양만 똑같이 유지하고 스크립트는 아예 뜯어고쳤습니다. 예전엔 슬라이더 안에 들어있는 항목을..
더보기
190220 티스토리 스킨 #5 제작일지
꽤 오랫동안 작성하지 않아 긴가민가한 게 많은데, 뭐 제대로 생각나지 않는 건 크게 중요한 게 아니라 그런 거겠거니 하고 넘어가렵니다. 저번 제작일지에 새로운 이름을 붙이겠다고 얘기하곤 아직 생각난 게 없네요; 글 목록 화면 글 목록 화면에서 글 목록 뒤에 있던 흰색 배경을 지워봤습니다. 아직 어떤 게 더 나은지 정확하게 모르겠네요. 404 페이지 사진 하나 뜨던 404페이지를 새롭게 바꿨습니다. 사진은 불러오는데..
더보기
[JS] Iframe 내부 요소 수정하기
Iframe으로 가져오는 요소들은 css로 백날 건드려봐야 수정할 수 없습니다. 하지만, 간단한 스크립트를 통해 내부에 있는 요소들을 수정 / 제거할 수 있습니다. Loading... 예를 위해 https://publish.twitter.com/ 에서 불러온 트위터 타임라인을 수정해보겠습니다. 550px로 높이를 변경하는 커스터마이징만 하고 가져온 타임라인입니다. Loading... 수정된 타임라인입니다. 상단과 하단에 고정돼있던 header와 footer를 제거..
더보기
[JS] 요소가 뷰포트 안에 있는지 확인하기
들어가기에 앞서, 뷰포트에 대해 설명하자면 위 스크린 샷처럼 긴 페이지 내에서 내가 보고 있는 영역을 뷰포트라 칭합니다. 이 글에 설명한 스크립트와 얼추 비슷하지만, 범용성은 조금 더 넓습니다. 1 2 3 4 5 6 7 8 $.fn.isvisible = function() { var a = $(this).offset().top, b = a + $(this).outerHeight(), c = $(window).scrollTop(), d = c + $(window).height(); return b > c && a < d }; Colored by Color Script..
더보기

인기글

thumbnail
마무리!
블로그 카테고리에 적어야 하나 싶긴 하지만, 원래 마이너 체인지는 별다른 글을 작성하지 않았으니, 그냥 잡담 카테고리에 이래저래 쓰렵니다. 일단, 헤더 카테고리를 불러오는 타이밍은 수정했습니다. 헤더 카테고리가 보인다 - 내용을 불러온다. 보이지 않는다 - 헤더 카테고리에 마우스가 올라오면 불러온다. 아마 1.5.2.1이 마지막이지 않을까 싶네요. 1.5.2.2 이상의 버전은 100일쯤 뒤에나 올라올 가능성이.... 진짜루..
thumbnail
유튜브 팝업 레이어 만들기
.popupVideo란 div 아래의 a 태그를 클릭하면 유튜브 비디오를 레이어로 띄워 주면서 영상을 재생합니다. (PC) 화면의 빈 곳을 누르면 팝업 레이어가 사라지면서 유튜브 영상이 정지됩니다. a 태그 안에 들어간 내용은 유튜브 들어가셔서 아무 영상이나 클릭하시면 https://www.youtube.com/watch?v=ZBCGkpJWjVc 같은 형식으로 주소창에 표시될 겁니다. ?v= 뒤의 내용이 비디오의 id입니다. 해당 내용 복사해서 붙이시면 됩니다...
thumbnail
티스토리 모바일 경로(/m)에서 강제로 원래 경로로 리다이렉트
들어가기에 앞서, 적용이 꽤 귀찮은 스크립트라 블로그 모든 글에 적용하기보다 특정 글들에만 사용하는 게 좋지 않을까 생각합니다. 모바일 페이지를 사용하지 않는다고 설정해둬도 페이지 생성 자체가 막히는 게 아니라서, 접근은 잘만 됩니다. 네이버 블로그는 구글에 검색하면 모바일 페이지로 노출되는 것도 엄청나게 많던데, 티스토리 블로그는 잘 모르겠네요. 여튼, 블로그에 적용한 스크립트 등 때문에 모바일 화면에서..
thumbnail
[Summer Nights] 1.5.2 업데이트
1.5.1에서 1.5.2로 업데이트됐습니다. 그렇게 큰 변경사항은 아니지만, 헤더 카테고리와 관련해 좀 중요한 업데이트라고 생각해서 버전을 올리게 됐습니다. 다운로드 헤더 카테고리 개선 기존에는 자동으로 헤더 카테고리의 모든 글을 불러왔었는데, 이젠 헤더 카테고리의 메뉴에 마우스를 올리면 해당 카테고리의 글들만 불러옵니다. 반응형 1:1 비디오 1:1 비디오가 정말 별로 없네요 ㅋㅋㅋ 가끔 음악만 올라오는 영상에는..
thumbnail
아마도 마지막 글...?
주변에서 다들 심란할 거로 생각하던데, 딱히 별생각이 크게 안 드네요. 집 나가서 고생할 생각 하면 물론 언짢은 건 사실이지만, 제가 태어나서 저의 노력으로 쟁취하지 않은 혜택들이 무수히 많았는데, 그런 긍정적인 면은 좋다고 삼키고 안 좋은 의무는 싫다고 뱉는 감탄고토의 자세는 굉장히 바람직하지 않다고 생각합니다. 나아가, 이제까지 봐오던 사람들은 솔직히 만나는 경로가 학교 등이다 보니 아무래도 좀 거기서 거..
thumbnail
간단한 수정 몇 개
인덱스 페이지에 음소거 버튼 추가 예전부터 만들어야겠다 생각은 하다가, 귀찮아서 미뤄뒀던 작업입니다. 그냥 저는 사이트 음소거 해두고 썼는데, 음소거 버튼이 있으면 좋겠단 의견에 추가해봤습니다. 확실히 편하네요 ㅋㅋ 헤더 카테고리 잡다하게 애니메이션을 추가해봤지만, 전부 어울리지 않는다는 느낌이 들어서 그냥 투명도만 조절되도록 했습니다. 1:1 유튜브 비디오 이거 하느라 집에 있는 컴퓨터에서 난독화 안된..
thumbnail
[마인크래프트 BE] 서버원들과 생존기 2 - 2
한 작업은 많은데, 그냥 까다롭고 귀찮은 작업일 뿐이라 스크린 샷은 얼마 나오질 않네요...;; 간척사업을 하니 거북이가 알아서 스폰됩니다. 괜히 멀리 가서 알 가져올 필요 없이 그냥 스폰 조건이나 읽어볼 걸 그랬네요. 분수를 만드니 돌고래가 엄청나게 스폰되는데, 죽지 말라고 이름표 붙여뒀더니 여기저기 탈출해서 알아서 죽네요. 좀 예전에 2층에 올려뒀던 상자들을 지하로 전부 내리는 작업을 했습니다. 오래전에 한..
thumbnail
미맥스3 volte 패치하기
귀찮다고 미뤄만 두다가 오늘에야 작업을 끝냈습니다. 홍미노트 5의 efs를 덮어씌우는 굉장히 귀찮은 작업을 해야 합니다. 이 글을 참고하셔서 언락을 진행하신 후, 대리점에 방문하여 OMD 등록을 먼저 해주셔야 합니다. https://drive.google.com/open?id=1z5Pd8cGYtdUHHcHOh6NErNfV43qxzqSx https://drive.google.com/open?id=1eLKtczaMUIiITwPZM4SVoG00H3v69xXN 위 두 파일은 다음만 연타하면 설치가 완료되고, adb는 y 엔..

댓글 많은 글

티스토리 반응형 스킨 [Summer Nights] 1.5 배포
다운로드 완전히 무료로 제공되는 스킨입니다. 스킨에 삽입된 스킨의 제작자와 관련된 문구들은 삭제하지 말아 주세요. 인터넷 익스플로러와 완벽하게 호환되지 않습니다. 헤더 카테고리의 '분류 전체 보기', 사이드바의 '카테고리 전체 보기'가 필요 없으신 분은 no_view_all.js를 받아주세요. 스킨을 내려받으신 후에 이 글을 참고하시면 수월한 커스터마이징을 하실 수 있습니다. 데모 페이지 소개 Cool Summer Fr..
전역 D-day
전역전역전역전역전역전역전역전역전역전역전역전역전역전역전역전역전역전역전역전역전역전역전역전역전역전역 제대
아마도 마지막 글...?
주변에서 다들 심란할 거로 생각하던데, 딱히 별생각이 크게 안 드네요. 집 나가서 고생할 생각 하면 물론 언짢은 건 사실이지만, 제가 태어나서 저의 노력으로 쟁취하지 않은 혜택들이 무수히 많았는데, 그런 긍정적인 면은 좋다고 삼키고 안 좋은 의무는 싫다고 뱉는 감탄고토의 자세는 굉장히 바람직하지 않다고 생각합니다. 나아가, 이제까지 봐오던 사람들은 솔직히 만나는 경로가 학교 등이다 보니 아무래도 좀 거기서 거..
[wip] Summer Nights 2.0
일단 기존의 틀을 크게 벗어나지 않는 선에서 새로이 제작 중입니다. 필요 없는 것은 버리고, 필요한 것들은 새로 추가하며 만들어가는 중인데, 쉽지 않네요 ㅠㅠ 로딩 창 / 프로필 레이어의 배경 등에 남아있던 트와이스의 상징들을 제거해 범용성을 높였습니다. 일단 스킨 옵션들을 다양하게 추가해서, 예전처럼 복잡하게 매뉴얼을 보고 따라 하지 않아도 되도록 수정하고 있습니다. 홈 화면의 모습입니다. 전체적으로 예전..
간단한 수정 몇 개
인덱스 페이지에 음소거 버튼 추가 예전부터 만들어야겠다 생각은 하다가, 귀찮아서 미뤄뒀던 작업입니다. 그냥 저는 사이트 음소거 해두고 썼는데, 음소거 버튼이 있으면 좋겠단 의견에 추가해봤습니다. 확실히 편하네요 ㅋㅋ 헤더 카테고리 잡다하게 애니메이션을 추가해봤지만, 전부 어울리지 않는다는 느낌이 들어서 그냥 투명도만 조절되도록 했습니다. 1:1 유튜브 비디오 이거 하느라 집에 있는 컴퓨터에서 난독화 안된..

티스토리 툴바