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

겉모습은 비슷하지만 사실상 처음부터 만든 거라 그냥 넘버링을 따로 붙이기로 했습니다.첫 번째 버전의 소개는 이곳에 있습니다. 다운로드는 이곳에서 하실 수 있습니다. 대부분의 기능은 유지하되, 필요 없는 기능은 좀 빼고 필요한 기능들을 추가하고, 작동 방식을 변경한 기능도 꽤 됩니다. 간편한 옵션 제어 기존 버전과는 다르게, html의 편집 없이 한층 더 간편하게 옵션들을 켜고 끌 수 있습니다. 테마는 Snowy Snow 테마가 빠지고, Light와 Dark가 추가됐습니다. 테마 변경해보기 Light Dark Cool Summer Fruity Orange Lovely Heart 커버 자동 슬라이더 썸네일과 제목만 보여주는 리스트 Masonry를 사용한 리스트 그냥 평범한 리스트 썸네일이 배경으로 들어가는 ..

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

둥근모꼴 폰트를 보고 갑자기 만들고 싶어져서 시작한 스킨. 천리안, 하이텔, 나누우리 등 당시 운영되던 웹사이트를 참고하여 제작했습니다. 안타깝게도 홈 화면까지만 구상해두고 더는 진행하지 않았습니다.이유는 개인적으로 이미지 중심의 페이지를 좋아하는데, 이미지를 넣으니 예전 PC 통신 시절 웹사이트의 느낌이 나질 않아 중간에 그만두게 되었습니다 ㅠㅠ 홈 화면입니다.푸른 바탕에 당시 사용하던 헤더의 디자인을 가져왔습니다. 카테고리를 당시 사용하던 게시판의 모양으로 정렬했습니다.페이지의 이동도 클릭이 아닌 카테고리 앞의 번호를 입력하면 해당 카테고리로 이동합니다. 예로 카테고리 1에 해당하는 1번을 입력하고 엔터를 누르면 이렇게 카테고리 1에 해당하는 페이지로 오게 됩니다. 외에도 이런저런 잡다한 명령어가 존..

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

습작이라 넘버링을 붙이는 게 맞는 건진 모르겠지만, 뭐 중간에 폐기한 스킨 아니면 어지간하면 넘버링을 붙여볼까 합니다. 이런저런 기능 다 쑤셔 넣으려는 욕심은 포기하고, 단순히 만들어봤습니다. body 안에 고정된 컨테이너를 만들고, 그 안에 요소들을 집어넣었습니다.body를 스크롤 하는 게 아니기에 투박한 스크롤 바보다 여기서 말했던 커스텀 스크롤 바를 사용했습니다. 컨테이너가 너무 커지면 보기 이상한 감이 있어, 1100px로 너비에 제한을 뒀습니다. 일단 글 화면은 제목이 있는 부분을 제외하면 별달리 작업하지 않았습니다.사용하기 시작할 때 목적에 맞게 손을 볼 예정입니다. 사이드 바의 모습. 공지사항 / 방명록 / 카테고리 세 가지 요소가 들어있고, 카테고리는 아코디언 카테고리를 적용했습니다. 댓글..

티스토리 스킨 #5 Summer Nights
티스토리 스킨 #5 Summer Nights

상세한 내용 및 다운로드 처음 만든 스킨 같은 스킨입니다.잡다한 기능을 넣을 수 있는 대로 넣었습니다. 잡다하게 길게 적어봐야 스킨 배포에 적은 글이랑 중복되는 내용 뿐일 것 같아 짧게 줄이겠습니다.

티스토리 스킨 #4 마무리
티스토리 스킨 #4 마무리

인덱스 비디오로 시작한 포스트가 많은 것 같아, 이번에는 글 목록 스크린 샷으로 시작해보려 합니다. 이제까지는 스킨 하나 틀을 잡아 놓고 그 틀을 완전히 벗어나야 하는 스킨이 만들고 싶은 경우가 아니면 한 스킨을 계속 잡고 늘어지고 있었습니다. 그래서 '마무리'라는 제목의 글을 쓰게 될 거라고는 상상도 하지 않았고요.꽤 마음에 드는 스킨이고, 더욱 작업하고 싶은 욕구는 있으나, 뭘 해야 할지 생각나는 게 없어 여기서 멈춰보려 합니다. 물론 추가하고 싶은 게 생긴다면 하겠지만요.최적화도 나름으로 열심히 해서, 예전보다 훨씬 나은 결과를 봤습니다. 크롬 개발자 도구를 이용해 페이지 속도를 측정하며, 가장 불러오는데 오래 걸린 파일들을 차례로 손봐나가고, 이래저래 요청을 줄이려고 노력을 꽤 했습니다. 이번에는..

후다닥 만든 3번째 스킨
후다닥 만든 3번째 스킨

위 배너는 태블릿을 산 기념으로 직접 적었다.폰트로 작업하는 게 훨씬 깔끔 이야 하겠지만, 뭔가 의미는 이쪽이 더 있을 듯하여 직접 그린 배너로 적용했다. background-image가 굉장히 적용이 이상하게 될 때가 많았다.body에 그냥 적용해놓으면 모바일 크롬에서 표시가 이상하게 되며, 심지어 주소창이 사라지면 그 부분만큼 아래에 공백이 생기는 참사가 발생한다.1cs 123456789#fixed_bg { background-image: url(./images/bg.jpg); position: fixed; background-size: cover; width: 100vw; height: 100vh; z-index: -1; top:0;}Colored by Color Scriptercs이렇게 간단하게 ..

최대한 심플하게 제작 중인 두 번째 스킨
최대한 심플하게 제작 중인 두 번째 스킨

하나는 만들다가 버리고 그냥 최대한 취향을 담아 만드는 중인 두 번째 스킨. http://html-test.tistory.com 항상 그래 왔듯 테스트는 여기서 하는 중이다. 틀은 다른 툴을 이용해 잡더라도 치환자들 때문에 그 후 작업은 모조리 티스토리에서 해야 한다는 점은 항상 불편하게 다가온다...검은 바탕을 좋아해 이번엔 검은 바탕에서 스킨을 만들어 봤다. 흑백을 바탕으로 하고 각을 잡아 놓으니 고급스러운 느낌을 준다는 생각이 들기도 하고, 무엇보다 마음에 든다.지금 스킨은 데스크탑에서 좀 허전하다는 느낌을 주는데, 이번 스킨에선 왼쪽 사이드바를 데스크탑에선 자동으로 확장되도록 했다.첫 스킨과 두 번째 스킨은 심플하게 제작했으니 세 번째 스킨은 최대한 시각 효과들을 넣어볼까 생각 중인데 아무래도 취..

첫 번째 티스토리 스킨 백업
첫 번째 티스토리 스킨 백업

두 번째 스킨이 어느 정도 윤곽이 잡혀가는 기분이고, 이 스킨을 완성도 안 하고 대뜸 이 블로그로 가져왔을 때처럼, 일을 저질러놔야 조금이라도 더 빨리하지 않을까 하는 생각에 첫 번째 스킨은 여기서 정리를 해놓고 두 번째 스킨에만 집중할 생각이다.http://marshall-ku.tistory.com/29http://marshall-ku.tistory.com/31http://marshall-ku.tistory.com/33 http://marshall-ku.tistory.com/35 http://marshall-ku.tistory.com/36http://marshall-ku.tistory.com/38 http://marshall-ku.tistory.com/39 http://marshall-ku.tistor..

스킨/스킨 목록
잡담
갤러리