'반응형' 태그의 글 목록 6개

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

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

지원

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

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

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

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

지원

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

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

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

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

지원

탕비수다 이마고 스킨에는 ‘본문 축소’와 ‘그리드 이미지’ 기능이 있습니다. 전자는 '와이드 이미지' 효과를 그대로 모방했습니다. 글 가로 폭과 본문 축소의 차이만큼 넓게 이미지를 배치하며 후자는 한 행에 최대 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 정의..