최근 글
인기 글
스킨 목록
티스토리 반응형 스킨 #11 Summer Nights 2
겉모습은 비슷하지만 사실상 처음부터 만든 거라 그냥 넘버링을 따로 붙이기로 했습니다. 첫 번째 버전의 소개는 이곳에 있습니다. 다운로드는 이곳에서 하실 수 있습니다. 대부분의 기능은 유지하되, 필요 없는 기능은 좀 빼고 필요한 기능들을 추가하고, 작동 방식을 변경한 기능도 꽤 됩니다. 간편한 옵션 제어 기존 버전과는 다르게, html의 편집 없이 한층 더 간편하게 옵션들을 켜고 끌 수 있습니다. 테마는 Snowy Snow..
티스토리 반응형 스킨 #10 PC 통신
둥근모꼴 폰트를 보고 갑자기 만들고 싶어져서 시작한 스킨. 천리안, 하이텔, 나누우리 등 당시 운영되던 웹사이트를 참고하여 제작했습니다. 안타깝게도 홈 화면까지만 구상해두고 더는 진행하지 않았습니다. 이유는 개인적으로 이미지 중심의 페이지를 좋아하는데, 이미지를 넣으니 예전 PC 통신 시절 웹사이트의 느낌이 나질 않아 중간에 그만두게 되었습니다 ㅠㅠ 홈 화면입니다. 푸른 바탕에 당시 사용하던 헤더의 디자인..
티스토리 반응형 스킨 #9 Lovely Pink
습작이라 넘버링을 붙이는 게 맞는 건진 모르겠지만, 뭐 중간에 폐기한 스킨 아니면 어지간하면 넘버링을 붙여볼까 합니다. 이런저런 기능 다 쑤셔 넣으려는 욕심은 포기하고, 단순히 만들어봤습니다. body 안에 고정된 컨테이너를 만들고, 그 안에 요소들을 집어넣었습니다. body를 스크롤 하는 게 아니기에 투박한 스크롤 바보다 여기서 말했던 커스텀 스크롤 바를 사용했습니다. 컨테이너가 너무 커지면 보기 이상한 감이 있..
티스토리 스킨 #5 Summer Nights
상세한 내용 및 다운로드 처음 만든 스킨 같은 스킨입니다. 잡다한 기능을 넣을 수 있는 대로 넣었습니다. 잡다하게 길게 적어봐야 스킨 배포에 적은 글이랑 중복되는 내용 뿐일 것 같아 짧게 줄이겠습니다.
각종 팁
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+&@#\/%=~_..
Tips /
[JS, CSS] 스크롤 밖으로 나가면 비디오 고정하기
스크롤을 내려보세요! 비디오가 화면에 보이지 않으면, 좌측 하단에 position:fixed인 상태로 고정해줍니다. HTML에 첨부(embed)하는 비디오에 사용할 수 있는 스크립트입니다. 유튜브, 네이버 TV, 카카오 TV 등 꽤 많은 비디오 공유 사이트에서 퍼온 비디오에 정상적으로 작동합니다. Iframe을 반응형으로 감싸는 스크립트(링크)가 있어야 작동합니다. Github Codepen 깃허브와 코드펜 모두 Iframe을 반응형으로 감싸는 스크립..
Tips /
[JS] 간단한 계산기 만들기
아는 동생한테 html, css 적당히 가르쳐주고 이제 javascript 차롄데...jQuery 배우니 바로 계산기부터 만든다더라고요. C를 배워서 그런가... 당연히 하루 배워서 계산기 만들기는 무리였고..제가 짜봤습니다. See the Pen Simple Calculator by Marshall (@marshall-ku) on CodePen. 간단한 작동만 테스트한 거라, 모든 상황에서 잘 작동할진 모르겠습니다. 아래는 바닐라 스크립트로 짠 스크립트입니다. 귀찮아서 버튼에 애..
Tips /
[JS] 생일까지 남은 날짜 계산하기
Github Demo 자바 스크립트를 이용해 생일까지 남은 날짜를 계산하는 방법입니다. 날짜만 설정하면 D-day에 Happy Birthday!란 메시지를 출력해주고, D-day 다음 날부터는 자동으로 내년으로 D-day를 변경합니다. 스크린 샷에서 아실 수 있듯, 초 단위로 표시해주며 0.5초마다 html의 내용을 갱신합니다. 굳이 초 단위는 필요 없으시면 초와 관련된 js를 제거하시고 갱신 주기를 늘려주세요. HTML <section id="birthday"> <div..
갤러리
190406 장안사
오륙도 스카이워크
멀리서 오륙도를 본 적은 많은데 이렇게 가까이 가본 건 처음이네요. 졸업식을 끝마치고 얼마 안 된 시간이라, 바다가 굉장히 눈부십니다. 오륙도 반대편을 찍은 사진인데, 아마 위치상 해운대가 아닐까 싶습니다. 스카이워크에서 팔 뻗고 찍은 사진입니다. 떨어뜨릴까 조마조마했네요... 망원경에 대고 섬을 확대해 찍은 사진입니다. 제 렌즈가 마침 망원경에 딱 맞아, 굉장히 깔끔하게 나왔네요 ㅋㅋㅋ 뭐..
길 가다 예뻐서 찍은 달
달이 예뻐서 차를 타고 가다가 급하게 휴대폰 카메라로 찍었습니다. 역시 휴대폰 카메라로 밤하늘을 담아내는 건 큰 욕심이었습니다 ㅠㅠ
아듀 2018
흰여울 문화마을에서 찍은 하늘 태종대 산책하며 찍은 일몰 이제 2018년도 끝이다!