탕비수다 (3 Page) 43개

이미지 맵에 대해서

이미지 맵에 대해서

지원

이미지 맵은 글에 사용한 이미지를 한 곳에 모아 놓은 영역입니다. 요즘은 글보다 사진을 통해 어떤 상황을 설명하는 경우가 더 많은데요. 상황을 설명하는 이미지가 많을 경우 사용자는 흔히 스크롤 압박을 겪습니다. 더군다나 아까 본 이미지를 찾기 위해 다시 위아래로 스크롤을 하며 찾는 경우가 종종 있습니다. 이미지를 많이 사용하는 블로그라면 상황에 맞게 적절히 사용하면 좋은 기능입니다. 아쉬운 점은 이미지 맵으로 이동하기 아이콘을 클릭해 이미지 맵으로 이동할 때 해당 이미지가 바로 보이면 좋겠는데요. 아직 그런 기능은 구현하지 못 했습니다. 사용하는 JavaScript 라이브러리에 해당 기능을 찾을 수 없기 때문입니다. 아마 기능은 있을 텐데 찾지 못 한 상태라고 생각합니다.어쨌든, 이미지 맵을 사용하면 이..

이미지 맵은 글에 사용한 이미지를 한 곳에 모아 놓은 영역입니다. 요즘은 글보다 사진을 통해 어떤 상황을 설명하는 경우가 더 많은데요. 상황을 설명하는 이미지가 많을 경우 사용자는 흔히 스크롤 압박을 겪습니다. 더군다나 아까 본 이미지를 찾기 위해 다시 위아래로 스크롤을 하며 찾는 경우가 종종 있습니다. 이미지를 많이 사용하는 블로그라면 상황에 맞게 적절히 사용하면 좋은 기능입니다. 아쉬운 점은 이미지 맵으로 이동하기 아이콘을 클릭해 이미지 맵으로 이동할 때 해당 이미지가 바로 보이면 좋겠는데요. 아직 그런 기능은 구현하지 못 했습니다. 사용하는 JavaScript 라이브러리에 해당 기능을 찾을 수 없기 때문입니다. 아마 기능은 있을 텐데 찾지 못 한 상태라고 생각합니다.어쨌든, 이미지 맵을 사용하면 이..

사이드바에 사용자 위젯 추가하기

사이드바에 사용자 위젯 추가하기

지원

탕비수다 스킨을 한 페이지 모드가 아닌 사이드바 모드로 사용할 경우 사이드바에 사용자가 원하는 위젯을 추가할 수 있습니다. 본 문서는 사이드바에 사용자 위젯을 추가할 때 참고할 수 있도록 세 가지 형식의 위젯을 제시합니다.스킨 제작을 잘 아는 경우 직접 사이드바를 직접 추가할 수 있겠지만 해당 문서는 그렇지 못한 사용자를 대상으로 작성했습니다.사이드바 위젯은 일반 위젯과 리스트 위젯 그리고 박스 위젯으로 구분됩니다. 일반 위젯은 블로그 정보와 같이 사진과 글이 같이 쓰일 때 유용합니다. 리스트 위젯은 최근 글이나 링크와 같이 순서대로 나열할 때 사용하면 좋습니다. 마지막으로 박스 위젯은 태그와 같이 정렬과 관계 없는 항목을 나열할 때 사용합니다. 배너출력 사용하기 “블로그관리 > 꾸미기 > 사이드바”에서..

탕비수다 스킨을 한 페이지 모드가 아닌 사이드바 모드로 사용할 경우 사이드바에 사용자가 원하는 위젯을 추가할 수 있습니다. 본 문서는 사이드바에 사용자 위젯을 추가할 때 참고할 수 있도록 세 가지 형식의 위젯을 제시합니다.스킨 제작을 잘 아는 경우 직접 사이드바를 직접 추가할 수 있겠지만 해당 문서는 그렇지 못한 사용자를 대상으로 작성했습니다.사이드바 위젯은 일반 위젯과 리스트 위젯 그리고 박스 위젯으로 구분됩니다. 일반 위젯은 블로그 정보와 같이 사진과 글이 같이 쓰일 때 유용합니다. 리스트 위젯은 최근 글이나 링크와 같이 순서대로 나열할 때 사용하면 좋습니다. 마지막으로 박스 위젯은 태그와 같이 정렬과 관계 없는 항목을 나열할 때 사용합니다. 배너출력 사용하기 “블로그관리 > 꾸미기 > 사이드바”에서..

와이드, 그리드 이미지에 대해서

와이드, 그리드 이미지에 대해서

지원

탕비수다 이마고 스킨에는 ‘본문 축소’와 ‘그리드 이미지’ 기능이 있습니다. 전자는 '와이드 이미지' 효과를 그대로 모방했습니다. 글 가로 폭과 본문 축소의 차이만큼 넓게 이미지를 배치하며 후자는 한 행에 최대 3개의 이미지를 배치하는 기능입니다. 두 기능을 사용하기 위해서는 티스토리 글쓰기 때 파일을 첨부하는 방식과 이미지를 정렬하는 방식을 이해해야합니다. 사진을 첨부하는 두 가지 방식, 다음 포토업로더 & 파일첨부 티스토리에서 사진을 첨부하는 방식은 크게 두 가지입니다. 다음 포토업로더(이하 포토업로더)를 이용하거나 파일첨부 기능을 이용하는 방식입니다. 글쓰기 화면을 기준으로 포토업로더는 왼쪽 위 ‘사진’이라는 아이콘을 클릭하면 볼 수 있습니다. 파일첨부는 오른쪽 중앙에 ‘파일첨부’라는 아이콘을 클릭..

탕비수다 이마고 스킨에는 ‘본문 축소’와 ‘그리드 이미지’ 기능이 있습니다. 전자는 '와이드 이미지' 효과를 그대로 모방했습니다. 글 가로 폭과 본문 축소의 차이만큼 넓게 이미지를 배치하며 후자는 한 행에 최대 3개의 이미지를 배치하는 기능입니다. 두 기능을 사용하기 위해서는 티스토리 글쓰기 때 파일을 첨부하는 방식과 이미지를 정렬하는 방식을 이해해야합니다. 사진을 첨부하는 두 가지 방식, 다음 포토업로더 & 파일첨부 티스토리에서 사진을 첨부하는 방식은 크게 두 가지입니다. 다음 포토업로더(이하 포토업로더)를 이용하거나 파일첨부 기능을 이용하는 방식입니다. 글쓰기 화면을 기준으로 포토업로더는 왼쪽 위 ‘사진’이라는 아이콘을 클릭하면 볼 수 있습니다. 파일첨부는 오른쪽 중앙에 ‘파일첨부’라는 아이콘을 클릭..

구글 애드센스에 대해서

구글 애드센스에 대해서

지원

탕비수다 이마고에서 티스토리에서 제공하는 Google AdSense (반응형) 플러그인을 사용하려면 한 가지 사용자 정의 CSS가 필요합니다. 반응형 광고일 경우 광고 크기는 본문 너비에 따라 책정됩니다. 대부분 티스토리 스킨은 CSS를 통해 본문 크기를 확정하는데 탕비수다 이마고는 Javascript를 통해 본문 크기를 제어하기 때문에 반응형 광고의 크기가 본문 너비에 따라 책정되지 않습니다. 따라서 아래와 같이 사용자 정의 CSS를 하나 추가하면 반응형 애드센스 광고 코드를 깔끔하게 사용할 수 있습니다. HTML HEAD에 사용자 정의 CSS 추가 스킨 옵션을 지원하는 탕비수다 이마고 스킨을 사용하고 있다면 아래 설정이 필요 없습니다. 이미 본문 가로 너비가 지정되기 때문에 따로 구글 애드센스 관련 ..

탕비수다 이마고에서 티스토리에서 제공하는 Google AdSense (반응형) 플러그인을 사용하려면 한 가지 사용자 정의 CSS가 필요합니다. 반응형 광고일 경우 광고 크기는 본문 너비에 따라 책정됩니다. 대부분 티스토리 스킨은 CSS를 통해 본문 크기를 확정하는데 탕비수다 이마고는 Javascript를 통해 본문 크기를 제어하기 때문에 반응형 광고의 크기가 본문 너비에 따라 책정되지 않습니다. 따라서 아래와 같이 사용자 정의 CSS를 하나 추가하면 반응형 애드센스 광고 코드를 깔끔하게 사용할 수 있습니다. HTML HEAD에 사용자 정의 CSS 추가 스킨 옵션을 지원하는 탕비수다 이마고 스킨을 사용하고 있다면 아래 설정이 필요 없습니다. 이미 본문 가로 너비가 지정되기 때문에 따로 구글 애드센스 관련 ..

저자정보 및 푸터에 사용자 소셜 추가하기

저자정보 및 푸터에 사용자 소셜 추가하기

지원

탕비수다 이마고 스킨은 대표적인 소셜 계정 링크를 쉽게 설정할 수 있도록 기능(http://tangbisuda.tistory.com/3#guide-social-config)을 제공하고 있습니다. 더불어 몇 번 업데이트를 통해 추가적으로 소셜 계정 링크를 추가했습니다. 하지만 모든 소셜 계정을 스킨 기능에서 제공하는 것은 어렵다는 생각합니다. 따라서 사용자가 임의로 특정 소셜 링크를 추가할 수 있도록 팁을 제공하고자 합니다.스킨 옵션을 통해 푸터에 소셜 아이콘을 추가했다면 아래 설정을 통해 추가할 수 없습니다. 스킨 옵션을 지원하는 탕비수다 이마고 스킨은 다른 방법으로 소셜 아이콘을 추가하고 있습니다. 설명서 카테고리에서 푸터 관련 글을 찾아 살펴보세요. 일단 아래 코드를 한 번 살펴보세요. 사용자 소셜 ..

탕비수다 이마고 스킨은 대표적인 소셜 계정 링크를 쉽게 설정할 수 있도록 기능(http://tangbisuda.tistory.com/3#guide-social-config)을 제공하고 있습니다. 더불어 몇 번 업데이트를 통해 추가적으로 소셜 계정 링크를 추가했습니다. 하지만 모든 소셜 계정을 스킨 기능에서 제공하는 것은 어렵다는 생각합니다. 따라서 사용자가 임의로 특정 소셜 링크를 추가할 수 있도록 팁을 제공하고자 합니다.스킨 옵션을 통해 푸터에 소셜 아이콘을 추가했다면 아래 설정을 통해 추가할 수 없습니다. 스킨 옵션을 지원하는 탕비수다 이마고 스킨은 다른 방법으로 소셜 아이콘을 추가하고 있습니다. 설명서 카테고리에서 푸터 관련 글을 찾아 살펴보세요. 일단 아래 코드를 한 번 살펴보세요. 사용자 소셜 ..

블로그 가로 폭 변경하기

블로그 가로 폭 변경하기

지원

블로그 가로 폭은 이미 설정을 통해 조절할 수 있습니다. 다만, 해당 기능은 전체적인 설정으로 세부적으로 가로 폭을 조절하기 위해서는 CSS 정의를 알맞게 수정해야합니다. 스킨 최대 가로 폭은 좌우 50px의 여백을 포함해 1400px이며 em 단위로 환산하면 100.000em입니다. 해당 설정은 정식 지원하는 기능이 아니지만, 최대 가로 폭보다 좁게 설정을 원할 경우 도움이 되는 안내입니다. 편의를 위해 단위는 px로 환산해 설정했습니다. 전체 가로 폭 설정하기 .row { width: 100%; margin: 0 auto; padding: 0 50px; max-width: 1024px } 스킨 최대 가로 폭보다 전체적으로 블로그 가로 폭을 좁게하고 싶다면 CSS 파일에서 02. Structure 정의..

블로그 가로 폭은 이미 설정을 통해 조절할 수 있습니다. 다만, 해당 기능은 전체적인 설정으로 세부적으로 가로 폭을 조절하기 위해서는 CSS 정의를 알맞게 수정해야합니다. 스킨 최대 가로 폭은 좌우 50px의 여백을 포함해 1400px이며 em 단위로 환산하면 100.000em입니다. 해당 설정은 정식 지원하는 기능이 아니지만, 최대 가로 폭보다 좁게 설정을 원할 경우 도움이 되는 안내입니다. 편의를 위해 단위는 px로 환산해 설정했습니다. 전체 가로 폭 설정하기 .row { width: 100%; margin: 0 auto; padding: 0 50px; max-width: 1024px } 스킨 최대 가로 폭보다 전체적으로 블로그 가로 폭을 좁게하고 싶다면 CSS 파일에서 02. Structure 정의..

여러 단으로 본문 나누기

여러 단으로 본문 나누기

지원

탕비수다 이마고 스킨에서 정식 지원하는 기능은 아니지만, 요청이 있어 ‘여러 단으로 나누기’ 형식을 소개합니다. 여러 단으로 나누기는 본문을 두 개 또는 설정한 값으로 여러 단으로 보여주는 기능입니다. 세로 스크롤에 익숙한 사용자에게는 낯설고 불편할 수 있는데요. 개인 블로그의 최대 장점은 타인을 신경 쓰지 않고 자신만의 스타일을 스킨에 적용해 사용할 수 있는 것이 아닐까 싶습니다. 여러 단으로 본문 나누기 적용은 의외로 간단합니다. 소개하기도 민망한데요. 아래 CSS를 적용하면 본문에 적용된 모습을 바로 볼 수 있습니다.1234@media only screen and (min-width: 1025px) { .article-desc.effect { -webkit-column-count: 2; column..

탕비수다 이마고 스킨에서 정식 지원하는 기능은 아니지만, 요청이 있어 ‘여러 단으로 나누기’ 형식을 소개합니다. 여러 단으로 나누기는 본문을 두 개 또는 설정한 값으로 여러 단으로 보여주는 기능입니다. 세로 스크롤에 익숙한 사용자에게는 낯설고 불편할 수 있는데요. 개인 블로그의 최대 장점은 타인을 신경 쓰지 않고 자신만의 스타일을 스킨에 적용해 사용할 수 있는 것이 아닐까 싶습니다. 여러 단으로 본문 나누기 적용은 의외로 간단합니다. 소개하기도 민망한데요. 아래 CSS를 적용하면 본문에 적용된 모습을 바로 볼 수 있습니다.1234@media only screen and (min-width: 1025px) { .article-desc.effect { -webkit-column-count: 2; column..

개발이야기를 마치며

개발이야기를 마치며

개발이야기

그동안 탕비수다 스킨을 개발하며 진행사항을 ‘개발이야기’ 카테고리에서 알려드렸는데요. 아시는 분은 아시겠지만, 트위터 FEED를 개설하면서 트위터가 그 역할을 대신하고 있습니다. 따라서 ‘개발이야기’ 카테고리에 글을 적는 것은 오늘이 마지막입니다.되도록 블로그에 스킨과 관련이 없는 글은 올리지 않고 있었습니다. 아무래도 스킨과 밀접한 관련이 있는 글이 더 필요할 것 같아서인데요. 개발을 하며 적는 이야기도 관련은 있지만 사용하는데 직접적인 관련이 없는 관계로 고민을 했었습니다. 그러다가 트위터에 짧게나마 알림을 하면 어떨까 싶어 며칠 동안 트위터를 이용했습니다.많은 분은 아니지만, 나름대로 소통이 가능한 것으로 판단되었고 이에 ‘개발이야기’ 마지막 글을 적습니다. 탕비수다 스킨이 버전 4에 진입했습니다...

그동안 탕비수다 스킨을 개발하며 진행사항을 ‘개발이야기’ 카테고리에서 알려드렸는데요. 아시는 분은 아시겠지만, 트위터 FEED를 개설하면서 트위터가 그 역할을 대신하고 있습니다. 따라서 ‘개발이야기’ 카테고리에 글을 적는 것은 오늘이 마지막입니다.되도록 블로그에 스킨과 관련이 없는 글은 올리지 않고 있었습니다. 아무래도 스킨과 밀접한 관련이 있는 글이 더 필요할 것 같아서인데요. 개발을 하며 적는 이야기도 관련은 있지만 사용하는데 직접적인 관련이 없는 관계로 고민을 했었습니다. 그러다가 트위터에 짧게나마 알림을 하면 어떨까 싶어 며칠 동안 트위터를 이용했습니다.많은 분은 아니지만, 나름대로 소통이 가능한 것으로 판단되었고 이에 ‘개발이야기’ 마지막 글을 적습니다. 탕비수다 스킨이 버전 4에 진입했습니다...

대표이미지 숨기기

대표이미지 숨기기

지원

가끔 대표이미지를 숨겨야 하는 경우가 있습니다. 물론 글 본문에서 숨기는 경우입니다. 그렇지만 인덱스 페이지에는 노출하고 싶은 경우가 종종 있습니다. 과거 티스토리는 이런 기능을 제공하지 않았습니다. 그럼에도 티스토리 블로거들은 다양한 방법으로 이런 기능을 구현했었는데요. 이제는 해당 기능을 티스토리가 지원하고 있습니다.Daum Photo Uploader 또는 파일첨부를 통해 이미지를 글에 노출하는데 예전에는 글에 노출하지 않은 이미지는 글 발행시 삭제 처리했습니다. 이제는 글을 발행해도 글에 노출하지 않은 이미지는 삭제되지 않습니다. 따라서 파일보관함에 있는 특정 사진을 선택후 대표이미지로 지정만 하면 쉽게 원하는 결과를 얻을 수 있습니다.본문에는 대표이미지를 노출하지 않은 상태입니다. 단지 파일보관함..

가끔 대표이미지를 숨겨야 하는 경우가 있습니다. 물론 글 본문에서 숨기는 경우입니다. 그렇지만 인덱스 페이지에는 노출하고 싶은 경우가 종종 있습니다. 과거 티스토리는 이런 기능을 제공하지 않았습니다. 그럼에도 티스토리 블로거들은 다양한 방법으로 이런 기능을 구현했었는데요. 이제는 해당 기능을 티스토리가 지원하고 있습니다.Daum Photo Uploader 또는 파일첨부를 통해 이미지를 글에 노출하는데 예전에는 글에 노출하지 않은 이미지는 글 발행시 삭제 처리했습니다. 이제는 글을 발행해도 글에 노출하지 않은 이미지는 삭제되지 않습니다. 따라서 파일보관함에 있는 특정 사진을 선택후 대표이미지로 지정만 하면 쉽게 원하는 결과를 얻을 수 있습니다.본문에는 대표이미지를 노출하지 않은 상태입니다. 단지 파일보관함..

제작자 표기 삭제에 대한 제작자의 입장

제작자 표기 삭제에 대한 제작자의 입장

개발이야기

가끔 스킨 아래에 표기된 "theme by TANGBISUDA"(이하 제작자 표기)를 삭제 후 사용해도 괜찮겠냐는 문의가 있습니다. 물론, 괜찮습니다. 적어도 탕비수다 스킨은 해당 문구가 저작권과 관련이 없습니다. 실제 저작권과 관련된 문구는 각 스킨 파일 내부에 표기된 다음 문구입니다. Copyright (C) ... 이하 라이선스 문구 사실, 그동안 스킨 홍보를 위해 제작자 표기에 대해 언급을 자제했습니다. 아무래도 제작자 표기를 통한 홍보는 무시 못 하니 말이죠. 그래서 관련 문의가 오면 삭제해도 괜찮다는 답변을 드렸을 뿐입니다. 한동안 안과 밖의 갈등이 계속되어 고민을 했는데요. 아무래도 마음의 소리를 따르는 게 좋겠다고 최종적으로 판단했습니다. 다음 업데이트부터는 제작자 표기가 제거됩니다. 이는..

가끔 스킨 아래에 표기된 "theme by TANGBISUDA"(이하 제작자 표기)를 삭제 후 사용해도 괜찮겠냐는 문의가 있습니다. 물론, 괜찮습니다. 적어도 탕비수다 스킨은 해당 문구가 저작권과 관련이 없습니다. 실제 저작권과 관련된 문구는 각 스킨 파일 내부에 표기된 다음 문구입니다. Copyright (C) ... 이하 라이선스 문구 사실, 그동안 스킨 홍보를 위해 제작자 표기에 대해 언급을 자제했습니다. 아무래도 제작자 표기를 통한 홍보는 무시 못 하니 말이죠. 그래서 관련 문의가 오면 삭제해도 괜찮다는 답변을 드렸을 뿐입니다. 한동안 안과 밖의 갈등이 계속되어 고민을 했는데요. 아무래도 마음의 소리를 따르는 게 좋겠다고 최종적으로 판단했습니다. 다음 업데이트부터는 제작자 표기가 제거됩니다. 이는..

메이저 업데이트 소식

메이저 업데이트 소식

개발이야기

오랜만에 글로 여러분을 뵙습니다. 늦은 감이 있지만, 탕비수다 이마고 스킨의 메이저 업데이트 소식을 전합니다.먼저 메이저 업데이트를 위해 베타 테스트를 진행했습니다. 몇몇 분들에게 테스트 요청을 드렸고 흔쾌히 승낙해주셨습니다. 스킨 제작은 혼자 하는 일이라 다른 어려움은 없지만 정작 스킨 테스트는 혼자서 할 수 없는 일이 대부분입니다. 혼자 다양한 환경에서 다양한 시도를 통해 테스트를 한다는 것은 거의 불가능에 가깝습니다. 따라서 바쁜 와중에도 베타 테스트를 진행해 주신 분들에게 이 자리를 빌려 감사의 말씀을 전합니다.이번 메이저 업데이트를 통해 탕비수다 이마고 버전은 이제 3입니다. 앞으로 얼마나 더 버전이 업데이트될까요? 예전에 다른 글에서도 말씀 드렸지만, 현재 스킨이 제가 처음 구상했던 스킨과 가..

오랜만에 글로 여러분을 뵙습니다. 늦은 감이 있지만, 탕비수다 이마고 스킨의 메이저 업데이트 소식을 전합니다.먼저 메이저 업데이트를 위해 베타 테스트를 진행했습니다. 몇몇 분들에게 테스트 요청을 드렸고 흔쾌히 승낙해주셨습니다. 스킨 제작은 혼자 하는 일이라 다른 어려움은 없지만 정작 스킨 테스트는 혼자서 할 수 없는 일이 대부분입니다. 혼자 다양한 환경에서 다양한 시도를 통해 테스트를 한다는 것은 거의 불가능에 가깝습니다. 따라서 바쁜 와중에도 베타 테스트를 진행해 주신 분들에게 이 자리를 빌려 감사의 말씀을 전합니다.이번 메이저 업데이트를 통해 탕비수다 이마고 버전은 이제 3입니다. 앞으로 얼마나 더 버전이 업데이트될까요? 예전에 다른 글에서도 말씀 드렸지만, 현재 스킨이 제가 처음 구상했던 스킨과 가..

사이드바 개발 소식

사이드바 개발 소식

개발이야기

기존 스킨에 사이드바를 추가하는 것은 그리 어렵지 않은 작업입니다. 스킨을 설계하면서 추후 사이드바를 추가할 것을 염두하면서 개발을 진행했기 때문입니다. 워드프레스는 서버 사이드 언어(PHP)를 사용하기 때문에 직접 서버 제어가 가능하지만, 티스토리는 사용자 언어(JavaScript)만이 유일한 접근 방법입니다.한 스킨에 여러 기능을 추가하는 것은 다소 무리가 있을 수 있습니다. 무엇보다 사용자가 설정을 잘 이해하지 못하면 쉽게 다가갈 수 없는 부분이 분명 존재합니다. 다만, 이런 문제는 기술적 어려움 때문이라는 것도 말씀드리고 싶습니다.여러 스타일의 스킨을 내놓으면 좋겠지만 관리가 이뤄지지 않는다면 아무런 의미가 없습니다. 가능한 쉽게 설정할 수 있도록 고려하고 있지만 어쩔 수 없는 부분도 있다는 것을..

기존 스킨에 사이드바를 추가하는 것은 그리 어렵지 않은 작업입니다. 스킨을 설계하면서 추후 사이드바를 추가할 것을 염두하면서 개발을 진행했기 때문입니다. 워드프레스는 서버 사이드 언어(PHP)를 사용하기 때문에 직접 서버 제어가 가능하지만, 티스토리는 사용자 언어(JavaScript)만이 유일한 접근 방법입니다.한 스킨에 여러 기능을 추가하는 것은 다소 무리가 있을 수 있습니다. 무엇보다 사용자가 설정을 잘 이해하지 못하면 쉽게 다가갈 수 없는 부분이 분명 존재합니다. 다만, 이런 문제는 기술적 어려움 때문이라는 것도 말씀드리고 싶습니다.여러 스타일의 스킨을 내놓으면 좋겠지만 관리가 이뤄지지 않는다면 아무런 의미가 없습니다. 가능한 쉽게 설정할 수 있도록 고려하고 있지만 어쩔 수 없는 부분도 있다는 것을..