유튜브 영상 임베드 팁들
유튜브 영상 임베드 팁들

1cs 가장 단순히 유튜브 영상을 불러오는 방식입니다. 공유 > 퍼가기 > 소스코드 복사라는 간단한 방식으로 가능합니다만, 아무래도 깔끔함은 조금 떨어집니다. 짤막한 팁들 몇 가지로 조금 더 깔끔하게 유튜브 영상을 불러오는 방법을 소개해볼까 합니다. 라이브 데모 영상을 클릭하면 음소거/해제 가 반복됩니다. 시작하기 전 1cs 후술할 내용은 위 스크립트가 있어야 제대로 작동합니다. 임베드한 영상을 강제로 화면에 맞추기123456789101112131415161718192021.videoWrapper { position: fixed; top: 0; bottom: 0; left: 0; right: 0;} @media (min-aspect-ratio: 16/9) { .videoWrapper { height: 3..

티스토리 모든 답글들에 답글 달기 버튼 만들기
티스토리 모든 답글들에 답글 달기 버튼 만들기

댓글에서 대화가 좀 길어진다 싶으면, 답글 읽고, 스크롤 끌어 올려서 답글 버튼 누르고, 다시 확인하러 스크롤 내리는 과정이 여간 귀찮은 일이 아닙니다.html에 버튼 하나 추가하고, 자바스크립트를 추가하면 모든 답글에 답글 달기 버튼을 만들 수 있습니다. HTML1cs 먼저 답글 다는 버튼을 찾으셔야 합니다.html에서 onclick_reply 검색하시면 바로 나오지 않을까 싶습니다. 해당 버튼과 똑같은 형태를 유지해야 하니, onclick=""으로 변경해주시고, class를 "reply-alt" 등으로 변경하신 후에 답글이 출력되는 부분에 붙여 넣어주세요 JS123$(".reply-alt").each(function() { $(this).attr("onclick", $(this).parents(".c..

티스토리 카테고리에 아코디언 메뉴 사용하기
티스토리 카테고리에 아코디언 메뉴 사용하기

이런 식으로 접었다 폈다 하는 메뉴를 아코디언 메뉴라고 합니다. HTML 라는 티스토리 치환자만 있으면 됩니다. CSS12345678.sub_category_list {display:none}.ac-toggle i {transition:.25s}.ac-menu.expanded .ac-toggle i{transform:scaleY(-1)}.ac-menu .ac-toggle i { float: right; padding-right: 5px; pointer-events: none}Colored by Color Scriptercs.ac-menu .ac-toggle i라는 항목과 .c_cnt라는 항목(티스토리에서 기본적으로 카테고리 글 수에 추가하는 class)에 같은 css를 적용하면 위 사진처럼 모두 우측 정..

[Javascript] 티스토리 썸네일 불러오기
[Javascript] 티스토리 썸네일 불러오기

원본은 뭐하라님의 스크립트입니다. 원본 스크립트가 og:image의 경로 변경 때문에 제대로 작동하지 않아서 수정했습니다.댓글 작성자의 사진도 제대로 가져오질 못하는 것 같아 삭제했습니다. 아래 html을 보시면 아시겠지만, "tf", "article_thumb"란 class를 가진 a태그 아래에 있는 "thumb"란 class를 가진 img의 src를 변경합니다. 이전 글, 다음 글의 링크 혹은 최근 글 목록, 공지 목록 등에 활용하실 수 있습니다. HTML123 Colored by Color Scriptercsonerror의 경로는 원하시는 이미지의 경로로 변경하시면 됩니다. JS 1234567891011121314151617181920212223242526272829303132333435363738..

[Javascript] 티스토리의 대표 이미지를 배너에 불러오기
[Javascript] 티스토리의 대표 이미지를 배너에 불러오기

티스토리 블로그를 처음 시작했을 때, 이런 방식이 적용된 블로그를 보고 관련 정보를 한참 찾아다니다 포기했었습니다 ㅠㅠ배너를 영상으로 넣고 사느라 잊어버리고 있다가, 새로운 스킨을 만들며 생각이 나서 작업해봤습니다. 위 사진처럼 배너를 꾸밀 때 사용하실 수 있습니다. HTML12345 cs CSS123456789101112131415161718192021222324252627#banner, #blog-banner { width: 100%; height: 50vh} #blog-banner { top: 0; left: 0} #blog-banner .banner_wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 50vh; backgroun..

[Javascript] 해시로 이동하면 헤더 높이만큼 스크롤 하기
[Javascript] 해시로 이동하면 헤더 높이만큼 스크롤 하기

사이트 내부에서 특정 id로 이동하는데, 고정된 헤더가 페이지 최상단에 존재한다면, 대상을 가려버립니다. 예시)스크립트가 작동하는 경우스크립트가 작동하지 않는 경우 티스토리에서 해시로 이동하는 대표적인 경우는, Z, X키를 누르면 최근 글 / 댓글로 이동하는 경우와 최근 댓글을 클릭하면 해당 댓글로 이동하는 경우 두 가지가 있겠네요. 123456789$(window).on("load", function () { $(function () { var c = location.hash, d = c.indexOf("comment"); 0

[Javascript] 영상이 스크롤 밖으로 나가면 고정하기
[Javascript] 영상이 스크롤 밖으로 나가면 고정하기

업데이트 https://marshall-ku.com/268 영상 등을 글과 함께 포스팅하면, 당연하지만 별다른 작업을 하지 않으면 글을 읽기 시작하면 비디오는 스크롤 영역 밖으로 나가버립니다.이 스크립트는 글을 읽으면서도 영상이 조그맣게 고정되어 보이도록 해주는 스크립트입니다. CSS 12345678910111213.video-posted { padding-bottom: 157.5px}.video-post.sticked { position: fixed; bottom: 30px; left: 10px; width: 280px; z-index: 1950}.padding-sizer { width: 100%}cs video-posted는 body에 추가되는 class입니다.비디오가 본문의 어떤 요소를 가리는 현상..

티스토리 댓글에 링크 / 이미지 / 비디오 넣기
티스토리 댓글에 링크 / 이미지 / 비디오 넣기

20180904 업데이트 - 트위터의 jpg:large 추가 위는 압축이 되지 않은 버전, 아래는 압축된 버전입니다. 바로 사용하시진 못하고, 댓글을 감싼 div에 "comment-content"란 class를 추가해주시거나, ".comment-content"를 검색하셔서 본인의 class 명으로 변경해주셔야 사용 가능합니다. Github에도 관련된 자료가 많습니다.예시1, 예시2 댓글에 링크 등을 남기면, 이러한 스크립트 없이는 일일이 링크를 드래그해서 해당 링크로 이동하기를 클릭해야 하는 번거로움이 있습니다만, 위 스크립트를 사용하시면 스크립트가 알아서 링크는 a 태그로, 비디오는 video 태그로, 이미지는 img 태그로, 유튜브 링크는 iframe으로 감싸줍니다. 123456789101112131..

[CSS] 요소를 일정 비로 감싸기
[CSS] 요소를 일정 비로 감싸기

아래 동영상처럼 특정 요소를 일정한 비율로 반응형으로 감싸고 싶을 때 사용하는 방식입니다. HTML123 Hi!cs CSS1234567891011121314151617.parent { width: 100%; padding-bottom: X; position: relative;}.child { position: absolute; width: 100%; height: 100%;}.child { position: absolute; top:0; left:0; right:0; bottom:0;}cs 요소를 감싸줄 부모 요소가 하나 필요합니다. "parent"의 padding-bottom(혹은 top) 값을 수정하여 비율을 설정합니다. 요소 내부를 꽉 채우실 거라면 "child"의 첫 번째 항목을 사용하시고, 일정..

스킨/스킨 목록
잡담
갤러리