What's New

190919 블로그 제작일지
190919 블로그 제작일지
뜬금없이 사파리가 발목을 잡는 날이네요. 쟤도 솔직히 인터넷 익스플로러에 가려서 그렇지 렌더링 엔진이 어지간히 개판인 것 같습니다. 스크롤바 웹킷 계열에서만 지원하는 방식이기에, 지금까진 쓰는 걸 좀 꺼렸습니다. 근데 backdrop-filter도 이렇게 써대는데, 까짓 스크롤바가 대순가 싶어서 그냥 간단하게 꾸며봤습니다. 이모티콘 첨부 지금까진 가로 860px, 세로 650px로 이모티콘 첨부 창을 띄웠는데, 큼직큼직하게 뜨도록 해뒀습니다. window.innerWidth를 너비로, window.outerHeight을...
트와이스 Feel Special 채영 티저 로고제거
트와이스 Feel Special 채영 티저 로고제거
티저 원본 : 공트 사진을 클릭하시면 원본(2000 * 2800)으로 저장하실 수 있습니다. 파일은 PNG긴 한데, 원본이 jpg라 누끼가 좀 있더라고요.사진 외곽은 얼추 지웠는데, 모든 부분에서 제거하진 못했습니다 ㅠㅠ 머리 위를 글자가 가리고 있어서 걱정했는데, 결과물 보니 그렇게 나쁘진 않네요.
190916 블로그 제작일지
190916 블로그 제작일지
TWICE 페이지 먼저, 로딩 레이어가 사라지는 애니메이션을 좀 손봤습니다. 아무래도 영상이 재생되면서 로딩 레이어가 사라지는데, scale을 변경하는 애니메이션은 브라우저에 부담이 생각보다 커서, 영상 디코딩하느라 바쁠 GPU를 위해 translateX를 사용한 애니메이션으로 변경했습니다. 가사집 페이지의 스크립트도 좀 손봐뒀습니다. 예전엔 가사집에서 가사를 열 때, 해당 가사를 통째로 복사해서 다른 엘리먼트에 붙여 넣어 보여주는 좀 이상한 방식을 사용해서 가사를...
티스토리 썸네일에 유튜브 썸네일 불러오기
티스토리 썸네일에 유튜브 썸네일 불러오기
위 이미지처럼 티스토리 썸네일이 아무것도 없을 때, 만약 글에 유튜브 영상이 포함되어 있다면 자동으로 해당 유튜브의 썸네일을 썸네일로 표시하는 스크립트입니다. 대부분 스킨 제작자가 썸네일을 첨부하지 않았을 때를 대비해 짜둔 스크립트가 존재할 텐데, 이 스크립트는 해당 스크립트와 충돌할 가능성이 있으니 주의해주세요. HTML <a href="[##_article_rep_link_##]" class="indexArticle">     <div class="index_thumbnail">         <img src="<s_article_rep_thumbnail>https://i1.daumcdn.net/thumb/R700x0/?fname=[##_article_rep_thumbnail_raw_url_##]</s_article_rep_thumbnail>" class="index_img" alt="[##_article_rep_title_##]">     </div>     <div class="tit_post">[##_article_rep_title_##]</div>     <div class="detail">         <div class="category">[##_article_rep_category_##]</div>         <div class="cnt-wrap"><img class="heart" src="./images/heart.svg">             <s_rp_count><span class="cnt">[##_article_rep_rp_cnt_##]</span></s_rp_count>         </div>     </div>     <div class="date hidden">[##_article_rep_date_##]</div> </a> 임의로...
[트게더 커스텀 CSS] 뽀게더
[트게더 커스텀 CSS] 뽀게더
트위치 스트리머 아구이뽀 님의 트게더입니다. 트게더 스킨은 처음 작업해보는데, 자바스크립트는 그렇다 치더라도 HTML도 건드릴 수가 없더라고요.웹 표준과 조금 거리가 있는 방식이지만 ::after, ::before 두 pseudo element를 십분 활용해서 만들었습니다. 먼저, 파스텔톤 밤하늘의 배경을 원하셔서, 보랏빛 밤하늘에 파스텔톤 달과 흰 별을 띄웠습니다.달에는 천천히 위아래로 움직이는 애니메이션, 뒤에 별은 깜빡이는 애니메이션을 추가했습니다.자바스크립트가 가능했다면 랜덤 위치에 별을 뿌려줬겠지만,...
트와이스 채영 버전 MGM 로고
트와이스 채영 버전 MGM 로고
으-른 맹수의 포효 Real CHAEYOUNG 올라오자 마자 움짤 찌다가 이 장면 보면 볼수록 MGM 인트로가 생각나서 만들어 봤습니다 ㅋㅋㅋ 애프터 이펙트랑 포토샵 적절히 섞어다가 만들었는데, 애프터 이펙트는 진짜 아무것도 할 줄 모르는 초보라 좀 헤맸네요…ㅠㅠ
190906 블로그 제작일지
190906 블로그 제작일지
드로워 사진으로 찍긴 좀 애매한데…두 가지 변화가 있습니다. 드로워를 여닫을 때 효과음을 추가했습니다. 뽁뽁거리는 소리가 나름 듣기 좋더라고요. 다음으로 드로워를 열고 스크롤을 내려도, 다음에 드로워를 열 땐 스크롤 위치가 초기화되도록 해뒀습니다. 홈 화면 예전부터 홈 화면을 갈아엎으려고 생각은 하고 있는데, 딱히 생각나는 디자인이 없네요. 그냥 제일 처음 표시되는 사진이라도 다른 거로 바꿔볼까 싶어 이 포스트에...
[티스토리] 태그로 글 가져오기
[티스토리] 태그로 글 가져오기
위 사진처럼 같은 태그를 가진 글을 불러오는 스크립트입니다. 워드프레스에선 꽤 간단하게 되는데, 티스토리엔 그런 기능이 없어 아쉬워서 만들어봤습니다. getPostsByTag = (tag, target, elem) => {   const ajax = new XMLHttpRequest;   let parser, e;   document.querySelector(target) === null || (     ajax.open("GET", `/tag/${encodeURI(tag)}`),     ajax.send(null),     ajax.onreadystatechange = () => {       (4 === ajax.readyState) && (         parser = new DOMParser().parseFromString(ajax.responseText, "text/html"),         e = parser.querySelectorAll(elem),         e.length === 0         ? target.innerText = "해당 태그의 글을 찾을 수 없습니다."         : (           Array.from(e).forEach(a => {             document.querySelector(target).append(a)           })         )       )     }   ) } 위 스크립트를 추가하신 다음 getPostsByTag("태그 이름", "컨테이너 선택자", "포스트 선택자") 위와 같이 함수를 호출하시면 됩니다. 컨테이너 선택자, 포스트 선택자 모두 CSS...
[T 전화 테마] Fancy You
[T 전화 테마] Fancy You
소개 트와이스 Fancy You 개인 티저 사진으로 만든 테마입니다. 아무래도 Fancy하면 떠오르는 색은 짙은 분홍인데, 느낌이 별로라 배경은 밝은 분홍색으로 했습니다. 지효 배를 커다란 나뭇잎이 다 가려서 2번째 버전으로 할까 생각도 잠깐 했는데, 2번째 버전은 모모, 채영이 가로 사진이고, 사진이 대체로 크게 찍혀서 테마로 만들긴 영 힘들 것 같아 그냥 1번째 버전으로 작업했습니다. 스크린샷 다운로드
16:9만 편애하는 T 전화
16:9만 편애하는 T 전화
지금까지 올린 테마 스크린샷을 유심히 보시면 키패드 윗부분이 살짝 뒤틀려있는 걸 보실 수 있을 겁니다. 지금까진 그냥 제가 DPI를 억지로 만진 부작용인 줄로만 알고 그냥 안심하고 올렸는데, 오늘 확인해보니 그냥 화면이 16:9가 아니면 모조리 뒤틀리는 거더라고요. 아무런 문제가 없습니다. 보시면 아시겠지만 모두 이미지가 뒤틀리고 있습니다 ㅠㅠ이건 뭐 이미지를 어떻게 만진다고 되는 것도 아니라서, 영 답답하네요....

Tips

티스토리 썸네일에 유튜브 썸네일 불러오기
티스토리 썸네일에 유튜브 썸네일 불러오기
위 이미지처럼 티스토리 썸네일이 아무것도 없을 때, 만약 글에 유튜브 영상이 포함되어 있다면 자동으로 해당 유튜브의 썸네일을 썸네일로 표시하는 스크립트입니다. 대부분 스킨 제작자가 썸네일을 첨부하지 않았을 때를 대비해 짜둔 스크립트가 존재할 텐데, 이 스크립트는 해당 스크립트와 충돌할 가능성이 있으니 주의해주세요. HTML <a href="[##_article_rep_link_##]" class="indexArticle">     <div class="index_thumbnail">         <img src="<s_article_rep_thumbnail>https://i1.daumcdn.net/thumb/R700x0/?fname=[##_article_rep_thumbnail_raw_url_##]</s_article_rep_thumbnail>" class="index_img" alt="[##_article_rep_title_##]">     </div>     <div class="tit_post">[##_article_rep_title_##]</div>     <div class="detail">         <div class="category">[##_article_rep_category_##]</div>         <div class="cnt-wrap"><img class="heart" src="./images/heart.svg">             <s_rp_count><span class="cnt">[##_article_rep_rp_cnt_##]</span></s_rp_count>         </div>     </div>     <div class="date hidden">[##_article_rep_date_##]</div> </a> 임의로...
[티스토리] 태그로 글 가져오기
[티스토리] 태그로 글 가져오기
위 사진처럼 같은 태그를 가진 글을 불러오는 스크립트입니다. 워드프레스에선 꽤 간단하게 되는데, 티스토리엔 그런 기능이 없어 아쉬워서 만들어봤습니다. getPostsByTag = (tag, target, elem) => {   const ajax = new XMLHttpRequest;   let parser, e;   document.querySelector(target) === null || (     ajax.open("GET", `/tag/${encodeURI(tag)}`),     ajax.send(null),     ajax.onreadystatechange = () => {       (4 === ajax.readyState) && (         parser = new DOMParser().parseFromString(ajax.responseText, "text/html"),         e = parser.querySelectorAll(elem),         e.length === 0         ? target.innerText = "해당 태그의 글을 찾을 수 없습니다."         : (           Array.from(e).forEach(a => {             document.querySelector(target).append(a)           })         )       )     }   ) } 위 스크립트를 추가하신 다음 getPostsByTag("태그 이름", "컨테이너 선택자", "포스트 선택자") 위와 같이 함수를 호출하시면 됩니다. 컨테이너 선택자, 포스트 선택자 모두 CSS...
워드프레스 포스트 조회수 확인하기
워드프레스 포스트 조회수 확인하기
들어가며 참고한 글 개인적으로 플러그인 사용을 선호하지 않아서, 플러그인 없이 개별 포스트에 카운터를 달 수 있게 작업했습니다. 위 글에 나온 소스를 적용하면, F5 누르면 누를 때마다 조회수가 올라가는 불상사가 벌어지기에, 그 부분만 수정했습니다. functions.php 수정 function getPostViews($postID) { $count_key = 'post_views_count'; $count = get_post_meta($postID, $count_key, true); if ($count == '') { delete_post_meta($postID, $count_key); add_post_meta($postID, $count_key,...
작업물
[트게더 커스텀 CSS] 뽀게더
트위치 스트리머 아구이뽀 님의 트게더입니다. 트게더 스킨은 처음 작업해보는데, 자바스크립트는 그렇다 치더라도 HTML도 건드릴 수가 없더라고요.웹 표준과 조금 거리가 있는 방식이지만 ::after, ::before 두 pseudo element를 십분 활용해서 만들었습니다. 먼저, 파스텔톤 밤하늘의 배경을 원하셔서, 보랏빛 밤하늘에 파스텔톤 달과 흰 별을 띄웠습니다.달에는 천천히 위아래로 움직이는 애니메이션, 뒤에 별은 깜빡이는 애니메이션을 추가했습니다.자바스크립트가 가능했다면 랜덤 위치에 별을 뿌려줬겠지만,...
Canvas 썸네일, 배너 제작기
깃허브 제작기 링크 소개 HTML5 Canvs를 이용해서 간단하게 썸네일, 배너 등에 쓸 수 있는 이미지를 제작할 수 있는 앱입니다. 이미지의 크기 조정, 텍스트 수정, 배경 색 및 글자 색 변경, 배경에 이미지 추가, 해당 이미지의 투명도 조절 등의 기능이 포함되어 있습니다. 포토샵 등의 도구보다 자유도는 떨어지지만, 배너나 썸네일을 만들기는 훨씬 수월합니다. 사용법 크기 조정 Canvas의...
티스토리 스킨 #13 - Kiss Me
티스토리 블로거 Kiss Me 님의 스킨입니다. 커버 화면의 모습입니다. 썸네일을 작게 4개씩 보여주는 리스트 썸네일을 1:1 비로 보여주는 리스트 배경에 썸네일이 들어간 리스트 갤러리형 리스트 총 4가지로 구성되어 있습니다. 좌측 드로워엔 관리자 프로필 구독, 이웃 추가, RSS 링크 링크 목록 방문자 수 티스토리 메뉴바 로 구성되어 있고 우측 드로워엔 홈, 방명록, 공지사항 바로 가기 카테고리...
티스토리 스킨 #11 - Summer Nights 2
5번 스킨인 Summer Nights와 비슷한 느낌으로 새로 만든 스킨입니다. 티스토리에서 추가한 커버 기능을 이용해 홈 화면을 다양하게 꾸밀 수 있도록 하고, 헤더 카테고리를 중앙 정렬시키는 등 다양한 개선이 이뤄진 버전입니다. 포스트 화면의 모습입니다.글에 집중할 수 있도록 1, 2단형 선택을 없애고 1단형으로 고정했습니다. 예전엔 글 목록을 표시할 때 Masonry 하나만 사용할 수 있었지만 2부터는 사진처럼 텍스트...