이제 이 스킨도 얼추 끝나지 않았나 싶습니다. 헤더 모양을 보시면 아시겠지만, 인덱스 페이지에서 최상단에 고정된 슬라이더가 아닙니다. 예전엔 슬라이더를 단 하나밖에 사용할 수 없었는데, 여러 개의 슬라이더를 사용할 수 있도록 스크립트와 css를 손봤습니다. 또한, 표시된 3가지 요소의 위치를 적절히 수정하여, 충돌하는 일이 없도록 하였습니다. 상술한 내용 외에도 자잘한 변화가 꽤 있었고, 이제 슬라이더는 완성했지 않나 싶습니다. 페이지 최상단에 고정된 슬라이더를 최근 글에서 트와이스의 Dance the Night Away의 뮤직비디오로 변경했습니다. 원랜 Yes or Yes를 사용할 예정이었으나... 화면 비율이 이 모양이라, 16:9의 화면에 맞추려고 하니 화질이 말도 안 나오게 깨져서...그냥 DTN..

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 버전처럼 회로를 이용해 베드락을 없앨 수가 없었는데, 이번에 죽순이 추가되며 생긴 버그로 베드락을 뚫을 수 있게 됐습니다. 이렇게 죽순을 설치한 뒤 뼛가루 한 번 뿌리면 베드락이 사라집니다. 창고를 다시 옮기는 대작업을 진행했습니다. 그래도 셜커 상자가 있으니 한결 편하네요. 분류도 예전보다는 조금 더 체계적으로 했습니다. 집 앞에 새로 광산을 팠습니다. 광산 외에도 이런저런 건물을 추가해야 하는데, 딱히 생각나는 게 없어 고민입니다. 예전처럼 계단으로 오르내리는 방식이 아닌, 물을 이용한 엘리베이터로 변경했습니다. 예전에 파둔 광산과 연결했습니다. 땅굴 ..