1. 비디오 변경 Heart Shaker > Knock Knock 예전엔 압축된 webm파일만 넣어놔서 PC에선 화질이 많이 별로였는데, 이번엔 MP4 파일도 함께 넣어놨다. 2. 헤더 이미지 추가카테고리나 검색 결과에도 동영상이 보이는 건 조금 과하다 판단되어 이미지로 대체했다. about 이미지와 방명록 이미지에 펜 위치가 달랐었는데, 모든 이미지에 같은 위치에 펜이 있도록 수정했다. 3. 블로그 아이콘 수정 더는 트와이스 로고가 아니다. 4. 커서 이미지 변경위 사진 외에도 링크, 텍스트 두 개의 커서를 맥 느낌이 나도록 변경했다. 5. 고민 중인 것, 시도 중인 것 최근 글, 최근 덧글, 방문자 수 등의 위치- 앞서 제작했던 스킨들에선 사이드 네비게이션을 하나 추가하는 방식을 거의 이용했었는데, ..

들어오면 이 영상이 나오도록 하였는데, 신곡을 사용하고 싶어도 신곡은 영상을 끊을 타이밍이 애매해서 Heart Shaker 뮤직비디오를 사용했다.헤더는 원래 쭉 고정되어 있도록 했다가, 이런저런 판단 끝에 비디오가 끝나면 내려오는 방향이 좋을 것 같아서 비디오가 끝나면 나타나도록 변경했다. 비디오 등이 페이드아웃 되는 시점은 jquery scrollex를 이용하였고, 헤더의 등장 애니메이션은 css를 이용했다.1234567891011@keyframes reveal-top { 0% { top: -4em; opacity: 0; } 100% { top: 0; opacity: 1; }}cs여타 태그들과 마찬가지로 -ms- -moz-등을 이용해서 설정을 해줬다.ex) @-ms-keyframes 사이드 네비게이션은..

제대로 정리가 된 곳이 없어 이래저래 혼자 해결을 했다.1234body::-webkit-scrollbar { width: 10px; background: transparent;}cshttps://wiki.stillh.art/page/SJ4yEEClg/Transparent-Scrollbar-over-Content 이곳의 코드를 참고하여 시작했다. 배경이 위 사이트처럼 별것이 없다면, 이렇게 해준 뒤 적절하게 scrollbar thumb의 색을 변경해주면 된다.그런데, background-image가 들어가거나 하는 상황이 발생하면 작동하지가 않는다.엄밀히 말하자면, 스크롤 바 트랙의 색상이 다시 생겨버린다. 허나 배경이 단색이면 도대체 스크롤 바가 투명일 필요가 없지 않을까. 그냥 똑같은 색으로 지정을 해..

갤러리 카테고리 사진을 잘 찍지는 않지만, 고양이나 개를 키우면서 가끔 꼭 사진으로 남기고 싶을 치명적인 귀여움을 뽐낼 때가 있는데, 그럴 때마다 찍어서 기록해놓으려고 갤러리 카테고리를 신설했다. body id로는 특정 카테고리마다 css를 달리할 수가 없으니, 이 포스트에서 사용한 방식을 이용했다. 제목과 날짜면 충분하다고 생각해서, 그 이상의 정보는 넣지 않았다. 목차 우측에 표시되고 있는 목차다. 이런 제작 일지 처럼 목차가 있으면 글이 훨씬 효과적인 글들이 몇 개 있다. 그런 글들을 위해서 한 번 목차를 넣어보게 되었다. 출처 @Hakim 님의 소스를 참고했다. 디자인 보통은 본문 옆에 옆 바를 제작해놓는데, 이것 또한 옆 바를 제작해놓은 페이지에 어울리는 목차였다. 그런데 개인적으로 본문 옆에 ..

1. a태그 수정 Google 처음엔 두 영역의 너비를 일치시키며 링크도 표시하려고 이런저런 시도를 했는데, 글자 간격이나 크기를 조절하면 너무 이상해 보여서 링크를 자르는 방식으로 진행 중이었는데, 묘한 오빠님께서 아무래도 링크가 다 보이면 좋겠다는 말씀에, 수정하게 됐다. min-width 값으로 링크가 더 짧은 경우도 이상해보이진 않도록 해뒀다. 아무래도 두 마리 토끼를 다 잡는 건 욕심이었나 보다. 2. 팝업 버튼에 유튜브 삽입 💕Heart Shaker💕 ✕ Twice - Heart Shaker MV 💕Knock Knock💕 ✕ Twice - Knock Knock MV 12345678910.dialog .youtubevid { position: relative; width: 100%; paddin..

1. 헤더 및 배너 변경2. 제목 변경3. a태그 변경헤더 리스트 옆 아이콘을 💕에서 로 변경했다.배너는 인덱스 페이지에서만 표시하기 아까워서 모든 페이지에 표시 중이었는데, 본문과 상관없는 이미지가 데스크탑에선 페이지 전체를, 모바일에선 페이지의 50%를 차지하는 것은 아무래도 아닌듯하여 인덱스 페이지에서만 표시되도록 변경했다.글 제목에 색들이 슬라이드 되도록 변경했다. ps. 이 포스트에서 사용했던 자바 스크립트를 사용해서 배너와 헤더를 건드렸는데, 1 이 한 줄이면 해결할 수 있었다. 왜 이런 건 치환자 가이드에 없는 걸까...12345678#tt-body-index .banner {display: block}.banner { display: none; color: #e2d1df; padding: ..

0. 자바스크립트 병합 및 축소테스트하느라 블로그에 산재하던 스크립트들을 한군데 모으고 최소화했다. 1. 프로필 이미지 변경예전부터 프로필을 gif로 하려고 했었는데프로필 이미지는 움직이는 이미지가 되질 않아서 비디오를 삽입했다.http://marshall-ku.tistory.com/44 여기 나온 이미지인데, 필터가 없으니 너무 칙칙하다 해서 필터를 적용했다. 2. 버튼들 색 조정아무래도 분홍은 너무 블로그의 전체적인 색감과 어울리지 않아서, 색을 변경했다. 확실히 한결 블로그와 어울린다. 3. 검색 버튼 수정없을 수는 없으니 구색만 맞춰놓은 검색창은 사라지고, 새로운 검색창으로 교체했다. 최근 블로그 로딩 시간 단축을 위해 최적화 작업을 하는 중인데, 인스타그램 API가 생각보다 시간을 많이 잡아먹을..

비디오(349.61kb) //원본이 수정된 관계로 아래 움짤과 밝기가 조금 달라졌고, 용량도 차이가 있으나 원본은 349.61kb GIF (4.68mb) gif는 프레임이 조금 잘리고 크기도 줄었지만, 당연하게 비디오 용량이 압도적으로 작다. 티스토리에 글을 쓸 때 움직이는 이미지(animated gif. APNG)를 삽입하고 싶을 때가 오기 마련이다. 그럴 때, 카카오 TV 등에 업로드한 후에, 동영상의 링크 (원문을 예로 들자면 https://tistory4.daumcdn.net/tistory/2837190/skin/images/20chaeng_Speed.mp4) 를 알아내야 한다. '공유하기'등을 누르면 나오는 페이지의 링크가 아닌 동영상의 링크가 필요하다. 그 링크만 알아낸다면 아래 코드에 집어넣..

0. 숨겨놨던 신고 버튼들을 원상복구시켰다. 정책 위반일줄은.. 1. 크롬을 까는 유용한 툴인 인터넷 익스플로러를 위한 안내창을 만들었다.솔직히 익스플로러까지 신경쓰면서 만들려면 할 수 있는게 별로 없다. 123 본 페이지는 익스플로러 환경에서 제대로 동작하지 않을 수 있습니다.cs 12345678910.explorer{ display:none; width:100%; text-align:center; background: black; margin: 10px auto; padding: 1rem; font-size: 1.5rem; color: white;}cs 1234var agent = navigator.userAgent.toLowerCase(); if ((navigator.appName == 'Netsc..