'지원' 카테고리의 글 목록 12개

스킨 가이드(4.0.6 이하 버전)

스킨 가이드(4.0.6 이하 버전)

지원

설정하기 메뉴 고정 메뉴 서브 메뉴 홈 링크 작은 메뉴 방명록 라벨 인덱스 페이지 타일 그리드 컨테이너 메인 공지사항 슬라이더 페이지 타이틀 폰트 크기 첫 번째 사이드바 두 번째 사이드바 퍼머링크 페이지 글 효과 강제 확대 이미지 그리드 이미지 반응형 동영상 이전다음글 관련 글 효과 소셜 블로그 설명 디스커스(Disqus) 라이브리(Livere) 메인 슬라이더 푸터 웹폰트 설정하기 스킨에서 지원하는 대부분 기능은 자바스크립트 설정 값을 변경해 제어할 수 있습니다. 해당 설정은 "관리센터 > 꾸미기 > 스킨 편집 > html 편집"에서 찾을 수 있으며 body 태그가 끝나는 곳에 있습니다. /** * 스킨 및 문의서비스 구매 안내: * http://tangbisuda.tistory.com/1 * * 스킨 ..

설정하기 메뉴 고정 메뉴 서브 메뉴 홈 링크 작은 메뉴 방명록 라벨 인덱스 페이지 타일 그리드 컨테이너 메인 공지사항 슬라이더 페이지 타이틀 폰트 크기 첫 번째 사이드바 두 번째 사이드바 퍼머링크 페이지 글 효과 강제 확대 이미지 그리드 이미지 반응형 동영상 이전다음글 관련 글 효과 소셜 블로그 설명 디스커스(Disqus) 라이브리(Livere) 메인 슬라이더 푸터 웹폰트 설정하기 스킨에서 지원하는 대부분 기능은 자바스크립트 설정 값을 변경해 제어할 수 있습니다. 해당 설정은 "관리센터 > 꾸미기 > 스킨 편집 > html 편집"에서 찾을 수 있으며 body 태그가 끝나는 곳에 있습니다. /** * 스킨 및 문의서비스 구매 안내: * http://tangbisuda.tistory.com/1 * * 스킨 ..

맑은 고딕, 애플 SD 산돌고딕 Neo 폰트 사용 방법

맑은 고딕, 애플 SD 산돌고딕 Neo 폰트 사용 방법

지원

웹폰트의 사용, 누누이 말씀을 드렸지만, 다시 또 얘기해봅니다. 탕비수다 이마고는 노토산스 웹폰트를 기본 웹폰트로 사용하고 있습니다. 그런데 기본 웹폰트가 싫다면 어떻게 해야 할까요? 스킨에서 제공하는 몇 가지 구글 웹폰트로 변경할 수 있습니다. 물론, CSS를 잘 아신다면 사용자 정의를 통해 제공하지 않는 웹폰트를 정의해 사용할 수도 있습니다. 그럼에도 마음에 드는 웹폰트가 없다면 어떻게 해야할까요?웹폰트를 사용하기 위해 구글 폰트 로더를 사용하고 있습니다. 즉, 이것을 없애면 두루 쓰이는 맑은 고딕 또는 애플 SD 산돌고딕 Neo 폰트를 사용할 수 있게 됩니다. 여기서 두루 쓰인다는 말의 의미는 PC에 기본으로 설치된 폰트를 의미합니다. 모바일기기의 경우에는 사용자가 지정한 폰트로 보입니다.구글 폰트..

웹폰트의 사용, 누누이 말씀을 드렸지만, 다시 또 얘기해봅니다. 탕비수다 이마고는 노토산스 웹폰트를 기본 웹폰트로 사용하고 있습니다. 그런데 기본 웹폰트가 싫다면 어떻게 해야 할까요? 스킨에서 제공하는 몇 가지 구글 웹폰트로 변경할 수 있습니다. 물론, CSS를 잘 아신다면 사용자 정의를 통해 제공하지 않는 웹폰트를 정의해 사용할 수도 있습니다. 그럼에도 마음에 드는 웹폰트가 없다면 어떻게 해야할까요?웹폰트를 사용하기 위해 구글 폰트 로더를 사용하고 있습니다. 즉, 이것을 없애면 두루 쓰이는 맑은 고딕 또는 애플 SD 산돌고딕 Neo 폰트를 사용할 수 있게 됩니다. 여기서 두루 쓰인다는 말의 의미는 PC에 기본으로 설치된 폰트를 의미합니다. 모바일기기의 경우에는 사용자가 지정한 폰트로 보입니다.구글 폰트..

이미지 맵에 대해서

이미지 맵에 대해서

지원

이미지 맵은 글에 사용한 이미지를 한 곳에 모아 놓은 영역입니다. 요즘은 글보다 사진을 통해 어떤 상황을 설명하는 경우가 더 많은데요. 상황을 설명하는 이미지가 많을 경우 사용자는 흔히 스크롤 압박을 겪습니다. 더군다나 아까 본 이미지를 찾기 위해 다시 위아래로 스크롤을 하며 찾는 경우가 종종 있습니다. 이미지를 많이 사용하는 블로그라면 상황에 맞게 적절히 사용하면 좋은 기능입니다. 아쉬운 점은 이미지 맵으로 이동하기 아이콘을 클릭해 이미지 맵으로 이동할 때 해당 이미지가 바로 보이면 좋겠는데요. 아직 그런 기능은 구현하지 못 했습니다. 사용하는 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..

대표이미지 숨기기

대표이미지 숨기기

지원

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

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

웹폰트에 대해서

웹폰트에 대해서

지원

스킨에서 대표 웹폰트를 변경하는 방법은 스킨 가이드, 웹폰트를 살펴보세요. 대표 웹폰트 변경 방법을 숙지했다면, 이제 새로운 웹폰트를 추가할 준비가 된 셈입니다. 한글 웹폰트를 제공하고 있는 서비스 가운데 대표적인 서비스는 Google Fonts이며 Early Access가 이에 해당됩니다. 따라서 Early Access에서 제공되지만 스킨에 추가되지 않은 웹폰트를 스킨에 추가해 대표 웹폰트로 설정하는 방법을 알아볼까 합니다. 구글 웹폰트 로더 스킨의 웹폰트는 Google WebFont Loader로 작동합니다. 아래는 Google WebFont Loader 정의로 HTML에서 확인할 수 있습니다. 스킨은 영문 웹폰트는 Lato를 기본으로 하며 한글 웹폰트는 노토산스를 기본으로 하고 있습니다. 우리가 주..

스킨에서 대표 웹폰트를 변경하는 방법은 스킨 가이드, 웹폰트를 살펴보세요. 대표 웹폰트 변경 방법을 숙지했다면, 이제 새로운 웹폰트를 추가할 준비가 된 셈입니다. 한글 웹폰트를 제공하고 있는 서비스 가운데 대표적인 서비스는 Google Fonts이며 Early Access가 이에 해당됩니다. 따라서 Early Access에서 제공되지만 스킨에 추가되지 않은 웹폰트를 스킨에 추가해 대표 웹폰트로 설정하는 방법을 알아볼까 합니다. 구글 웹폰트 로더 스킨의 웹폰트는 Google WebFont Loader로 작동합니다. 아래는 Google WebFont Loader 정의로 HTML에서 확인할 수 있습니다. 스킨은 영문 웹폰트는 Lato를 기본으로 하며 한글 웹폰트는 노토산스를 기본으로 하고 있습니다. 우리가 주..

사진의 카메라 및 촬영 정보(Exif; EXchangable Image File format)에 대해서

사진의 카메라 및 촬영 정보(Exif; EXchangable Image File format)에 대해서

지원

흔히 사진 촬영의 메타정보라고 하는 Exif는 사진에 대한 정보를 포함하는 메타데이터가 추가된 이미지 파일 포맷입니다. 스킨에서 해당 기능을 좀 다뤘으면 하는 문의가 있었습니다. 티스토리 플러그인 티스토리에도 관련 플러그인이 존재합니다. '블로그관리 > 플러그인' 설정에서 사진 정보(EXIF) 출력이 이에 해당됩니다. 아쉬운 점은 각 정보에 대한 구분 값이 없어 다양한 가공이 불가능하다는 점입니다. 정보가 있는 순서대로 나열될 뿐 해당 값이 어떤 정보를 의미하는지 알 수 없습니다.고민 끝에 스킨에서는 티스토리에서 제공하는 플러그인을 사용하기로 했습니다. 아무래도 한 번 더 이미지를 호출하는 방식은 로딩을 지연하는 원인이 될 수 있기 때문입니다. 해당 기능은 따로 스킨 설정이 필요 없습니다. 티스토리 관리..

흔히 사진 촬영의 메타정보라고 하는 Exif는 사진에 대한 정보를 포함하는 메타데이터가 추가된 이미지 파일 포맷입니다. 스킨에서 해당 기능을 좀 다뤘으면 하는 문의가 있었습니다. 티스토리 플러그인 티스토리에도 관련 플러그인이 존재합니다. '블로그관리 > 플러그인' 설정에서 사진 정보(EXIF) 출력이 이에 해당됩니다. 아쉬운 점은 각 정보에 대한 구분 값이 없어 다양한 가공이 불가능하다는 점입니다. 정보가 있는 순서대로 나열될 뿐 해당 값이 어떤 정보를 의미하는지 알 수 없습니다.고민 끝에 스킨에서는 티스토리에서 제공하는 플러그인을 사용하기로 했습니다. 아무래도 한 번 더 이미지를 호출하는 방식은 로딩을 지연하는 원인이 될 수 있기 때문입니다. 해당 기능은 따로 스킨 설정이 필요 없습니다. 티스토리 관리..