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..

한 게 꽤 됐던 것 같은데, 다른 스킨 작업하다 보니 깔-끔하게 잊었습니다... 이제 marshall-ku.tistory.com/1234 등으로 접속하면 .tistory가 사라진 경로로 자동으로 이동합니다.굳이 필요는 있을까 싶습니다..;; 이거 듣다 갑자기 생각나서 로딩 창에 다시 바람개비를 넣어 봤습니다. 예전에 있던 svg는 로딩 창이 너무 빠르게 사라져서 애니메이션이 표시조차 안 되고 사라지곤 했는데, 바람개비는 일단 바람개비 모양이라도 나오니 만족합니다 ㅋㅋㅋ추가로, 로딩 창이 사라지는 타이밍이 언제가 좋을지 계속 생각 중입니다. 지금도 계속 조금씩 변하고 있습니다. 테마 관련 작업을 시작했습니다.가장 먼저 어두운 테마를 완성했습니다. 나머지는 언제 다 할는지 걱정입니다. 어두운 테마 작업을 끝..

커버 업데이트에 맞춰, 홈 화면을 꾸밀 수 있도록 업데이트했습니다.종일 슬라이더 스크립트만 잡고 있었네요. 슬라이더입니다.기본적으로 화면 최상단에 고정되며, 스크롤하면 아래 내용이 슬라이더 위를 덮으며 올라옵니다. 이거 작업이 당연하지만 제일 오래 걸렸네요; 간단하게 썸네일을 중심으로 보여주는 글 목록입니다. Masonry를 사용한 글 목록입니다. 기본적으로 글 목록의 것과 크게 다를 건 없지만, border-radius가 없고, box-shadow가 없습니다. 단순한 글 목록입니다. 썸네일을 배경에 넣는 글 목록입니다. 갤러리 형태의 글 목록입니다. 왼쪽이 마우스를 올린 모습, 오른쪽이 마우스를 올리지 않은 모습입니다. 스킨 제작 초창기에 만들어뒀던 건데, 사용하지 않아 삭제하려다 각주 처리해뒀는데 마..

서울에 일주일가량 다녀오느라 좀 많이 늦었네요 ㅠㅠ이제 좀 지루해지는 단계입니다. 눈에 보이는 변경은 별로 없지만, 세세한 틈 하나하나 채워 나가는... Video Sticker video-sticker에 자그마한 변화가 있습니다.이제 스킨 옵션에서 해당 옵션을 껐다 켤 수 있게 변경하고, 비디오가 하나가 있을 땐 무조건 작동하도록 했습니다. 물론 해당 옵션을 끄고 싶은 글이 있을 수 있으니, 이 글에서 확인하실 수 있듯 특정 글에만 끌 수도 있도록 해뒀습니다. 댓글 입력란 디자인 댓글에 이모티콘 / 이미지 / 비디오 를 쉽게 첨부할 수 있도록 해뒀습니다. 예전엔 이모티콘이 댓글 입력창 위에 표시됐지만, 이젠 이미지 / 비디오와 함께 아래에 표시됩니다. 이모티콘 버튼을 누르면 레이어가 뜨고, 이모티콘을 ..

일단 기존의 틀을 크게 벗어나지 않는 선에서 새로이 제작 중입니다.필요 없는 것은 버리고, 필요한 것들은 새로 추가하며 만들어가는 중인데, 쉽지 않네요 ㅠㅠ 로딩 창 / 프로필 레이어의 배경 등에 남아있던 트와이스의 상징들을 제거해 범용성을 높였습니다. 일단 스킨 옵션들을 다양하게 추가해서, 예전처럼 복잡하게 매뉴얼을 보고 따라 하지 않아도 되도록 수정하고 있습니다. 홈 화면의 모습입니다. 전체적으로 예전과 크게 변함은 없지만, 조금 더 둥글둥글하게 만들어 봤습니다. 예전과 다르게 방명록 / 태그 목록 등에서도 배너에 간단한 문구를 삽입할 수 있습니다. 배너에 카테고리 / 제목 등을 표시하는 부분의 디자인을 살짝 변경했습니다. 오래된 댓글의 디자인을 새로이 개편했습니다. 예전의 디자인은 모바일 환경에서 ..

카카오톡 정도면 아이콘 폰트용 svg도 인터넷에 있지 않을까 싶었는데 제 착각이었습니다 ;; 예전엔 귀찮아서 댓글 모양의 아이콘으로 사용하다가, 이번에 새 스킨 작업하며 새 마음 새 뜻으로 작업해봤습니다. 아이콘 폰트용이라 색상이 들어있지 않으니. svg로 사용하실 땐 fill로 색상을 채워주셔야 합니다.

티스토리의 업데이트된 로고입니다. 예전에 작업했던 자료랑 좀 안 맞아서 처음부터 했네요 ㅠㅠ아이콘 폰트용으로 작업해서 색상이 들어있지 않습니다. svg로 사용하시려면 fill을 이용해주세요.

gif의 프레임을 잘라서 멈춰있는 이미지를 만들 땐 ezgif를 이용하시면 됩니다. CSS만 이용하기 HTML1234 Colored by Color Scriptercs CSS1234567891011.hov-anim-box .animated { display: none} .hov-anim-box:hover .animated { display: inline} .hov-anim-box:hover .static { display: none}csstatic은 멈춰있는 이미지, animated는 움직이는 이미지입니다. 자바스크립트 없이 실행된다는 장점은 있지만, 한 번 마우스를 올리고 gif가 재생되기 시작하면 멈춰있는 이미지와 움직이는 이미지 사이의 시간 차이가 발생하면서 이상하게 보이는 게 단점입니다. Java..