사운드클라우드 썸네일 추출

사운드클라우드의 오픈 API를 활용하여 썸네일을 추출하는 방법에 대하여 살펴봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 사운드클라우드 API Key 발급 사운드클라우드 썸네일을 추출하기 위해서는 API Key 발급이 필요하다. 사운드클라우드 API에 접속하여 사용할 애플리케이션에 맞는 키 발급을 받으면 된다. 이 글에서는 자바스크립트를 이용하니 Client-side JavaScri..
웹코딩/App,Plugin 2015.12.25 20:25

데일리모션 동영상 썸네일 추출

데일리모션 동영상의 썸네일을 추출하는 방법에 대하여 살펴봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 데일리모션 동영상 VID 추출 아래와 같이 어딘가에 데일리모션 동영상이 삽입되었다고 가정하자. 대부분의 멀티미디어 서비스들은 고유의 ID값(VID)들로 영상들을 구분하고 각각의 정보를 분류하기에 이 VID 값을 추출하는 것이 필요하다. <iframe frameborde..
웹코딩/App,Plugin 2015.12.25 17:53

다음 tv팟 동영상 썸네일 추출

다음 tv팟 동영상의 썸네일을 추출하는 방법을 살펴보며 유념해야 할 부분을 짚고 넘어갑니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 다음 tv팟 동영상 VID 추출 아래와 같이 어딘가에 다음 tv팟 동영상이 삽입되었다고 가정하자. 대부분의 멀티미디어 서비스들은 고유의 ID값(VID)들로 영상들을 구분하고 각각의 정보를 분류하기에 이 VID 값을 추출하는 것이 필요하다. <IFRA..
웹코딩/App,Plugin 2015.12.25 11:00

비메오 동영상 썸네일 추출

비메오 동영상의 공유소스를 기반으로 썸네일을 추출하는 방법에 대하여 살펴보며 크로스브라우징에 관련된 사항을 짚어봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 비메오 동영상 VID 추출 아래와 같이 어딘가에 비메오 동영상이 삽입되었다고 가정하자. 대부분의 멀티미디어 서비스들은 고유의 ID값(VID)들로 영상들을 구분하고 각각의 정보를 분류하기에 이 VID 값을 추출하는 것이 필요하다...
웹코딩/App,Plugin 2015.12.11 11:00

티스토리 첨부 파일 디자인

티스토리의 첨부 파일은 파일형식에 따라 각각의 아이콘 이미지가 함께 제공되는데 아래가 대표적인 예이다. 이대로 사용해도 큰 문제는 없지만 반응형 디자인을 지원하는 경우, 모바일의 뷰포트의 크기에 따라 글자와 아이콘 이미지가 정렬되지 않는 경우가 있을 수 있다. 이 경우 vertical-align: middle 이 지정되어 있는 정렬 값을 변경해보자. .imageblock > a[href*="attachment"] > img { ..
티스토리/스킨가이드 2015.12.08 11:00

CSS로 유동적인 컨테이너 너비에 기반한 이미지 비율 유지, 가운데 정렬, 자르기

이미지 요소나 비디오 요소를 특정 비율에 맞춰 확장 또는 축소되길 원할때 사용되는 기법에 대한 설명입니다. 스크립트의 사용없이 오직 CSS만을 이용하여 이를 구현해보며 원리의 이해를 돕습니다. 이미지 비율 유지 이미지의 비율을 유지하면서 크기 조정을 하는 방법은 이미지의 너비와 높이 둘 중 어느 하나를 auto 값을 유지한 채로 크기 조정을 하는 것이다. 흔히 반응형 이미지에 사용되는 방법은 아래와 같다. img { max-width: 1..
웹코딩/CSS 2015.11.26 03:33

CSS3 오브젝트 채우기, 위치조정 (object-fit, object-position) 속성

CSS를 이용하여 <img> 나 <video> 요소같은 오브젝트들을 비율을 유지한 채로 크기를 조정하는 것은 매우 까다로운 부분입니다. 오브젝트들이 출력될 공간이 유동적인 크기가 아닌 고정된 크기라면 더욱 골머리를 썩히게 됩니다. 이에 대응하는 CSS3 속성에 대하여 살펴봅니다. object-fit 속성 object-fit 속성은 대체되는 요소의 내용(<img>, <video>, <object>..
웹코딩/CSS 2015.11.20 11:00

티스토리 최신글, 카테고리 썸네일 추출에 대한 이해

티스토리 스킨에는 갤러리 형태의 카테고리(검색결과) 및 최신글의 이미지를 출력하는 치환자가 공개되지 않았습니다. 물론, 티스토리에서 제공하는 모바일 스킨에는 이를 지원하고 있으나 모바일 스킨은 공개되지 않았기에 일반 스킨 제작자들은 다른 방법을 필요로 합니다. 티스토리 썸네일 치환자 업데이트! 티스토리에서 공식적으로 썸네일 치환자가 업데이트 되었습니다. http://www.tistory.com/guide/skin/step3#2-8-7 Aj..
티스토리/스킨가이드 2015.11.03 11:00

티스토리 본문 너비와 사진 첨부로 삽입되는 이미지의 상관관계

티스토리 에디터의 사진 첨부 기능으로 이미지를 삽입할때 영향을 주거나 받는, 연관하여 스킨 제작시에 제한 받을 수 있는 점들에 대하여 살펴봅니다. 스킨 제작분들 이외에도 블로그를 시작하기 전에 알아두면 차후 스킨 변경시 이미지로 인해 겪는 문제를 덜 수 있습니다. 티스토리 본문 너비 이해 티스토리의 본문 너비라고 지칭하면 대부분 글쓰기 가로폭을 떠올린다. 이는 TISTORY 관리 → 글설정 → 글쓰기 환경의 글쓰기 가록폭 에서 설정 할 수 있으며,..
티스토리/스킨가이드 2015.11.02 11:00

CSS로 글자 자르기 - 한 줄, 여러 줄

고정된 너비만을 제공하는 레이아웃에서는 서버단에서 화면에 출력할 글자수를 미리 가늠하며 디자인하기가 수월합니다. 레이아웃이 유동적인 너비를 가지거나 서버 스크립트쪽에 접근할 수 없어 글자수를 제어하기 곤란할 경우에는 아래에서 설명하는 방법들이 추천됩니다. 한 줄 단위로 글자 자르기 처음으로 적용해 볼 것은 한 줄, 혹은 여러 줄에 걸쳐 출력되고 있는 글자들을 지정된 너비에 맞게 한 줄 단위로 자르는 법이다. 이는 여러가지 CSS 속성들을 조합하여..
웹코딩/CSS 2015.10.30 11:00

티스토리 반응형 이미지 제공

티스토리는 반응형 스킨을 위해 따로 무엇인가 지원하는 곳은 아니였습니다. 스킨공모전 이후에 새로운 스킨을 준비중이라는 티스토리 측의 말이 있었듯이 하나 둘 기본 시스템을 업데이트해 나가고 있습니다. 얼마전에는 날짜 표현방식이 변경되어 당황스런 일도 있었지만 이번에 발견한 것은 본문에 삽입되는 이미지와 관련된 정보입니다. 반응형 이미지 지원 그 동안 티스토리 스킨제작시에 에디터로 삽입되는 본문 이미지를 반응형 디자인에 맞게 수정하기 위해..
티스토리/스킨가이드 2015.10.29 11:00

Headroom.js - 스크롤을 감지하여 반응하는 요소

몇몇 애플리케이션에서 스크롤에 따라 하단의 광고가 등장하거나 상단의 메뉴가 등장하는 등의 사용자 편의를 고려한 디자인을 접해보셨을 겁니다. 관련하여 많은 스니핏(코드조각)이 존재하는데 그 중에서 한가지를 소개합니다. Headroom.js 소개 헤드룸(Headroom)은 사용자의 스크롤을 감지하여 원하는 요소에 동작을 추가하는 가벼운 고성능의 자바스크립트 위젯이다. 이는 상단의 네비게이션에 자주 애용되고 있으며, 기존의 고정(Fixed)된 네비게..
웹코딩/App,Plugin 2015.10.27 11:00

IE7에서 :before, :after 선택자와 content 속성 대체방안

IE7을 고려해야하는 페이지를 제작하는 경우, :before 나 :after 와 같은 가상 선택자를 지원하지 않아 애를 먹곤 합니다. 설상가상으로 content 속성까지 지원하지 않지요. 이에 대한 대체방안을 모색해봅니다. :before, :after 선택자 대체방안 IE7에서는 :before 와 :after 가상 선택자를 대체하기 위해서 새로운 요소를 생성하고 이에 클래스명을 부여하는 방법이 사용된다. 아래의 예시와 같이, 이 표현식은 자바스..
웹개발론/크로스브라우징 2015.10.26 11:00