꽤 예전에 업데이트하고 방치 중이었는데, 유저 수가 제가 마지막으로 확인했을 때보다 3배 가까이 늘었네요.어떻게 늘었는진 저도 잘 모르겠습니다… 여하튼, 새 앨범도 나왔으니 사진이라도 업데이트할까 싶어 오랜만에 vscode에서 열었다가, 서버도 있는데 트와이스 팬 페이지나 Canvas 썸네일 제작기처럼 서버에다 페이지를 넣어도 괜찮지 않을까 싶어서 반응형으로 디자인을 업데이트하는 중입니다. 제 서버로 페이지 옮겼을 때 장점- 모든 기기, 모든
모바일 전용 업데이트 먼저, 커스텀 스크롤바가 모바일에선 표시되지 않습니다. 쓸데없이 자리만 차지하는 느낌이더라고요. 다음으로, 드로워를 펼쳤을 때 뒤에 들어가는 그래디언트가 기기의 너비에 영향을 받지 않도록 수정했습니다. 기기의 너비에 영향을 받으면 모바일에선 뒤에 그래디언트가 생기다마는 느낌이더라고요. 마우스 오버 효과 변경 모바일 크롬에서 유독 홈 화면이랑 카테고리 아카이브 페이지에서만 렉이 꽤 생기길래, 원인을 찾으려고 자바스크립트 스크롤 이벤트
![[자바스크립트] 부모창과 자식창 정보 교환](https://cdn-t.marshallku.com/images/images/2019/09/window.opener.w500.png.webp)
window.open() 혹은 a (anchor) 태그에 target="_blank" 어트리븃을 붙여서 연 윈도우와 원래 윈도우 간 정보 교환하는 방법입니다.
T 전화 테마를 올릴 때 항상 이미지만 죽 나열하곤 했는데, 좀 더 테마 미리 보기 같은 느낌을 낼 순 없을까 싶어 만들어본 데모입니다. CSS로 휴대폰 목업을 만들고, 제 휴대폰과 동일한 화면 비를 갖도록 한 후에, 안에 이미지를 넣어주면 끝납니다. 화면을 클릭하시면 이미지 목록 레이어가 보이고, 이미지를 클릭하면 레이어가 사라지며 휴대폰 화면이 변경됩니다. 만들긴 했는데, 아무래도
뜬금없이 사파리가 발목을 잡는 날이네요. 쟤도 솔직히 인터넷 익스플로러에 가려서 그렇지 렌더링 엔진이 어지간히 개판인 것 같습니다. 스크롤바 웹킷 계열에서만 지원하는 방식이기에, 지금까진 쓰는 걸 좀 꺼렸습니다. 근데 backdrop-filter도 이렇게 써대는데, 까짓 스크롤바가 대순가 싶어서 그냥 간단하게 꾸며봤습니다. 이모티콘 첨부 지금까진 가로 860px, 세로 650px로 이모티콘 첨부 창을 띄웠는데, 큼직큼직하게 뜨도록 해뒀습니다. window.innerWidth를 너비로, window.outerHeight을
TWICE 페이지 먼저, 로딩 레이어가 사라지는 애니메이션을 좀 손봤습니다. 아무래도 영상이 재생되면서 로딩 레이어가 사라지는데, scale을 변경하는 애니메이션은 브라우저에 부담이 생각보다 커서, 영상 디코딩하느라 바쁠 GPU를 위해 translateX를 사용한 애니메이션으로 변경했습니다. 가사집 페이지의 스크립트도 좀 손봐뒀습니다. 예전엔 가사집에서 가사를 열 때, 해당 가사를 통째로 복사해서 다른 엘리먼트에 붙여 넣어 보여주는 좀 이상한 방식을 사용해서 가사를
위 이미지처럼 티스토리 썸네일이 아무것도 없을 때, 만약 글에 유튜브 영상이 포함되어 있다면 자동으로 해당 유튜브의 썸네일을 썸네일로 표시하는 스크립트입니다. 대부분 스킨 제작자가 썸네일을 첨부하지 않았을 때를 대비해 짜둔 스크립트가 존재할 텐데, 이 스크립트는 해당 스크립트와 충돌할 가능성이 있으니 주의해주세요.
드로워 사진으로 찍긴 좀 애매한데…두 가지 변화가 있습니다. 드로워를 여닫을 때 효과음을 추가했습니다. 뽁뽁거리는 소리가 나름 듣기 좋더라고요. 다음으로 드로워를 열고 스크롤을 내려도, 다음에 드로워를 열 땐 스크롤 위치가 초기화되도록 해뒀습니다. 홈 화면 예전부터 홈 화면을 갈아엎으려고 생각은 하고 있는데, 딱히 생각나는 디자인이 없네요. 그냥 제일 처음 표시되는 사진이라도 다른 거로 바꿔볼까 싶어 이 포스트에
![[티스토리] 태그로 글 가져오기](https://cdn-t.marshallku.com/images/images/2019/09/get-posts-by-tag.w500.png.webp)
위 사진처럼 같은 태그를 가진 글을 불러오는 스크립트입니다. 워드프레스에선 꽤 간단하게 되는데, 티스토리엔 그런 기능이 없어 아쉬워서 만들어봤습니다. 1. Array를 반환하는 버전 async function getPostsByTag({ tag, selector, title, date, desc, thumbnail }) {     const tagArray = await Promise.all(         tag.map((tagString) =>             getPosts({