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