[보러가기] ☞ 1. 웹 반응형 스킨 - "반응형 웹스킨"이 대세? 웹 반응형 스킨 설치하기! 

[보러가기] ☞ 2. 웹 반응형 스킨 - "반응형 웹스킨" Skeleton 스킨 - 사이드바 최근글 수정하기

[보러가기] ☞ 3. 웹 반응형 스킨 - "상단 메뉴바 수정" 반응형 스킨 내 블로그에 맞게 꾸미기

[현재글] ☞ 4. 웹 반응형 스킨 - "Skeleton 스킨" 화면 하단(푸터) 내 블로그에 맞게 바꾸기

- 웹 반응형 스킨(반응형웹 스킨 - 스켈레톤 스킨) ; 

수정하기 4탄! 화면 내용(푸터 내용) 내 블로그에 맞게 바꾸기

  안녕하세요. 이번에는 웹 반응형 스킨인 스켈레톤 스킨의 화면 레이아웃 수정의 마지막 순서가 되겠네요. 반응형 스킨 스켈레톤 스킨의 spider's web 스킨의 화면 하단에 보면 블로그에 대한 기본 정보와 저작권에 대한 내용이 담겨있습니다. 웹 반응형 스킨인 스켈레톤(Skeleton)스킨을 처음 설치하면 아래 그림과 같이 웹 반응형 스킨을 만든 마크쿼리님에 대한 정보와 기본정보가 나타납니다. 그럼 이제부터 웹 반응형 스킨의 화면 하단(푸터)를 자신의 블로그에 맞게 수정해 줘야 겠죠^^

<처음 반응형 웹스킨 "스켈레톤 스킨"을 설치했을 때, 설정되어 있는 모습입니다.>

아래 사진은 웹 반응형 스킨 - 스켈레톤 스킨을 설치한 저의 블로그 화면의 아래쪽(하단, 푸터) 모습입니다. 

지금부터 블로그에 맞게 수정해 봅시다^^

- 1단계 ; 반응형 스킨 - 스켈레톤 스킨 "HTML/CSS"에서 수정해야 할 부분 찾기.

  컨트롤(Ctrl)+ F - 찾기를 이용해서 "Skeleton-footer"를 찾아줍니다. 

 그러면 우리가 수정해야 할 부분이 보일겁니다. 왼쪽 그림의 빨간색 상자 부분을 본격적으로 수정해 봅시다^^

[첨부] 소스 다운받기 ;

스켈레톤스킨_화면하단 수정_인생은,여행이다.txt

※ 아래쪽에는 개발자 정보에 관한 내용인데 굳이 수정하지 않아도 되는 부분입니다.

- 2단계 ; 스켈레톤 스킨 HTML 본격적으로 수정하기.

(1) 자신의 블로그 주소로 바꿔줍니다.

(2) 블로그 년도 입력입니다. 저는 티스토리를 2007년부터 시작했기에 "2007-2014"로 입력해 놨습니다.

(3) 일반적으로 블로그 이름을 입력하는 부분입니다. 블로그 제목, 이름을 입력하시면 됩니다.

(4) 따로 설명할 것이 없네요.

(5) CCL표기 이미지 관련 부분입니다. "HTML"수정 부분을 보면 상당히 복잡해 보이는데 별 것 없습니다. 넣으셔도 되고, 안넣으셔도 됩니다. CCL마크를 사이드바에 표기하는 경우도 많습니다. 저도 사이드바에 있던 녀석을 아래로 내렸습니다.

(5)-1 ; CCL관련 링크입니다. - 클릭하게 되면 저작권에 대한 설명이 페이지로 이동하는 기능이 있습니다.

(5)-2 ;  CCL표기 - 이미지 표시, 파일 링크 부분입니다. 만약 자신의 블로그 사이드바나 본문에 CCL표기가 있다면, 마우스 오른쪽으로 이미지 주소 복사를 하셔서 주소를 붙이면 됩니다. 제가 제공한 소스를 그대로 가져다 쓰도 됩니다.(모든 블로그, 사이트의 CCL마크 이미지 주소는 동일)

(6) CCL 저작권 관련 메시지입니다.

별 것 없군요. 쉽죠?^^

- 웹반응형 스킨, 스켈레톤 스킨의 사이드바에 표시되어 있는 CCL 저작권 표기 위젯.

- 3단계 ; 스켈레톤 스킨 - 본문하단 정보 수정하기(2) 

[첨부] 소스 다운받기 ;

스켈레톤스킨_화면하단 수정_인생은,여행이다.txt

 <BR>명령어를 통해서 줄 구분을 해 줄 수 있습니다. <BR>하나에 1줄 입니다.

 "RSS"부분에 자신의 블로그 주소를 넣으면 됩니다. 

 지역로그, 태그목록, 관리자 모드 등은 자신의 취향에 맞게 선별해서 삭제하시거나 이용하시면 될 것 같습니다.

 더 이상 설명을 하지 않아도 자신의 블로그에 맞게 "웹 반응형 스킨(반응형 웹스킨)인 스켈레톤 스킨"을 수정할 수 있을 거라고 생각합니다^^

감사합니다^^

[보러가기]  ☞ 1. 웹 반응형 스킨 - "반응형 웹스킨"이 대세? 웹 반응형 스킨 설치하기! 

[보러가기] ☞ 2. 웹 반응형 스킨 - "반응형 웹스킨" Skeleton 스킨 - 사이드바 최근글 수정하기

[현재글] ☞ 3. 웹 반응형 스킨 - "상단 메뉴바 수정" 반응형 스킨 내 블로그에 맞게 꾸미기

[보러가기] ☞ 4. 웹 반응형 스킨 - "Skeleton 스킨" 화면 하단(푸터) 내 블로그에 맞게 바꾸기

- 웹 반응형 스킨 ; "스켈레톤 스킨 - 상단 메뉴바" 수정으로 반응형 웹스킨 최적화 하기 

Skeleton 스킨의 위쪽을 보면 "메뉴바"가 있습니다. 페이지 아래쪽으로 스크롤을 내려도 계속 따라오는 메뉴, 참 편한(?)녀석입니다. 글이 길거나 사진이 많은 블로그를 볼 때면 카테고리나 메뉴를 찾기 위해서 위쪽으로 다시 올라가야 하는 불편함을 덜어주는 녀석이죠. 물론 스켈레톤 스킨의 오른쪽에는 "Back to Top"이라고 적힌 녀석이 따라다니긴 합니다(그래서 항상 위쪽으로 갈 수 있죠) 하지만 상단 메뉴바를 잘 활용하면 관리자 측면에서 매우 편리한데요, 언제든지 관리 페이지로 이동하거나 글을 쓸 수 있다는 것이죠!

스킨을 설치하고 나서보면 처음에 이런 모습입니다. 

이 녀석을 수정해 줘야하는데, 어디서 어떻게 손을 대야할지 참 난감합니다. 

위에 이 녀석을 아래처럼 바꾸는 방법을 하나씩 천천히 알려드리겠습니다^^

-스켈레톤 스킨 "상단 메뉴바 수정" 첫 단계! - 수정 할 곳 찾아가기

관리자 페이지의 HTML/CSS 수정 페이지로 가서 

"Ctrl + F" 찾기로 "navbar-nav"를 검색 해서 상단 메뉴바를 수정하는 곳으로 이동합니다.

수정해야 할 부분이 얼마 되지 않는 군요.

본격적으로 한 번 손대 볼까요?

따로 설명하지 않았지만, 

왼쪽의 빨간 박스 아래쪽에 있는 검색도구를 삭제해도 무방합니다. 

저는 삭제를 하지 않고 그대로 두었기 때문에 이번 포스팅에서 따로 설명하지 않습니다^^

-스켈레톤 스킨 "상단 메뉴바 수정" 둘째 단계! - 명령어 이해하기

빨간 네모에 들어있는 명령어 들을 수정해 주면 되는데요, 

잠깐 설명을 하고 넘어가겠습니다.

"##_blog_link_##]category/"라고 되어 있는 부분은 "링크 되어야 할 카테고리"의 주소를 지정해 주는 곳입니다.  "[##_blog_link_##]"부분은 그냥 놔 두어도 되고, 지워도 되는 부분인데 저는 그냥 놔뒀습니다.

파란 네모로 블록 지정해 둔 곳이 "화면에 표시될 카테고리 이름"입니다. 실제 카테고리 이름과 달라도 상관 없습니다.

스킨이 수정되지 않은 상태의 메뉴가 그대로 보인다는 것을 알 수 있습니다.

"<il typeof=......." 으로 명령어가 시작하고 있는데요,  "< i l  >"명령어가 각각의 카테고리를 구분해 주는 역할을 합니다.

-스켈레톤 스킨 "상단 메뉴바 수정" 셋째 단계! - 메뉴바 HTML 본격적으로 수정하기

 그림과 같이 바뀌기 위해서, 

 명령어가 어떻게 바뀌었는지 볼까요?

뭔가, 대단히 복잡해 보입니다. 번호 순서대로 설명 들어가겠습니다.

1. 그대로 두시면 됩니다. 눌렀을 때 아래쪽으로 메뉴가 펼쳐지도록 하는 명령어 입니다.

2. 첫 번째 상단 메뉴바에 있는 것이 "카테고리" 입니다. 그래서 가장 첫번째로 "카테고리"가 있는 것입니다. 만약 영어로 "Category"라고 적고 싶으면, 수정하면 됩니다.

3. 연결 할 카테고리에 대한 정보입니다.

뒤에 나오는 href="##_blog_link## category와 함께 수정해 주시면 됩니다.

오른쪽 사이드바의 가장 위에 있는 카테고리를 클릭하면 모든 글이 보입니다. 카테고리의 최상위 폴더를 열겠다는 뜻입니다.

4. 메뉴에서는 최상위 폴더의 이름을 "모든 글 보기"로 보이도록 지정한 것입니다. 실제 제 블로그에서는 "인생은, 여행이다(418)"로 나와있는데 제가 임의로 지정해 준 것이죠^^

5. 아래쪽에 구분선을 넣어 주는 명령어 입니다. 구분선을 넣으면 깔끔해 보이죠^^. 카테고리의 가독성도 좋아집니다.

6. 두 번째 카테고리에 대한 정의입니다. 어떤 페이지를 찾을 지에 대한 것이죠. 앞에서 말했든 카테고리의 위치를 적어줍니다. 마찬가지로 뒤에  "href="/category/생각저장소"도 수정합니다. 불러올 카테고리의 위치가 됩니다. /category(최상위 카테고리)/생각 저장소(그 아래에 있는 카테고리). 

   ##_blog_link_## 은 지웠습니다. 지워도 아무 상관없다는 것을 보여주기 위해서... 

7. 메뉴바에 나타나는 이름입니다. 실제 카테고리에 나오는 이름과 똑같이 했어요.

8. 구분선을 넣어서 항목을 구분해 주었습니다.

여기까지는 참 쉽죠? 하위 카테고리가 없는 카테고리라서 별로 손댈 것이 없습니다.

HTML 소스  - 다운받기

상단메뉴바 수정(1)_인생은, 여행이다.txt

-스켈레톤 스킨 "상단 메뉴바 수정" 넷째 단계! - 하위메뉴 HTML수정!

좀 더 복합한 녀석으로 가보겠습니다. 하위 메뉴가 있는 카테고리 입니다. 

하위 메뉴와 상위 메뉴를 구분해 주기 위해서 앞쪽에 약간의 여백을 두었습니다. 

그게 하위 카테고리와 하위 카테고리를 구분하는 중요 포인트라고 생각하고, 넣어봤습니다. 

훨신 보기가 좋더라고요^^

1. 그냥 놔둬도 됩니다. 물론, 지워도 됩니다. 

 2. 상위 카테고리 주소입니다. 앞에서 설명했던 "생각 저장소"와 똑같은 위치에 있기 때문에 주소의 위치는 "category/길을 걷다, 세계여행"이 되는 겁니다.

3. 하위 카테고리에 대한 정의/주소 입니다. "길을 걷다, 세계여행"이라는 카테고리보다 한단계 아래에 있기 때문에 "category/길을 걷다, 세계여행/"이라는 주소를 적고 "여행 준비"라고 이어서 적어줍니다.

우리가 방에 들어갈 때, 현관문(category)에서 거실(길을 걷다, 세계여행)을 거쳐서 방(여행 준비)으로 가는 것과 같습니다. 모든 경로를 거쳐야 하는 것이죠.

4. 카테고리를 연결할 주소입니다. 3번과 똑같이 입력하면 됩니다.

5. 상단 메뉴바에 표시될 이름입니다. 자신의 블로그에 맞게 수정하면 됩니다.

6. 마찬가지로 다른 메뉴도 수정을 해 주면 됩니다.

7. 여백을 집어넣겠다는 명령어 입니다.(들여쓰기를 하겠다는 말이죠^^)  "ti1"은 한 글자 만큼 뒤로 밀겠다는 뜻입니다. "ti2"라고 지정하면 두 글자 위치 만큼 뒤로 들어갑니다.

※ 여기서 잠깐!! 

글자를 뒤로 밀기 위해서는 // Head // 부분도 약간의 수정이 필요 합니다.

"Ctrl + F"를 누르시고  /head 를 찾아줍니다. 그리고 왼 쪽의 명령어를 입력해 줍니다. 그럼 1글자 만큼 들여쓰기가 됩니다.

여기까지 하면 메뉴 수정은 사실상 다 끝난 것입니다. 

그 다음부터는 다 반복되는 것이고, 자신의 블로그 메뉴에 맞춰서 추가하고 삭제하면 되는 거죠^^

-스켈레톤 스킨 "상단 메뉴바 수정" 다섯째 단계! - RSS,링크 등 구독/메뉴 수정하기

이제 간단하게 "구독"과 "메뉴"부분의 소스를 살펴보겠습니다. 앞에서 중요한 것은 다 설명했기 때문에 별 것 없습니다.

 "위치로그", "미디어", "태그"는 삭제하시면 없어질 것이고, 놔두면 그대로 표시가 됩니다. 

위에서 봤던 구분선을 넣어주어도 되는데, 저는 따로 세 가지 메뉴에 대해서 구분선을 넣지 않았습니다.

"관리자", "글쓰기" 메뉴를 함께 묶고, 위에 세개를 함께 묶었어요.

"관리자" 메뉴의 앞에 자신의 블로그 주소를 적어야 한다는 사실!

자신의 블로그주소/admin/center/ 라고 입력해줘야 관리자 모드로 바로 들어갈 수 있습니다.

마찬가지로, "글쓰기"는 

(블로그 주소)/admin/entry/post/가 되겠죠.

자기 블로그 주소를 입력해 줘야 한다는 사실~ 잊지 마세요^^

 마지막으로, "RSS", "다음뷰", "페북", "트위터" 등 메뉴에 넣는 것입니다. 굳이 넣지 않아도 됩니다.

1. RSS - 자신의 블로그 주소만 적어주면 됩니다.

2. 다음뷰 - 마찬가지로 자신의 블로그 주소를 적어줍니다.

3. 트위터/페이스북 - 자신의 트위터와 페이스북 주소를 적어줍니다. 트위터는 따로 네모박스 처리를 하지 않았는데, 페이스북 바로 위에 있습니다^^

보기에는 어려워 보여도, 하나하나 따라하다보면 생각보다 쉽다는 것을 알 수 있습니다. 

처음에는 제가 해 놓은 대로 수정을 해 보시고, 차근차근 자신이 생각하는 것으로 바꿔보는 것도 나쁘지 않습니다.

여러가지 유형으로 응용/수정 할 수 있으니 자유롭게 바꿔 보세요^^

[보러가기]  ☞ 1. 웹 반응형 스킨 - "반응형 웹스킨"이 대세? 웹 반응형 스킨 설치하기! 

[현재글] ☞ 2. 웹 반응형 스킨 - "반응형 웹스킨" Skeleton 스킨 - 사이드바 최근글 수정하기

[보러가기] ☞ 3. 웹 반응형 스킨 - "상단 메뉴바 수정" 반응형 스킨 내 블로그에 맞게 꾸미기

[보러가기] ☞ 4. 웹 반응형 스킨 - "Skeleton 스킨" 화면 하단(푸터) 내 블로그에 맞게 바꾸기

- 웹 반응형 스킨(반응형 웹 스킨); "Skeleton 스킨" 사이드바 수정하기!

  티스토리에서 기본적인 사이드바는 간단하게 수정할 수 있습니다. 그렇지만 "Skeleton 스킨"은 티스토리에서 정식으로 서비스되는 스킨이 아니기 때문에 아직 티스토리에 최적화가 된 것은 아닙니다.(계속해서 오류가 보고되고 수정되고 있죠) 

그래서 HTML을 자신의 블로그에 맞게 바꿔줘야 한다는 사실!

자, 그럼 자신의 블로그에 최적화를 시키기 위해서 스킨을 바꿔 봅시다^^

아래에서 보는 것 처럼, 

스켈레톤 스킨 spider's web을 적용시키면 최근 글에 마크쿼리님의 블로그에 실려 있는 글이 뜹니다.

물론, Recent Articles(default)가 있지만 그건 사이드바 메뉴에서 삭제해버리고,

 Recent Articles에 블로그 글이 나오도록 해 봅시다.

생각보다 간단해요^^

 [Recent Articles(최신글) - 내 블로그 글들로 바꾸기]

1. HTML/CSS 편집 화면으로 들어갑니다.

2. Ctrl+F 를 눌러서 "get recent article"을 찾아줍니다.  - 아래와 같은 화면으로 이동합니다.

3. 붉은 색 네모 부분에 있는 rss("http://markquery.com/feed". 라고 되어 있는 부분을 rss(" 자신의 블로그 주소/feed" 로 바꿉니다.

4, 그러면, Recent Airticles 의 글들이 블로그 최신글로 바뀝니다^^

Recent Articles(최근 글)의 목록이 바뀐 모습 입니다. 

혹시, 최근 글의 개수를 늘이거나 줄이고 싶으시면 숫자 하나만 바꿔 주면 됩니다. 

위쪽에 작은 네모안에 있는 숫자가 "5"라고 되어 있는데, 최대 다섯 개 까지 최근 글을 보여주는 것입니다. 

만약에 최근 글을 10개를 보여주고 싶으면? 숫자를 10으로 하면 되죠. 쉽죠?

그 외에 간단한 것들은 모두 관리자 메뉴의 사이드바 수정에서 할 수 있으니, 여기까지 하겠습니다. 

다음에는 "Footer(화면 하단)"과 "상단 메뉴"를 수정하는 글으 올리도록 하겠습니다. 절대 어렵지 않아요~ 

감사합니다^^