최근 글
인기 글
스킨 목록
티스토리 반응형 스킨 #11 Summer Nights 2
겉모습은 비슷하지만 사실상 처음부터 만든 거라 그냥 넘버링을 따로 붙이기로 했습니다. 첫 번째 버전의 소개는 이곳에 있습니다. 다운로드는 이곳에서 하실 수 있습니다. 대부분의 기능은 유지하되, 필요 없는 기능은 좀 빼고 필요한 기능들을 추가하고, 작동 방식을 변경한 기능도 꽤 됩니다. 간편한 옵션 제어 기존 버전과는 다르게, html의 편집 없이 한층 더 간편하게 옵션들을 켜고 끌 수 있습니다. 테마는 Snowy Snow..
티스토리 반응형 스킨 #10 PC 통신
둥근모꼴 폰트를 보고 갑자기 만들고 싶어져서 시작한 스킨. 천리안, 하이텔, 나누우리 등 당시 운영되던 웹사이트를 참고하여 제작했습니다. 안타깝게도 홈 화면까지만 구상해두고 더는 진행하지 않았습니다. 이유는 개인적으로 이미지 중심의 페이지를 좋아하는데, 이미지를 넣으니 예전 PC 통신 시절 웹사이트의 느낌이 나질 않아 중간에 그만두게 되었습니다 ㅠㅠ 홈 화면입니다. 푸른 바탕에 당시 사용하던 헤더의 디자인..
티스토리 반응형 스킨 #9 Lovely Pink
습작이라 넘버링을 붙이는 게 맞는 건진 모르겠지만, 뭐 중간에 폐기한 스킨 아니면 어지간하면 넘버링을 붙여볼까 합니다. 이런저런 기능 다 쑤셔 넣으려는 욕심은 포기하고, 단순히 만들어봤습니다. body 안에 고정된 컨테이너를 만들고, 그 안에 요소들을 집어넣었습니다. body를 스크롤 하는 게 아니기에 투박한 스크롤 바보다 여기서 말했던 커스텀 스크롤 바를 사용했습니다. 컨테이너가 너무 커지면 보기 이상한 감이 있..
티스토리 스킨 #5 Summer Nights
상세한 내용 및 다운로드 처음 만든 스킨 같은 스킨입니다. 잡다한 기능을 넣을 수 있는 대로 넣었습니다. 잡다하게 길게 적어봐야 스킨 배포에 적은 글이랑 중복되는 내용 뿐일 것 같아 짧게 줄이겠습니다.
각종 팁
Tips /
[JS] 랜덤으로 강력한 비밀번호 만들기
결과물 : https://marshall-ku.github.io/Strong-Password-Generator/ 깃허브 : https://github.com/marshall-ku/Strong-Password-Generator 무작위로 섞인 스트링을 만드는 스크립트입니다. 크롬에서 특정 사이트에 회원가입을 하려 하면 어차피 크롬에 저장되니 어려운 패스워드 쓰라면서 패스워드를 만들어주길래, 재밌는 기능 같아 만들어봤습니다. document.getElementById("psbtn").addEventListener("click", function (..
Tips /
자바스크립트 키코드 확인하기
https://marshall-ku.github.io/Javascript-Keycode/ 자바스크립트 "keydown", function 등을 사용하는 키 코드나 키가 헷갈릴 때 사용할 수 있는 페이지입니다. /* 원활한 사용을 위해 원래 사용하시던 단축키는 대부분 비활성화했습니다. ctrl + w 같은 건 잘 먹힙니다. */ 접속해서 아무 키나 누르시면 event.key event.location event.which event.code 네 가지 옵션을 확인하실 수 있습니다. event.which 에 적힌 내용이 e..
Tips /
[JS] 회문인지 확인하기
간단한 스크립트를 통해 받은 스트링이 팔린드롬(palindrome)인지 확인합니다. // 팔린드롬 : 거꾸로 읽어도 내용이 같은 낱말 혹은 문장 palindrome = str => { const blank = / /g, // 공백 special = /[`~!()-?;:'",.<>\{\}\[\]\\\/]/g, //문장 부호 string = String(str).toLocaleLowerCase().replace(blank, "").replace(special, ""), // 스트링으로 변환 후 소문자로 변환하고 공백과 문장 부호 제거 reverse = string.sp..
Tips /
[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..
Tips /
[JS] 댓글에 이미지, 비디오, 유튜브 등 첨부하기
내용 자체는 앞서 한 포스트에서 크게 바뀌지 않았습니다만, 조금 더 알아보고 수정하기 쉽게 재작업했습니다. 텍스트 내에서 url을 찾고, 그 url이 이미지인지, 비디오인지, 오디오인지, 유튜브 비디오인지 판별해서 적절한 태그로 감싸줍니다. 간단하게 댓글에 이미지 비디오 등을 넣고 싶으실 때 사용하시면 됩니다. function autowrap() { var c = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_..
갤러리
190406 장안사
오륙도 스카이워크
멀리서 오륙도를 본 적은 많은데 이렇게 가까이 가본 건 처음이네요. 졸업식을 끝마치고 얼마 안 된 시간이라, 바다가 굉장히 눈부십니다. 오륙도 반대편을 찍은 사진인데, 아마 위치상 해운대가 아닐까 싶습니다. 스카이워크에서 팔 뻗고 찍은 사진입니다. 떨어뜨릴까 조마조마했네요... 망원경에 대고 섬을 확대해 찍은 사진입니다. 제 렌즈가 마침 망원경에 딱 맞아, 굉장히 깔끔하게 나왔네요 ㅋㅋㅋ 뭐..
길 가다 예뻐서 찍은 달
달이 예뻐서 차를 타고 가다가 급하게 휴대폰 카메라로 찍었습니다. 역시 휴대폰 카메라로 밤하늘을 담아내는 건 큰 욕심이었습니다 ㅠㅠ
아듀 2018
흰여울 문화마을에서 찍은 하늘 태종대 산책하며 찍은 일몰 이제 2018년도 끝이다!