택대리의 첫 수정작 티스토리 스킨 #1 + 입니다.

택대리의 첫 수정작 티스토리 스킨 #1 + 입니다.

티스토리를 시작하고 거의 일주일 동안 스킨들을 다운 받아보고 사용해 보았습니다.

반응형이 대세이긴 한데 왠지 완성도가 떨어지거나 티스토리에서 제공하는 플러그 인의 적용이 무리스러운 것들이 있었습니다.

때문에 기존에 사용했던 웹 전용 스킨을 사용할까도 했습니다. 

그러다 티스토리에서 공식적으로 만들었다는 반응형 스킨 "#1"을 알게 되었습니다.

티스토리에서 제공하는 공식 반응형 스킨을 사용해보니 정말 안정적이고 무엇보다 속도가 ..

다른 스킨들에 비해 심플 깔끔하게 만들어졌다는 생각이 듭니다. 압축했을 때 전체 용량은 무려 93kb

반응형 웹스킨의 이름은 '#1'으로 '여러 이야기를 담을 수 있게 심플하고 어디에서도 읽기 좋은' 컨셉으로 만들어 졌다고 합니다.

개인적으로 흰색 바탕을 좋아하고 가볍고 심플한 것들을 좋아하는데 딱 그런 스킨이 었습니다.

그런데 어랏? 

제가 쓴 글들의 카테고리를 확인하려고 하면 오른쪽 상단의 카테고리 버튼을 눌러야만 확인할 수 있습니다.

게시글을 읽는 동안에도 카테고리를 확인 할 수 있으면 좀더 편할 것 같은데 버튼을 눌러야만 하다니.

그래서 왼쪽에도 카테고리 메뉴와 방명록을 넣기로 했습니다.

이제 겨우 HTML5 &  CSS3 만 이해한 수준이라 전체적인 수정은 불가능하고 간단하게 필요한 부분인 왼쪽 메뉴만 추가하는 작업을 하였습니다.

다른 메뉴들을 손댔다가 최적화 되어 있는 스킨이 미스가 나면서 로딩 시간이 더 걸리게 되더군요.

그래서 딱! 왼쪽 메뉴만 추가하였습니다.

1. 아래 화면처럼 왼쪽에 메뉴가 표시되었다가 

2. 모바일 환경에서는 메뉴가 사라집니다.

굳이 오른쪽 상단에 카테고리를 누르면 되는것을 왼쪽에 메뉴를 왜 더 만들었냐고 하면 할말이 없습니다.

개인적으로 필요해서라고 밖에는 ㅎㅎ

그리고 티스토리 블로그 스킨 공부한답시고 한번 해본 것이니 귀엽게 봐주세영 ! :)

HTML

<!--왼쪽 메뉴바-->

<div id="left_menu" class="left_menu_list">

• 분류 전체보기 (175)
  • 장사꾼택대리 (68)
  • 북촌도담 (5)
  • 인사동 마늘보쌈 (14)
  • 택대리네 고기집 (8)
  • 금융이야기 (8)
  • 택대리라이프 (41)
  • IT공부공부 (12)
  • Yammy in Korea (2)
  • CANNON 6D (13)
  • 사기관련자료정리(비공개) (0)

<ul id="left_guest">

<li ><a href="https://ptmazinga.tistory.com/guestbook">방명록</a></li>

</ul>

</div>

CSS

/*왼쪽 메뉴바*/

#left_menu{position:fixed;left:-5px;top:100px;width:150px;border-radius:5px;border:1px solid #dcdcdc;border-radius:5px;padding:15px;}

.left_menu_list ul li { line-height:18px }

.left_menu_list ul li a { display:block;padding-left:17px;margin-bottom:12px;font-size:12px;color:#333;height:17px }

.left_menu_list ul li.selected > a,

.left_menu_list ul li a:hover { text-decoration:underline;color:#36b39e }

.left_menu_list ul li ul li a {  }

.left_menu_list ul li ul li ul { padding-bottom:6px; margin-top:-6px }

.left_menu_list ul li ul li ul li { color:#b4b4b4; padding-left:21px }

.left_menu_list ul li ul li ul li a { padding-left:0;margin-bottom:6px;font-size:12px;color:#666 }

.left_menu_list ul li ul li ul li a::before { content:'· ' }

#left_guest{margin-top: 20px;}

820px 이하일 때 왼쪽 메뉴바 사라짐 기능

@media only screen and (max-width:820px) { #left_menu{display:none;}

다운로드 파일 첨부도 어떻게 하는지 몰라 한참 헤맸네요 ㅋ

아래 파일을 다운로드 하시면 됩니다! 

#1 by 택대리.zip

아래 링크는 반응형 3단계로 수정한 글 링크입니다 :)

 -좌측 메뉴가 1200px에서부터 사라져서 메뉴와 본문이 겹치지 않게 수정했습니다.

http://ptmazinga.tistory.com/42

마지막으로 블로그 이웃 환영합니다 ㅎㅎ

이제 겨우 배운거 활용하는 것이니 미숙해도 이해 부탁드립니다 :)