svg의 stroke-dashoffset 값을 통해 만드는 스크롤 인디케이터입니다. 스크롤 해보세요! HTML123 Colored by Color Scriptercs path의 내용은 별로 중요하지 않고, "scroll-indicator"란 id와 'stroke, stroke-width, fill 세 가지 옵션이 중요합니다. JS12345678var a = document.getElementById("scroll-indicator"), b = a.getTotalLength(); a.style.strokeDasharray = b, a.style.strokeDashoffset = b, window.addEventListener("scroll", si); function si() { var c = (docum..

헤더 카테고리 예전엔 하위 카테고리가 있는 카테고리와 하위 카테고리가 없는 카테고리의 너비가 달랐는데, 너비가 똑같아지도록 수정했습니다. 하위 카테고리가 있는 카테고리는 5개의 글을 불러오고 하위 카테고리가 없는 카테고리는 6개의 글을 불러옵니다. 헤더 헤더 카테고리가 중앙정렬되도록 변경했습니다. 슬라이더 모양만 똑같이 유지하고 스크립트는 아예 뜯어고쳤습니다. 예전엔 슬라이더 안에 들어있는 항목을 모두 1열 횡대로 배치하고 컨테이너의 left 값을 수정하며 슬라이더의 항목이 하나씩 표시되도록 했는데, 이번엔 슬라이더 항목의 class를 수정하는 방식으로 변경했습니다. 둘 중 어느 게 더 보기 좋은지는 아직 시험 중입니다. 예전 스크립트보다 용량은 1/3 정도로 줄였습니다.

꽤 오랫동안 작성하지 않아 긴가민가한 게 많은데, 뭐 제대로 생각나지 않는 건 크게 중요한 게 아니라 그런 거겠거니 하고 넘어가렵니다. 저번 제작일지에 새로운 이름을 붙이겠다고 얘기하곤 아직 생각난 게 없네요; 글 목록 화면 글 목록 화면에서 글 목록 뒤에 있던 흰색 배경을 지워봤습니다. 아직 어떤 게 더 나은지 정확하게 모르겠네요. 404 페이지 사진 하나 뜨던 404페이지를 새롭게 바꿨습니다.사진은 불러오는데 시간이 걸리기도 해서 그냥 사진 없이 구성했습니다. 예전엔 '5초 후 메인 페이지로 돌아갑니다.'란 문구로 고정되어 있었는데, 이젠 초가 줄어드는 게 표시됩니다. background-image 수정 이렇게 썸네일이 배경으로 들어가는 요소들 우측에 검은 선이 조그맣게 남아있던 오류를 억지로 수정했..

Iframe으로 가져오는 요소들은 css로 백날 건드려봐야 수정할 수 없습니다. 하지만, 간단한 스크립트를 통해 내부에 있는 요소들을 수정 / 제거할 수 있습니다. Loading... 예를 위해 https://publish.twitter.com/ 에서 불러온 트위터 타임라인을 수정해보겠습니다. 550px로 높이를 변경하는 커스터마이징만 하고 가져온 타임라인입니다. Loading... 수정된 타임라인입니다. 상단과 하단에 고정돼있던 header와 footer를 제거하고, 크롬에서 스크롤바의 모양을 변경했습니다. HTML (예시)1cs JS123$("#iframe").one("load", function() { $("#iframe").contents().find(/*something*/).remove()})..

들어가기에 앞서, 뷰포트에 대해 설명하자면 위 스크린 샷처럼 긴 페이지 내에서 내가 보고 있는 영역을 뷰포트라 칭합니다. 이 글에 설명한 스크립트와 얼추 비슷하지만, 범용성은 조금 더 넓습니다. 12345678$.fn.isvisible = function() { var a = $(this).offset().top, b = a + $(this).outerHeight(), c = $(window).scrollTop(), d = c + $(window).height(); return b > c && a = a};Colored by Color Scriptercs 스크롤을 위에서 아래로 내리는 경우만 생각하면 위처럼 조금 더 짧은 스크립트를 이용하셔도 됩니다. 이제, 상술한 스크립트를 활용할 시간입니다. 1234..

멀리서 오륙도를 본 적은 많은데 이렇게 가까이 가본 건 처음이네요. 졸업식을 끝마치고 얼마 안 된 시간이라, 바다가 굉장히 눈부십니다. 오륙도 반대편을 찍은 사진인데, 아마 위치상 해운대가 아닐까 싶습니다. 스카이워크에서 팔 뻗고 찍은 사진입니다. 떨어뜨릴까 조마조마했네요... 망원경에 대고 섬을 확대해 찍은 사진입니다. 제 렌즈가 마침 망원경에 딱 맞아, 굉장히 깔끔하게 나왔네요 ㅋㅋㅋ 뭐 섬 보러 가서 볼 게 많이 있길 바라는 건 어불성설이지만, 스카이워크가 너무 짧아 아쉽긴 했습니다. 망원경에 대고 찍은 사진 중에 제일 잘 나온 걸 골라 배경을 제거해봤습니다. 클릭 한 번에 제거되니 편하네요 ㅋㅋ

요즘 너무 마인크래프트 관련 포스팅만 하네요;; 마인크래프트 베드락 에디션에선 네더월드 제일 위에 있는 베드락 위에 아이템을 놓을 수가 없어서, PC 버전처럼 회로를 이용해 베드락을 없앨 수가 없었는데, 이번에 죽순이 추가되며 생긴 버그로 베드락을 뚫을 수 있게 됐습니다. 이렇게 죽순을 설치한 뒤 뼛가루 한 번 뿌리면 베드락이 사라집니다. 창고를 다시 옮기는 대작업을 진행했습니다. 그래도 셜커 상자가 있으니 한결 편하네요. 분류도 예전보다는 조금 더 체계적으로 했습니다. 집 앞에 새로 광산을 팠습니다. 광산 외에도 이런저런 건물을 추가해야 하는데, 딱히 생각나는 게 없어 고민입니다. 예전처럼 계단으로 오르내리는 방식이 아닌, 물을 이용한 엘리베이터로 변경했습니다. 예전에 파둔 광산과 연결했습니다. 땅굴 ..

한 작업은 많은데, 그냥 까다롭고 귀찮은 작업일 뿐이라 스크린 샷은 얼마 나오질 않네요...;; 간척사업을 하니 거북이가 알아서 스폰됩니다. 괜히 멀리 가서 알 가져올 필요 없이 그냥 스폰 조건이나 읽어볼 걸 그랬네요. 분수를 만드니 돌고래가 엄청나게 스폰되는데, 죽지 말라고 이름표 붙여뒀더니 여기저기 탈출해서 알아서 죽네요. 좀 예전에 2층에 올려뒀던 상자들을 지하로 전부 내리는 작업을 했습니다. 오래전에 한 작업을 왜 이제야 스크린 샷을 올리느냐 하면... 그냥 귀찮기만 한 작업이라 스크린 샷을 찍지 않았는데, 간척사업을 완료한 후, 집을 옮기게 되며 저 작업을 다시 해야 한단 생각에 귀찮음이 밀려옵니다 ㅠㅠ 그래도 맨션 건물 자체는 예쁘게 지어져서 마음에 듭니다. 옆 모습 완공한 모습입니다. 집이 ..

[GIF]