혼자 끄적이는 블로그

TWICE FANCY

Category Tag log Guestbook

스킨 변경

뭐 예전처럼 스킨을 변경하며 엄청나게 큰 변화를 준 건 아니라서, 얼핏 보면 바꾸긴 바꾼 건가 싶을 수도 있긴 합니다. 어제 만들기 시작해서 오늘 완성한 스킨이라, 뭘 많이 바꿀 시간도 없었긴 합니다..ㅋㅋㅋ 가장 큰 변화는 - 각종 디자인 변경 - 스크립트 최적화 이 두 가지를 꼽을 수 있겠네요. 디자인 변경점 글 화면도 그렇고, 전반적인 페이지에 배경 그래디언트를 제거했습니다. 큰 의미가 있는 건 아니고, 거의 항..

더보기

자바스크립트 퀵소트 / 퀵정렬

이미지 출처 Github Worst(최악) - n^2 Best(최선) - n log n Average(평균) - n log n 위와 같은 시간 복잡도를 가진 정렬 알고리즘입니다. 아래에서 테스트해보실 수 있습니다. Sort 버튼을 클릭하면 Textarea에 있는 내용을 정렬하고, Random을 누르면 Textarea의 내용을 0~1000까지 숫자 중 무작위로 100개 집어넣습니다. (중복 가능) 테스트 Sort Random 정렬된 결과가 출력됩니다. quicksort = (arr, l, r) => { let i;..

더보기

190516 크롬 확장프로그램 [트와이스 새 탭] 제작일지

익스텐션 링크 사족이지만, 저는 이 익스텐션이 굉장히 마음에 드네요 ㅎㅎ 유용하게 잘 쓰고 있습니다. 이제 영어도 지원합니다. 사용자의 언어가 한국어라면 한국어로 표시되고, 그 외의 언어라면 영어로 표시됩니다. 할 일 목록에 "할 일 완료"를 사용할 수 있게 됐습니다. 그와 관련해서 각종 옵션도 추가됐습니다. 완료한 일정은 화면 우측 하단에 있는 아이콘을 클릭하면 모아볼 수 있습니다. 다시 목록 앞의 동그라미..

더보기

크롬 확장 프로그램 [TWICE New Tab]

드디어 그나마 사용 가능한 버전을 만들었고, 크롬 웹 스토어에 게시했습니다. 스토어 링크 새 탭을 트와이스와 날씨, 할 일 목록 등으로 채울 수 있습니다. 매번 자주 가는 사이트 몇 개 보여주는 새 탭에서 벗어나, 한층 더 생산적인 새 탭을 활용해보세요! 최초 실행 시 보이는 화면입니다. 이름을 입력하고 엔터를 누르면 다음 화면으로 넘어갑니다. 이름이 저장됐단 알림과 함께 사용을 시작하실 수 있습니다. 화면 최상..

더보기

V 앱 svg 아이콘

V 앱(vlive.tv)의 svg 아이콘입니다. 하늘색 배경의 색상 코드는 #54f7ff, 남색 글자의 색상 코드는 #46465a 입니다. svg엔 기본적으로 색상을 넣지 않았으니, 사용하실 때 참고해주세요.

더보기

TWICE Discography

최신 글

2019.05.21 18:20

자바스크립트 퀵소트 / 퀵정렬

2019.05.18 13:03

190516 크롬 확장프로그램 [트와이스 새 탭] 제작일지

2019.05.16 21:56

크롬 확장 프로그램 [TWICE New Tab]

2019.05.14 02:02

V 앱 svg 아이콘

2019.05.13 15:53

190511 크롬 확장 프로그램 제작 일지

2019.05.11 01:45

크롬 확장 프로그램 제작 중입니다

2019.05.09 01:27

position:fixed와 transform

2019.05.07 01:28

인기 글

[마인크래프트 BE] 서버원들과 생존기 2 - 4

2019.04.25 14:40

티스토리 반응형 스킨 Lovely Pink 2.0 배포

2019.03.27 00:04

마인크래프트 약탈 업데이트 레이드 후기

2019.04.25 13:23

태연 전집 가사집

2019.03.22 21:34

[Javascript] 랜덤으로 강력한 비밀번호 만들기

2019.04.23 18:00

190501 기장 대변

2019.05.01 23:17

Parallax Scroll 플러그인

2019.04.29 23:47

티스토리 반응형 스킨 Summer Nights 2.0 배포

2019.03.21 16:33

스킨 목록

티스토리 반응형 스킨 #11 Summer Nights 2

겉모습은 비슷하지만 사실상 처음부터 만든 거라 그냥 넘버링을 따로 붙이기로 했습니다. 첫 번째 버전의 소개는 이곳에 있습니다. 다운로드는 이곳에서 하실 수 있습니다. 대부분의 기능은 유지하되, 필요 없는 기능은 좀 빼고 필요한 기능들을 추가하고, 작동 방식을 변경한 기능도 꽤 됩니다. 간편한 옵션 제어 기존 버전과는 다르게, html의 편집 없이 한층 더 간편하게 옵션들을 켜고 끌 수 있습니다. 테마는 Snowy Snow..

티스토리 반응형 스킨 #10 PC 통신

둥근모꼴 폰트를 보고 갑자기 만들고 싶어져서 시작한 스킨. 천리안, 하이텔, 나누우리 등 당시 운영되던 웹사이트를 참고하여 제작했습니다. 안타깝게도 홈 화면까지만 구상해두고 더는 진행하지 않았습니다. 이유는 개인적으로 이미지 중심의 페이지를 좋아하는데, 이미지를 넣으니 예전 PC 통신 시절 웹사이트의 느낌이 나질 않아 중간에 그만두게 되었습니다 ㅠㅠ 홈 화면입니다. 푸른 바탕에 당시 사용하던 헤더의 디자인..

티스토리 반응형 스킨 #9 Lovely Pink

습작이라 넘버링을 붙이는 게 맞는 건진 모르겠지만, 뭐 중간에 폐기한 스킨 아니면 어지간하면 넘버링을 붙여볼까 합니다. 이런저런 기능 다 쑤셔 넣으려는 욕심은 포기하고, 단순히 만들어봤습니다. body 안에 고정된 컨테이너를 만들고, 그 안에 요소들을 집어넣었습니다. body를 스크롤 하는 게 아니기에 투박한 스크롤 바보다 여기서 말했던 커스텀 스크롤 바를 사용했습니다. 컨테이너가 너무 커지면 보기 이상한 감이 있..

각종 팁

Tips / 2019.05.18 13:03

자바스크립트 퀵소트 / 퀵정렬

이미지 출처 Github Worst(최악) - n^2 Best(최선) - n log n Average(평균) - n log n 위와 같은 시간 복잡도를 가진 정렬 알고리즘입니다. 아래에서 테스트해보실 수 있습니다. Sort 버튼을 클릭하면 Textarea에 있는 내용을 정렬하고, Random을 누르면 Textarea의 내용을 0~1000까지 숫자 중 무작위로 100개 집어넣습니다. (중복 가능) 테스트 Sort Random 정렬된 결과가 출력됩니다. quicksort = (arr, l, r) => { let i;..

Tips / 2019.05.07 01:28

position:fixed와 transform

결론부터 간단히 짚고 넘어가자면, transform으로 위치를 옮긴 요소의 자식은 position: fixed를 써도 고정되지 않습니다. https://www.w3.org/TR/css-transforms-1/#transform-rendering 여기서 상세한 설명을 읽으실 수 있습니다. 요소에 배경을 넣으면 글자가 읽기 힘들어져서, 전 보통 이미지의 opacity를 낮추고 배경을 검은색으로 만든 뒤, 글자를 흰색으로 변경합니다. 그때, background-image의 opacity 조절을 위해 새..

Tips / 2019.04.29 23:47

Parallax Scroll 플러그인

출처 : 위키피디아 Parallax Scroll(패럴렉스 스크롤)은 위 움짤처럼 페이지를 스크롤 할 때 페이지와 배경 이미지 간 시차를 만들어서 움직이는듯한 느낌을 주는 것을 일컫습니다. 웹 페이지에 적용하기 위해 간단한 스크립트를 제작해봤습니다. 라이브 데모 & 설명서 : https://marshall-ku.github.io/Parallax-Scroll/ 깃허브 : https://github.com/marshall-ku/Parallax-Scroll 일전에 소개한 모바일 기기에서 background-a..

갤러리

190501 기장 대변

아빠 학교도 시험 기간이고, 어버이날도 코 앞이라 조부모님과 함께 간 기장. 노동절이라 그런지 사람이 엄청나게 많았다. 용암할매횟집이란 곳에서 밥을 먹었는데, 번호표를 뽑고 한참을 기다려야 들어갈 수 있었다. 멸치 무침. 이런 멸치는 처음 먹어보는데, 끝 맛이 생각보다 비렸다. 멸치구이. 별생각 없이 머리도 한 번 먹어봤는데, 생각보다 괜찮았지만, 어두육미는 공감을 못 하겠다. 당연하지만 생명체의 눈알도 처음..

190406 장안사

오륙도 스카이워크

멀리서 오륙도를 본 적은 많은데 이렇게 가까이 가본 건 처음이네요. 졸업식을 끝마치고 얼마 안 된 시간이라, 바다가 굉장히 눈부십니다. 오륙도 반대편을 찍은 사진인데, 아마 위치상 해운대가 아닐까 싶습니다. 스카이워크에서 팔 뻗고 찍은 사진입니다. 떨어뜨릴까 조마조마했네요... 망원경에 대고 섬을 확대해 찍은 사진입니다. 제 렌즈가 마침 망원경에 딱 맞아, 굉장히 깔끔하게 나왔네요 ㅋㅋㅋ 뭐..

길 가다 예뻐서 찍은 달

달이 예뻐서 차를 타고 가다가 급하게 휴대폰 카메라로 찍었습니다. 역시 휴대폰 카메라로 밤하늘을 담아내는 건 큰 욕심이었습니다 ㅠㅠ

티스토리툴바