처음 계획은 푸터를 화려하게 꾸미는 거였는데...... 푸터의 역할상 깔끔한 게 더 의미가 있어서 그냥 중앙정렬만 하고 넘어가겠습니다. 설명 부트스트랩의 그리드 시스템에서 푸터는 하단에 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칸에 넣었습니다. 이제 화면이 작아지면 사이드..
원래 생각은 네비바에 카테고리를 바인딩 하고 싶었는데..... 이렇게 하려면 손이 많이 가는 데다 이 프로젝트의 목표가 최대한 부트스트랩과 티스토리의 기능을 그대로 쓰는 방향으로 만드는 것이기 때문에 네비바에는 태그 클라우드나 방명록 같은 기능들을 넣도록 하겠습니다. 설명 프로젝트 네임 -> 티스토리 제목 자주쓰는 기능 : 태그(태그 클라우드), 지역로그, 방명록 관리기능 : 글쓰기, 관리자 이렇게 연결합니다. 각각 연결할 치환자는 티스토리의 가이드를 참고 해주세요. (참고 : 티스토리 치환자) 코드 여전히 CSS는 없습니다. 이전 글과 비교하여 바뀐 부분을 확인하여 티스토리이 어떻게 동작하는지 확인해 보세요. 텍스트 파일은 전체 코드입니다. 네이바의 구조가 살짝 바뀠습니다. 1 2 3 4 5 6 7 8..
부트스트랩을 티스토리에 적용하기 위해서 일단 부트스트랩이 적용된 빈 스킨을 만들었습니다. 부트스트랩과 제이쿼리( jquery )는 CDN 주소로 연결했습니다. (별도의 파일 업로드가 필요 없음.) 설명 이 포스팅의 목표는 부트스트랩 기본 테마(스타터 테마(starter template))에 깡통스킨(참고 : [빈스킨] 티스토리 빈스킨(깡통 스킨)) 추가하여 부트스트랩 기본 + 티스토리 기본 의 상태를 만드는 것입니다. 티스토리의 치환자는 티스토리에 문의하시면 됩니다. 테스트 페이지 : http://danggun-test2.tistory.com/ 코드 아래 코드를 그대로 스킨에 적용해도 동작은 합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2..
다음뷰 개편이후 이상한 현상이 생겼습니다. 많지는 않지만 있던 추천수가 사라진 것입니다! 27일 까지는 적지만 추천이 있습니다. 28일자 포스팅 부터 추천수가 0이더니 계속 0입니다. 혹시나 송고관련해서 바뀐게 있나해서 직접 몇개 추천을 눌러봤는데 정상적으로 동작합니다;;; 갑자기 뭐가 달라 젔길례 추천인들이 사라 진걸까요? ㅡㅜ