Total Fix!

[ jQuery / CSS ] 제이쿼리와 CSS를 이용한 반응형 유튜브 플레이어

블로그를 손보다 반응형에 맞추어 동영상 플레이어도 크기를 조절하는 방법을 찾다 생각한 방법입니다. 기존 CSS 방식의 문제점 널리 알려진 CSS만을 이용한 동영상 플레이어를 반응형으로 만들거나 Bootstrap의 Responsive embed를 이용할 때에는 동영상의 원래의 크기와 상관없이 가로길이가 100%에 맞춰지게 됩니다. 이는 본문 크기보다 큰 동영상의 경우는 관계없지만, 본문보다 작은 동영상의 경우 오히려 보기가 불편해집니다. 여기서 소개하는 방법은 동영상보다 본문의 크기가 클 때는 동영상의 사이즈로 크기가 조절되고 동영상보다 본문이 작아지면 본문의 100% 맞춰지는 방법입니다. 그리고 동영상의 비율도 함께 조절됩니다. 이제부터 적용하는 방법에 대하여 설명하겠습니다. 먼저 동영상의 원래 크기부터..

광고

[ Tistory ] 링크를 카테고리화하는 방법

이번 포스트에서는 티스토리의 링크 기능을 카테고리화 하는 방법에 관한 내용입니다. 티스토리의 링크 설정에는 카테고리(그룹) 설정이 있으니 블로그에 적용 시에는 그냥 나열식이라 분리할 필요성이 있어 그 방법에 대하여 생각해 보았습니다. 준비사항 jQuery를 사용할 수 있도록 정의 하셔야 합니다. 특징 목록 관리는 티스토리 관리페이지에서 기존과 같이 합니다. 카테고리 형식처럼 접었다 펼쳤다 할 수 있습니다. Javascript (jQuery) 1 아래의 자바스크립트를 상단의 사이에 삽입합니다. 이 Javascript (jQuery) 1는 List 재설정을 위한 스크립트 입니다. Javascript (jQuery) 1 function split_list(s,e,index) { if (e == "all") {..

광고

[ Tistory ] 사이드바용 달력 위젯

티스토리 사이드바용 달력 위젯입니다. 준비 사항 jQuery - 모양을 내기 위한 약간의 jQuery가 포함되어 있습니다. 날짜 형식을 바꿀때도 사용합니다. Bootstrap - 여기서는 단순히 rem 단위를 설정해 주는 용도 정도만 사용합니다. 만일 사용하고 싶지 않다면 단위만 px로 설정하면 되겠습니다.(1rem = 10px) 특징 오늘 - 오늘의 표시는 푸른색으로 표시 됩니다. 포스트 작성일 - 포스트를 작성한 날의 경우 우측 상단에 오랜지 색의 삼각형 모양의 표식이 생깁니다. 년월 표시 - 년월을 한글 형식으로 표시합니다. HTML css /* calender */ .calender { border:0; margin: 0 auto 2rem; } .calender.panel > .panel-body..

광고

[ Tistory ] 블로그 단축키 설정하기

블로그 단축키 설정하기 일부 기능의 단축키를 설정하는 스크립트입니다. 이 스크립트를 사용 시 필요 사항 이 스크립트에서는 페이지 이동 시 1페이지 일 때는 최근 글 목록에서 다음 페이지를 뽑아오게 됩니다. 따라서 최근 글 목록이 필요합니다. 필요에 따라서 단축키를 추가하세요. javascript //단축키 설정 var this_page_num = $('.pagination > .numbox > a > span.selected').text().replace( /(\s*)/g, "" ); var last_page_num = $('.pagination > .numbox > a').last().text().replace( /(\s*)/g, "" ); this_page_num *= 1; last_page_num ..

광고

[ Tistory ] 페이지네이션 만들기

티스토리 페이지네이션 만들기입니다. Font Awesome, jQuery를 이용하였지만 페이지 번호를 고치는 과정을 생략시에는 Javascript는 필요하지 않습니다. 특징 데스크탑일 경우 기존과 동일한 구성을 가지고 있다. 태블릿 이하일 경우 "이전 페이지", "현재 페이지 번호", "다음 페이지" 형식으로 바뀐다. HTML Prev Next CSS /* 페이지 네이션 설정 */ .pagination { text-align: center; margin: 1.5rem auto; display:block; } .pagination > a > span, .pagination > .numbox span { -webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0..

광고

[ Tistory ] Bootstrap 및 CSS를 이용한 댓글 설정 및 사용자 아이콘 처리

일부분의 특성을 Bootstrap을 이용하기 때문에 Bootstrap이 필수이다. 아이콘은 Font Awesome을 이용하였습니다. 만일 Bootstrap과 Font Awesome을 이미 사용중이라면 해당 내용을 그대로 바꾸어도 사용이 가능 할 것이다. 특징 우선 사용자 아이콘처리를 스크립트를 이용하지 않고 변경하였다. 파비콘이 설정되어 있더라도 파비콘은 숨긴다. 아이콘 설정이 안된 회원이나 비회원으로 글 작성시 비회원용 아이콘이 출력된다. 댓글 주소 버튼을 클릭시 주소가 나타나도록 스크립트를 이용하여 처리하였다. (댓글 펼치기 설정이 되어 있어야 합니다.) 아이콘 설정 방법 댓글에 아이콘을 설정하기 위해서는 플러그인에서 설정을 하여야 합니다. HTML 처리 부분 중간에 부분 2곳은 블로그 펼침 설정이 ..

광고