부트스트랩 기본 테마(스타터 테마(starter template))에 깡통스킨(참고 : [빈스킨] 티스토리 빈스킨(깡통 스킨)) 추가하여 부트스트랩 기본 + 티스토리 기본 스킨을 만들었습니다. HTML 테스트 페이지 : http://danggun-test2.tistory.com/ 1. 주요 기능 CSS는 부트스트랩에서 재공되는 것만 사용하여 기본 CSS가 없습니다. 부트스트랩과 제이쿼리는 'CDN'주소를 사용하여 연결되어 있어 html만 복사하시면 됩니다. 티스토리의 치환자는 티스토리에 문의하시면 됩니다. 티스토리 구조상 자바스크립트나 CSS없이 수정할 수 없는 부분은 수정하지 않았습니다. -- 관련글 -- [티스토리 스킨] 부트스트랩(bootstrap) + 티스토리(tistory) - 1. 빈 스킨 만..

처음 계획은 푸터를 화려하게 꾸미는 거였는데...... 푸터의 역할상 깔끔한 게 더 의미가 있어서 그냥 중앙정렬만 하고 넘어가겠습니다. 설명 부트스트랩의 그리드 시스템에서 푸터는 하단에 12칸을 혼자 사용하도록 하겠습니다. 이렇게 하면 항상 하단에 나오게 되죠. 중앙정렬은 'text-center'로 처리하면 됩니다. 설명 코드는 스타일에 부트스트랩 스타일만 적용했습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 지역로그 : 태그 : 방명록 : 관리자 : 글쓰기 's Blog is powered by Daum / Designed by Tistory Colored by Color Scripter cs

위치로그는 구조가 독특해서 뭔가 작업할 수 있는 것이 없습니다. 설명 위치로그의 태그를 보면 주소를 표시하는 ''와 제목을 표시하는 ''로 되어 있습니다. 이 두개가 각각 있는데...... 이것은 티스토리 쪽에서 같은 지역은 뭉쳐서 표시하기 때문에 그렇습니다. 각 주소는 일정크기 왼쪽에서 밀어서 구분하게 됩니다. 밀어서 표시하기 위한 왼쪽 마진값은 ''와 ''로 넘겨주게 됩니다. 결국 스크립트를 사용해서 처리하지 않는 한 무언가 할 수 있는 작업이 없습니다-_-;;; 스크립트가 없더라도 약간의 꼼수를 사용하면 css만으로도 처리할 수는 있습니다. 마진값을 css이름으로 사용하면 됩니다 ㅎㅎ 이 시리즈에서는 css도 수정하지 않으므로 그냥 목록 처리만 하겠습니다. 코드 부트스트랩에 있는 목록을 그대로 적용..

태그 목록은 스타일 시트 없이는 수정할 수 없습니다. 일단 스타일 시트 없이 적용만 시켜서 사용합니다. 설명 태그 박스의 태그 사용빈도는 ''치환자를 써서 가지고 옵니다. 사용빈도가 높으면 'cloud1', 사용빈도가 낮으면 'cloud5'로 해서 'cloud1 ~ cloud5' 까지 넘어옵니다. (참고 : 티스토리 가이드 - 4.치환자 - 3-6. 태그 박스 ) 그러다 보니 스타일시트를 직접 수정하지 않으면 사용할 방법이 없습니다. 우리는 일단 레이아웃만 적용하고 스타일 시트는 다음 시즌(?)을 기대해 봅시다 ㅎㅎㅎ 코드 스타일에도 치환자를 넣는 거 빼고는 다른 코드들과 같습니다. 기존 코드는 ''로 처리했는데 전 그냥 그리드로 처리했습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 태그 ..

티스토리에서 방명록은 수정해야 할 것이 많지 않아서 금방 끝납니다. 거기다 글 본문에서 사용하던 코드들을 가지고 와서 사용하면 되기 때문에 더욱 쉽다!! 설명 방명록 자체가 내용이 별로 없습니다. 글 내용에서 작업했던 내용을 최대한 가지고 와서 사용합니다. 코드 내용이 '글 내용'과 거의 같아서 포인트가 없습니다. ㅎㅎㅎㅎ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 ..

사이드바는 티스토리에 의해 렌더링 되는 부분이므로 '관리 > 사이드 바'에서도 수정이 가능합니다. 설명 카테고리와 같은 구성요소는 티스토리에서 생성해서 보내주기 때문에 CSS도 수정하고 자바스크립트도 이용해야 원하는 모양으로 만드는 것이 가능합니다. html 태그에서 추가했는데 보이지 않는다면 '관리 > 사이드 바'에 들어가 추가해주셔야 합니다. 사이드 바는 ''사이의 구성요소를 사용합니다. 이 안에 구성요소를 만들어야 '관리 > 사이드 바'에도 표시됩니다. 코드 사이드바는 패널을 이용하여 제목을 만들고 내용물을 채워 모양을 잡습니다. 여기서 주의해서 봐야 할 것은 ''입니다. 기본이 되는 카운터 모듈을 살펴보겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 방문자 전체 오늘 어제 Colo..

이 프로젝트는 추가적인 CSS작업없이 부트스트랩의 CSS만 이용하는 것을 기본으로 하므로 티스토리에서 직접 생성하는 코드는 제어할 방법이 없습니다. 이러한 코드들은 두 번째 프로젝트에서 수정할 예정이니 여기서는 적용된 스타일 없이 그냥 두겠습니다. 설명 이제 부트스트랩의 CSS를 이용하여 본문을 꾸며보겠습니다. (참고 : bootstrap - CSS, 콤포넌트 ) 본문에서 '패이지 네비게이션 > 현재 패이지'는 CSS를 직접 수정하지 않으면 안 되기 때문에 이번 프로젝트에서는 그냥 두겠습니다. '댓글 리스트'는 ''안에 태그를 꾸며두면 티스토리에서 다시 렌더링을 해줍니다. 앞으로 이런 식으로 렌더링되는 내용을 자주 보게 될테니 신경써주세요~ 콘텐츠 페이지만 꾸미는 거고 방명록과 같은 다른 페이지는 다음 ..

부트스트랩을 이용하여 반응형 레이아웃을 구성하려면 그리드 시스템을 이용하는 것이 좋습니다. (참고 : bootstrap - 그리드 시스템 ) 설명 부트스트랩의 그리드는 12칸이 기준이라 우리는 9칸/3칸으로 나누도록 하겠습니다. 왼쪽(9칸)은 콘텐츠를 넣을 거고 오른쪽(3칸)은 카테고리와 같은 사이드 메뉴로 사용할 예정입니다. html에 사이드바 요소를 추가하면 바로 반영 안 되는 경우가 있습니다. 이럴 때는 '관리 > 사이드바'로 들어가서 왼쪽에 있는 모듈을 추가해 주시면 됩니다. 테스트 페이지 : http://danggun-test2.tistory.com/ 코드 전체 코드 입니다. 그리드를 설정한 코드를 살펴보겠습니다. 컨탠츠는 9칸에 넣었고 사이드바는 3칸에 넣었습니다. 이제 화면이 작아지면 사이드..

티스토리용 빈스킨입니다.내용 참고 : [빈스킨] 티스토리 빈스킨(깡통 스킨) HTML  CSS   적용 상태 확인하기   1. 주요 기능티스토리용 빈스킨입니다.티스토리에서 제공하는 스킨의 내용을 하나하나 구분하기 힘들어서 아에 갈아업고 하려고 만들었습니다 ㅎㅎㅎ티스토리의 가이드 페이지의 구조 그대로 만들었습니다.(참고 : 티스토리 치환자 )아무 내용도 들어가있지 않습니다.css도 모두 제거하고 테스트하였습니다.주석도 가이드페이지와 동일하게 넣어놔서 검색해서 사용하기 좋습니다.아마 이상태로는 티에디션과 '관리자>사이드 바'를 사용할수 없을 겁니다.(둘다 사용 가능 - 테스트 완료)전문가용으로 위설명을 이해할수 없다면 쓰지 마세요.보긴 간단해 ..

원래 생각은 네비바에 카테고리를 바인딩 하고 싶었는데..... 이렇게 하려면 손이 많이 가는 데다 이 프로젝트의 목표가 최대한 부트스트랩과 티스토리의 기능을 그대로 쓰는 방향으로 만드는 것이기 때문에 네비바에는 태그 클라우드나 방명록 같은 기능들을 넣도록 하겠습니다. 설명 프로젝트 네임 -> 티스토리 제목 자주쓰는 기능 : 태그(태그 클라우드), 지역로그, 방명록 관리기능 : 글쓰기, 관리자 이렇게 연결합니다. 각각 연결할 치환자는 티스토리의 가이드를 참고 해주세요. (참고 : 티스토리 치환자) 코드 여전히 CSS는 없습니다. 이전 글과 비교하여 바뀐 부분을 확인하여 티스토리이 어떻게 동작하는지 확인해 보세요. 텍스트 파일은 전체 코드입니다. 네이바의 구조가 살짝 바뀠습니다. 1 2 3 4 5 6 7 8..