TWICE FANCY
마인크래프트 약탈 업데이트 레이드 후기
이번 BE 1.11.0 업데이트와 함께 추가된 나쁜 징조(bad_omen) 디버프가 꽤 재밌어 보여 한 번 해봤습니다. 관련 도전과제가 4개 추가되었습니다. Sound the Alarm! - 경보 발동! I've got a bad feeling about this - 안 좋은 예감 We're being attacked! - 공격당한다! Kill the Beast! - 야수 처치! 레이드를 모두 마쳐도 Sound the Alarm!은 완료되지 않더군요;; 혹시 몰라서 웨이브 올 때마다 종 열심히 때렸는데도요...ㅠㅠ..
더보기
[JS] 랜덤으로 강력한 비밀번호 만들기
결과물 : https://marshall-ku.github.io/Strong-Password-Generator/ 깃허브 : https://github.com/marshall-ku/Strong-Password-Generator 무작위로 섞인 스트링을 만드는 스크립트입니다. 크롬에서 특정 사이트에 회원가입을 하려 하면 어차피 크롬에 저장되니 어려운 패스워드 쓰라면서 패스워드를 만들어주길래, 재밌는 기능 같아 만들어봤습니다. document.getElementById("psbtn").addEventListener("click", function (..
더보기
트와이스 전집 가사집 FANCY YOU 업데이트
가사집 링크 기다리고 기다리던 FANCY YOU 발매일입니다! Strawberry는 딸기같이 텍스트도 꾸며봤습니다. 전곡 가사는 이미 다 넣었고, FANCY는 확실히 색도 다 입혔습니다. 수록곡은 Stuck in my head 제외하곤 전부 일단 건드리긴 건드렸습니다. Stuck in my head는 처음부터 어려워서 하기가 싫어지더라고요..;; 아무런 자료 없이 귀로만 판단하려니 좀 힘드네요 ㅠㅠ 예전부터 만들까 생각만 하던 기능입니다. 가사 일부..
더보기
자바스크립트 키코드 확인하기
https://marshall-ku.github.io/Javascript-Keycode/ 자바스크립트 "keydown", function 등을 사용하는 키 코드나 키가 헷갈릴 때 사용할 수 있는 페이지입니다. /* 원활한 사용을 위해 원래 사용하시던 단축키는 대부분 비활성화했습니다. ctrl + w 같은 건 잘 먹힙니다. */ 접속해서 아무 키나 누르시면 event.key event.location event.which event.code 네 가지 옵션을 확인하실 수 있습니다. event.which 에 적힌 내용이 e..
더보기
[JS] 회문인지 확인하기
간단한 스크립트를 통해 받은 스트링이 팔린드롬(palindrome)인지 확인합니다. // 팔린드롬 : 거꾸로 읽어도 내용이 같은 낱말 혹은 문장 palindrome = str => { const blank = / /g, // 공백 special = /[`~!()-?;:'",.<>\{\}\[\]\\\/]/g, //문장 부호 string = String(str).toLocaleLowerCase().replace(blank, "").replace(special, ""), // 스트링으로 변환 후 소문자로 변환하고 공백과 문장 부호 제거 reverse = string.sp..
더보기

스킨 목록

티스토리 반응형 스킨 #11 Summer Nights 2
겉모습은 비슷하지만 사실상 처음부터 만든 거라 그냥 넘버링을 따로 붙이기로 했습니다. 첫 번째 버전의 소개는 이곳에 있습니다. 다운로드는 이곳에서 하실 수 있습니다. 대부분의 기능은 유지하되, 필요 없는 기능은 좀 빼고 필요한 기능들을 추가하고, 작동 방식을 변경한 기능도 꽤 됩니다. 간편한 옵션 제어 기존 버전과는 다르게, html의 편집 없이 한층 더 간편하게 옵션들을 켜고 끌 수 있습니다. 테마는 Snowy Snow..
티스토리 반응형 스킨 #10 PC 통신
둥근모꼴 폰트를 보고 갑자기 만들고 싶어져서 시작한 스킨. 천리안, 하이텔, 나누우리 등 당시 운영되던 웹사이트를 참고하여 제작했습니다. 안타깝게도 홈 화면까지만 구상해두고 더는 진행하지 않았습니다. 이유는 개인적으로 이미지 중심의 페이지를 좋아하는데, 이미지를 넣으니 예전 PC 통신 시절 웹사이트의 느낌이 나질 않아 중간에 그만두게 되었습니다 ㅠㅠ 홈 화면입니다. 푸른 바탕에 당시 사용하던 헤더의 디자인..
티스토리 반응형 스킨 #9 Lovely Pink
습작이라 넘버링을 붙이는 게 맞는 건진 모르겠지만, 뭐 중간에 폐기한 스킨 아니면 어지간하면 넘버링을 붙여볼까 합니다. 이런저런 기능 다 쑤셔 넣으려는 욕심은 포기하고, 단순히 만들어봤습니다. body 안에 고정된 컨테이너를 만들고, 그 안에 요소들을 집어넣었습니다. body를 스크롤 하는 게 아니기에 투박한 스크롤 바보다 여기서 말했던 커스텀 스크롤 바를 사용했습니다. 컨테이너가 너무 커지면 보기 이상한 감이 있..
티스토리 스킨 #5 Summer Nights
상세한 내용 및 다운로드 처음 만든 스킨 같은 스킨입니다. 잡다한 기능을 넣을 수 있는 대로 넣었습니다. 잡다하게 길게 적어봐야 스킨 배포에 적은 글이랑 중복되는 내용 뿐일 것 같아 짧게 줄이겠습니다.

각종 팁

thumbnail
[JS] 랜덤으로 강력한 비밀번호 만들기
결과물 : https://marshall-ku.github.io/Strong-Password-Generator/ 깃허브 : https://github.com/marshall-ku/Strong-Password-Generator 무작위로 섞인 스트링을 만드는 스크립트입니다. 크롬에서 특정 사이트에 회원가입을 하려 하면 어차피 크롬에 저장되니 어려운 패스워드 쓰라면서 패스워드를 만들어주길래, 재밌는 기능 같아 만들어봤습니다. document.getElementById("psbtn").addEventListener("click", function (..
thumbnail
자바스크립트 키코드 확인하기
https://marshall-ku.github.io/Javascript-Keycode/ 자바스크립트 "keydown", function 등을 사용하는 키 코드나 키가 헷갈릴 때 사용할 수 있는 페이지입니다. /* 원활한 사용을 위해 원래 사용하시던 단축키는 대부분 비활성화했습니다. ctrl + w 같은 건 잘 먹힙니다. */ 접속해서 아무 키나 누르시면 event.key event.location event.which event.code 네 가지 옵션을 확인하실 수 있습니다. event.which 에 적힌 내용이 e..
thumbnail
[JS] 회문인지 확인하기
간단한 스크립트를 통해 받은 스트링이 팔린드롬(palindrome)인지 확인합니다. // 팔린드롬 : 거꾸로 읽어도 내용이 같은 낱말 혹은 문장 palindrome = str => { const blank = / /g, // 공백 special = /[`~!()-?;:'",.<>\{\}\[\]\\\/]/g, //문장 부호 string = String(str).toLocaleLowerCase().replace(blank, "").replace(special, ""), // 스트링으로 변환 후 소문자로 변환하고 공백과 문장 부호 제거 reverse = string.sp..
thumbnail
[JS] 스크롤 인디케이터 만들기
사용자가 글을 얼마나 읽었는지 표시해주는 막대를 화면에 첨부하는 방법입니다. 물론 옆에 있는 스크롤 바로도 알 수 있는 정보지만, 디자인도 훨씬 간단하게 수정이 가능할뿐더러, 이 페이지처럼 글에도 Infinite-scroll을 적용했다면 더더욱 필요한 기능입니다. 완성본 See the Pen Scroll Indicator by Marshall (@marshall-ku) on CodePen. HTML <div id="scroll_container"><div id="scroll"></div></div> CSS #scroll_co..
thumbnail
[JS] 댓글에 이미지, 비디오, 유튜브 등 첨부하기
내용 자체는 앞서 한 포스트에서 크게 바뀌지 않았습니다만, 조금 더 알아보고 수정하기 쉽게 재작업했습니다. 텍스트 내에서 url을 찾고, 그 url이 이미지인지, 비디오인지, 오디오인지, 유튜브 비디오인지 판별해서 적절한 태그로 감싸줍니다. 간단하게 댓글에 이미지 비디오 등을 넣고 싶으실 때 사용하시면 됩니다. function autowrap() { var c = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_..
스킨/스킨 목록
잡담
갤러리