종종 올리는 블로그

티스토리 반응형 스킨을 모바일로 보다 보면 모바일 화면이 답답하거나 더 많은 정보를 보기 위해서 PC화면으로 보는 것과 똑같이 보고 싶을때가 있습니다. 아래 스크린샷을 보시면 왼쪽이 모바일 버전, 오른쪽이 PC 버전입니다. 오늘은 이렇게 반응형 웹인 티스토리 반응형 스킨에 PC버전 보기와 모바일 버전 보기를 만들어 보도록 합시다. 모바일 버전과 PC 데스크탑 버전이 다른 페이지라면 링크만 걸면 되지만, 반응형 웹일경우에는 PC데스크탑 버전이나 모바일버전이나 동일한 URL이며, 해상도에 따라 모바일 화면과 데스크탑 화면이 다르게 보여집니다. 따라서 단순히 링크만 걸어서는 모바일버전/PC버전 보기를 구현할 수 없습니다. 위 설명을 들어서는 어려운 말처럼 들릴지 모르지만 코드가 이해되지 않아도 아래 순서대로 ..

티스토리 반응형 #1 스킨에 탑(Top) 버튼을 만들어 봅시다. 스크롤을 아래로 쭈욱 내리면서 컨텐츠를 보다가 위로 올라가려면 데스크탑에서는 Home 버튼을 누르면 되지만, 모바일에서는 한참을 스크롤해서 올려야 하는 불편함이 있죠? Top 버튼이 있으면 한번에 위로 올라가기 편리하기 때문에 Top 버튼이 필요합니다. 제 블로그에서 스크롤을 내리면 Top 버튼이 활성화가 되고, 클릭하면 스크롤이 최상단으로 올라갑니다. 우선 탑버튼을 만들려면 Top 버튼 아이콘이 있어야 합니다. 1. 아래 Top 버튼 아이콘중에 마음에 드는 아이콘을 마우스 오른쪽 클릭을 해서 [이미지를 다른 이름으로 저장]해서 top.png로 저장 하세요. 2. 다운로드 받은 아이콘을 [관리]->[꾸미기]->[HTML/CSS 편집] 을 누..

티스토리 반응형 스킨이 배포되면서 구글 애드센스 반응형 배너를 어떻게 적용해야 효율적으로 적용할 수 있는지 알아봅시다. 블로그 특성에 맞게 구글 애드센스 반응형 배너를 넣으면 되겠지만, 어떻게 배너를 넣어야 유지 및 관리가 편할 수 있을까요? 제가 설정한 방법을 참고하셔서 본인 스타일에 맞게 배너를 넣어보세요. 우선 제 블로그에 적용한 화면을 보시죠. 상단 배너는 해상도에 따라 아래와 같이 배너가 보입니다. 가로폭 100%에 따른 자동 반응형 배너로 설정했습니다. 1. 850px 이상 해상도 : 850px * 80px 배너 2. 470px~849px 해상도 : (440px~819px) * (60px~80px) 배너 3. 320px~469px 해상도 : (290px~439px) * (45px~80px) 배..

오늘은 티스토리 블로그의 사진 이미지를 클릭하면 원본 사진 이미지 볼 수 있도록 만들어 보려고 합니다. 티스토리에 큰 사진을 올렸는데 사진을 클릭하면 원본 크기가 아닌 아래처럼 슬라이드 쇼 이미지만 보이시죠? 아래 스크린샷처럼 말이죠. 블로그의 사진을 클릭하는 사람들은 어떤 생각으로 사진을 클릭할까요? 제 경우에는 원본이미지를 보려고 사진을 클릭하거든요.. 대부분이 그렇게 생각하지 않을까요? 슬라이드 쇼를 보려고 사진을 클릭하시는 분도 있을지 모르지만...저는 원본이미지를 보고 싶고 또 그렇게 만들려고 합니다. 우선 아래 예제 사진들을 클릭해 보세요. [해상도 450 x 253 이미지] [해상도 850 x 478 이미지] [해상도 5312 x 2988 이미지] 제 블로그 컨텐츠 가로폭인 850 픽셀 해상..

SyntaxHighlighter 라는 code syntax highlighter 의 색상과 레이아웃을 수정해서 티스토리(Tistory) 블로그를 예쁘게 꾸며봅시다. SyntaxHighlighter 를 티스토리(Tistory) 블로그에 적용하는 방법은 여기를 클릭해서 참고하세요 ^^ 우선 기본 html 브러쉬를 사용해서 출력한 결과입니다. (참고로 스크린샷입니다.) 뭐 이대로 사용해도 나쁘지 않은데요. 이 전에 쓴 글에도 설명드렸지만, line-height를 em으로 설정시 위 처럼 행번호와 코드 줄이 어긋날 수도 있고 여러가지 편의상 문제가 있을수 있으므로 수정을 권합니다. 아래는 오늘까지 shCore.css 와 제가 수정해서 사용하고 있는 테마 shThemeTomato.css 를 적용한 결과입니다. 색..

제 블로그에 보시면 코드 소스를 코드 에디터처럼 예쁘게 보이는 방법에 대해 알아보겠습니다. 아래 처럼 말이죠. 글쓰기 관리 태그 방명록 RSS 카테고리 메뉴열기 SyntaxHighlighter 라는 code syntax highlighter를 이용한것인데요. 제가 네이버 블로그가 아닌 티스토리 블로그를 하는 이유이기도 하지요. SyntaxHighlighter 홈페이지는 http://alexgorbatchev.com/SyntaxHighlighter/ 입니다. 우선 SyntaxHighlighter 를 여기를 클릭해서 다운로드 받으세요. 참고로, 제가 받은 버전은 SyntaxHighlighter 3.0.83 입니다. 1. 다운로드 받은 압축파일을 풀어주세요. 2. 티스토리 관리페이지에서 [HTML/CSS 편집..

종종 올리는 블로그 첫 글입니다. 블로그 스킨 선택과 수정, 세팅하는 시간이 며칠 걸렸네요 ^^ 여러가지 스킨을 고민하다가 결정하게된 티스토리의 새 반응형 웹스킨 '#1' !!! 가장 마음에 들었지만 버그와 제 입맛에 맞지 않는 몇가지를 손보았고, 원하시는 분이 있으시면 도움이 되고자 이렇게 글을 올립니다. 티스토리 새 반응형 웹스킨 '#1'에서 버그?라고 생각되는 첫번째 수정 사항은 카테고리 바가 브라우져 높이보다 긴 경우 스크롤이 생기지 않아서 감추어진 카테고리는 선택하지 못하는 불편함이 있었습니다. 아래 스크린샷처럼 카테고리 보다 창이 더 길 경우에는 문제 없습니다. 그러나, 아래처럼 창 높이보다 카테고리가 긴 경우( 제 경우에는 길지 않아서 창 크기를 줄여봤습니다.)에는 보이지 않는 카테고리는 클..