[JS, CSS] 유튜브 등의 비디오를 반응형으로 감싸기
[JS, CSS] 유튜브 등의 비디오를 반응형으로 감싸기

앞서 작성한 요소를 일정 비로 감싸기와 유튜브 세로 영상 퍼오기를 확인하시면 더 간단히 이해하실 수 있습니다.Github 링크 가장 기본적인 16:9로 감싸는 건 유튜브 뿐 아니라 카카오 TV, 네이버 TV 등도 지원합니다.하지만 9:16 비디오, 4:3 비디오, 1:1 비디오 등은 유튜브에서밖에 테스트하지 않았습니다. 작동 확인은 여기서 하시거나 아래 이미지 목록을 펼쳐주세요. JS1234567891011121314151617181920$("iframe").each(function() { var a = $(this).attr("width"), b = $(this).attr("height"); if (a / b === 16 / 9) { $(this).wrap("") } if (a / b === 9 / 1..

티스토리 반응형 스킨 Summer Nights 2.0 배포
티스토리 반응형 스킨 Summer Nights 2.0 배포

드디어 배포하게 됐습니다.배포 준비하고 배포하기 1시간 전에 티스토리 툴바가 업데이트돼서 다시 작업하는 등 우여곡절이 많았네요 ㅠㅠ 소개상당히 많은 기능을 구겨 넣되 커스터마이징은 간단하게 할 수 있게 한 스킨입니다.다양한 기능 덕에 스킨에 생동감도 넘치는 편입니다. 자세한 기능 소개는 여기다운로드는 여기데모 블로그는 여기 1 버전에선 없던 기능인 커버를 사용해 홈 화면을 꾸밀 수 있습니다.커버 기능의 업데이트로 1 버전의 특색이던 홈 화면은 사라졌지만, 수정이 훨씬 쉬워지고 기능은 다양해졌습니다. 2단형에서 1단형으로 변경된 글 화면 한층 동글동글해진 댓글 목록.더는 이미지나 비디오 등을 위해 새로 고침 할 필요도 없어졌습니다. 3가지로 늘어난 글 목록의 디자인 2018년 8월에 처음 선보인 뒤로 엄청..

티스토리 반응형 스킨 배포 [Lovely Pink]
티스토리 반응형 스킨 배포 [Lovely Pink]

20190227 11:09 업데이트 - 모바일에서 검색창이 이상하게 보이던 오류 수정 20190301 17:03 업데이트 - 누락된 404 이미지 추가 소개핑크핑크한 1단형 스킨입니다. 반응형 스킨이며, masonry를 사용해 글 목록을 보여줍니다. 댓글 뿐 아니라 방명록에도 프로필 사진을 표시하며, 댓글에 유튜브 비디오, 이미지 등 다양한 것을 첨부할 수 있습니다. 의외에도 본문에 첨부한 유튜브 비디오를 반응형으로 감싸는 등, 잡다한 기능이 내장되어 있습니다. 라이브 데모 스크린샷 다운로드 및 설치 배포 중단(2019.03.20)2.0 버전 구매 1. 다운받은 파일 압축을 해제합니다. 2. 블로그 관리 > 꾸미기 > 스킨 변경 > 스킨 등록에서 모든 파일을 업로드합니다. 3. 스킨 보관함에서 업로드한 ..

티스토리 반응형 스킨 [Summer Nights] 1.5 배포
티스토리 반응형 스킨 [Summer Nights] 1.5 배포

다운로드 배포 중단 (2019.03.21) 완전히 무료로 제공되는 스킨입니다. 스킨에 삽입된 스킨의 제작자와 관련된 문구들은 삭제하지 말아 주세요.인터넷 익스플로러와 완벽하게 호환되지 않습니다. 헤더 카테고리의 '분류 전체 보기', 사이드바의 '카테고리 전체 보기'가 필요 없으신 분은 no_view_all.js를 받아주세요. 스킨을 내려받으신 후에 이 글을 참고하시면 수월한 커스터마이징을 하실 수 있습니다. 데모 페이지 소개 Cool Summer Fruity Orange Lovely Heart Snowy Snow 화면을 꽉 채우는 이미지로 구성된 인덱스 페이지가 특징인 반응형 스킨입니다.html에 class의 조정이나, 간단한 css의 수정을 통해 커스터마이징이 쉽도록 노력합니다.또한, 스크립트를 통해 ..

티스토리 반응형 스킨 [Summer Nights] 1.4 배포
티스토리 반응형 스킨 [Summer Nights] 1.4 배포

최신 버전 업데이트 https://marshall-ku.tistory.com/178 다운로드 스킨 내부의 저작권과 관련된 문구는 수정 및 삭제하지 않으셨으면 합니다.이 스킨은 인터넷 익스플로러와 완벽하게 호환되지 않습니다. 완전히 무료로 제공되는 스킨이지만, 무료로 제공한다는 것이 배포의 자유를 허락하는 것은 아닙니다.스킨을 내려받으신 후에 이 글을 참고하시면 수월한 커스터마이징을 하실 수 있습니다. 데모 페이지 소개 Cool Summer Fruity Orange Lovely Heart Snowy Snow 화면을 꽉 채우는 이미지로 구성된 인덱스 페이지가 특징인 반응형 스킨입니다.완벽한 보안 연결을 사용하실 수 있으며, 쉬운 커스터마이징, 스크립트를 이용한 다양하고 세세한 기능을 제공합니다. 글 목록엔 ..

티스토리 반응형 스킨 #6 갈매기, 날다
티스토리 반응형 스킨 #6 갈매기, 날다

흑백의 색상이 돋보이는 이 스킨은, 땀똔 님의 블로그에 사용하시던 디자인을 바탕으로 스크립트를 다시 짜고, 반응형으로 만드는 작업을 한 스킨입니다.아직 작업이 완료된 게 아니라서, 빈틈이 조금 보입니다 ㅠㅠ 배너에는 땀똔님이 찍으신 사진이 무작위로 보입니다.글 목록의 사진은 모두 흑백으로 표시됩니다. 차분함과 통일성이 인상적이어서 저도 한 번 해보려고 했으나, 주변은 온통 알록달록한데 글 목록만 회색으로 변하니까 영 어색해서 테마를 싹 바꾸면서 작업을 해야 하지 않을까 싶습니다.ㅋㅋㅋ 마우스를 올리면 제목과 작성일이 사라지면서 컬러로 표시됩니다. 글에 이래저래 사용하시던 디자인이 많은데, 지금은 제목 부분만 작업 됐습니다.제목 부분에 들어가는 이미지도 원래 카테고리에 맞게 바뀌도록 작업을 해두셨는데, 정..

티스토리 반응형 스킨 [Summer Nights] 1.3 배포
티스토리 반응형 스킨 [Summer Nights] 1.3 배포

최신 버전을 이용해 주세요. https://marshall-ku.tistory.com/178 다운로드 이 스킨은 인터넷 익스플로러와 완벽하게 호환되지 않습니다. 완전히 무료로 제공되는 스킨입니다. 스킨을 내려받으신 후, 이 글을 참조하시면 커스터마이징을 수월하게 하실 수 있습니다. 데모 페이지 소개 Cool Summer 스킨 Lovely Heart 스킨 Snowy Snow 스킨 인덱스 페이지를 화면을 가득 채우는 사진과 로고 등으로 꾸미는 반응형 스킨입니다. 최대한 자유롭고 편하게 커스터마이징을 할 수 있도록 작업합니다. 카테고리 글 목록엔 masonry 디자인을 사용합니다. 페이지의 전환은 별도의 클릭이 필요 없이 스크롤을 아래로 내리면 다음 페이지의 글 목록을 불러옵니다. 스킨을 처음 적용하면, 이미..

티스토리 반응형 스킨 [Summer Nights] 1.2 배포
티스토리 반응형 스킨 [Summer Nights] 1.2 배포

최신 버전 다운로드! https://marshall-ku.tistory.com/178 다운로드 스킨에 포함된 인터파크 고딕 폰트는 개인의 비상업적 용도에 한해 무료로 제공되는 폰트입니다. 다운로드하신 후, 이 포스트를 참조하시면 각종 설정을 하실 수 있습니다.포스트의 내용은 지속해서 업데이트될 예정입니다. 데모 페이지 소개위는 Skyblue (Dance the Night Away), 아래는 Purple & Pink (What is Love) 테마입니다. 화면을 가득 채우는 사진과 로고로 구성된 인덱스 페이지, 자유로운 커스터마이징 등의 특징을 지닌 반응형 스킨입니다. 카테고리 목록엔 Masonry 디자인이 사용됐습니다.페이지를 전환할 필요 없이 스크롤을 아래로 내리기만 하면 자동으로 다음 페이지의 글 목..

티스토리 반응형 스킨 공유
티스토리 반응형 스킨 공유

저번에 작성한 글은 너무 허술한 면이 있고, 조그마한 변화가 있어 재차 글을 작성합니다. 글 다 써놓고 파일 첨부하다가 크롬이 튕기는 바람에 처음부터 모조리 다시 썼네요... 스킨을 배포하는 것도 처음이고, 블로그를 운영한 시간도 그리 길지 않아 다양한 변수와 마주해보지 못했습니다. 만약 문제점을 발견하셨다면, 가르쳐주시면 굉장히 감사하겠습니다. 1. 다운로드 2. 소개 3. 각종 설정 및 사용법 * 주의 : 이 스킨에 포함된 인텔 고딕체 등은 개인의 비상업적 용도에 한해 사용이 허가되어 있습니다. 광고가 달린 블로그라면 사용 시 문제가 발생할 수 있습니다. 조금 더 쉽게 이미지와 비디오가 어디 사용되는지 파악 가능하시도록 제가 사용하던 비디오와 이미지 파일들을 삭제하지 않았습니다. 데모 페이지는 따로 ..

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