사이드바는 티스토리에 의해 렌더링 되는 부분이므로 '관리 > 사이드 바'에서도 수정이 가능합니다. 설명 카테고리와 같은 구성요소는 티스토리에서 생성해서 보내주기 때문에 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칸에 넣었습니다. 이제 화면이 작아지면 사이드..
