WEBDIR

Windows 10 업그레이드 및 설치

'새해에는 새 윈도우에~!' 라는 다짐아래 그 동안의 시스템을 정리하고 윈도우 10으로 업그레이드를 진행하였고 무사안착 하였습니다. 관련하여 설치순서를 정리해봅니다. 일반 사용자를 위한 윈도우즈 10 무료 업그레이드 혜택은 2016년 7월 29일로 종료되었습니다. 하지만 마이크로소프트는 여전히 무료 업그레이드 혜택을 받을 수 있는 통로를 열어두었습니다. 보조 기술을 사용하는 고객을 위한 Windows 10 무료 업그레이드 Windows 10 업그레이드 알림 기존의 시스템에 업그레이드가 준비되면 아래와 같은 알림이 등장한다. 또한, 윈도우가 설치된 드라이브에는 $Windows.~BT라는 숨긴 폴더가 존재하며, 이는 윈도우 10 설치파일을 미리 다운로드받아둔 폴더로 약 3~6Gb의 용량을 차지한다. 윈도우 ..

윈도우즈/Windows 10 2016. 1. 9. 11:00

Windows 10 업그레이드 및 설치전 준비사항

기존의 윈도우 시스템을 윈도우 10으로 업그레이드하거나 클린설치를 염두에 두고 있을때 유의해야 할 사항들을 짚어봅니다. 하드웨어 호환성 확인 윈도우 10을 설치하고 막상 기존의 시스템을 구성하고 있던 하드웨어들이 이를 지원하지 않는다면 그보다 난감할 수 없다. 사전에 각각의 하드웨어 제조사의 홈페이지에 들려 윈도우 10의 지원사항을 파악하자. 일반적인 시스템은 메인보드에 대부분의 시스템 구성요소가 포함되므로 이의 호환성을 우선적으로 확인해야 한다. 메인보드의 경우 드라이버뿐만 아니라 BIOS/UEFI의 업데이트 또한 지원하지는 꼼꼼히 살펴보도록 하자. 또한 프린터, 스캐너같은 의외의 주변기기에서 난관에 봉착할 수 있기 때문에 사용하는 주변기기들에 대한 호환성도 염두에 두어야한다. 제조사의 홈페이지에서 드..

윈도우즈/Windows 10 2016. 1. 8. 11:00

티스토리 댓글 및 방명록 디자인 유의사항

티스토리의 댓글 및 방명록을 디자인할때 겪을 수 있는 유의사항을 살펴봅니다. 댓글 및 방명록 스크립트 티스토리에서 댓글과 방명록 폼에 입력된 내용을 처리하는 스크립트는 아래와 같다. function addComment(caller, entryId) { var oForm = findFormObject(caller); if (!oForm) return false; var request = new HTTPRequest("POST", oForm.action); request.onSuccess = function () { if(entryId == 0) window.location = blogURL + "/guestbook"; else { document.getElementById("entry" + entryId ..

티스토리/스킨가이드 2016. 1. 5. 11:00

티스토리 카테고리 클래스 추가

티스토리 스킨의 카테고리 목록형 구조에 클래스명이 새로이 추가되었습니다. 카테고리 디자인을 위해 복잡한 CSS 선택자를 이용하거나 스크립트로 클래스를 추가해 사용해왔는데 조금은 수월해질 듯 싶습니다. 카테고리 목록의 구조 아래는 [샆샾_category_list_샾샾] 치환자를 이용할 경우 생성되는 구조이다. 샾샾 부분은 ##으로 교체 분류 전체보기 (글갯수) 카테고리명 (글갯수) 서브 카테고리명 (글갯수) 카테고리 목록의 시작엔 .tt_category 가 추가되었다 - 1행. 카테고리 목록의 최상위 목록엔 .link_tit 가 추가되었다 - 3행 카테고리 목록의 1차 카테고리의 시작엔 .category_list 가 추가되었다. - 4행 카테고리 목록의 1차 카테고리의 링크엔 .link_item 이 추가되..

티스토리/스킨가이드 2016. 1. 4. 11:00

CCZ-CROSS 패치노트

테스트가 부족했던 관계로 미흡한 부분이 발견되고 있으며, 이를 보완하고 패치내역을 공개하고 있습니다. 불편하시더라도 패치내역을 둘러 보시길 권합니다. 모든 패치내용을 반드시 수정할 필요는 없습니다. 패치내역을 살펴보시고 적용하길 원한다면 새 파일을 다운로드 하거나 직접 수정할 수 있도록 설명을 보태고 있습니다(오래된 패치내용 부터 최신순으로 수정하세요). [2016.01.24]] 패치 내용의 전달을 수월하게 진행하기 위해 GitHub의 변경이력을 살펴볼 수 있도록 변경되었습니다. 다음TV 팟이 카카오TV 서비스로 이전하면서 주소체계가 변경되면서 발생한 문제를 대처 크롬 브라우저 55 버전 스크롤 이벤트 버그 수정 신고기능 업데이트로 인한 날짜표기 오류수정 IE10 flexbox 스타일 제거 오탈자 수정 ..

티스토리/스킨배포 2015. 12. 29. 05:18

CCZ-CROSS 스킨 배포

티스토리의 관리자 페이지 업데이트 이후로 로그인/로그아웃이 정상작동하지 않는 경우에는 환경설정(블로그관리) > 꾸미기 - 설정에서 블로그 메뉴바를 표시합니다.로 설정을 변경해 주시길 바랍니다. CCZ-CROSS 스킨 소개 기존에 사용하고 있던 스킨에 대한 공유 요청이 있어 배포 가능한 형태로 재작업하여 배포하게 되었습니다. 개인적으로 구형 브라우저 및 기기들을 지원하는 마지막 작업 결과물인 동시에, 여러가지 쓸만한 아이디어를 조합한 시험작입니다. DEMO CCZ-CROSS 데모보기 REPO CCZ-CROSS GitHub PATCH CCZ-CROSS 패치노트 특징 클래식한 테마 다양한 기기 및 브라우저를 지원하는 반응형 디자인 옵션 값의 변경으로 일부 기능 ON/OFF 가능 글 작성시 도움이 될만한 서식 ..

티스토리/스킨배포 2015. 12. 26. 10:33

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

사운드클라우드의 오픈 API를 활용하여 썸네일을 추출하는 방법에 대하여 살펴봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 사운드클라우드 API Key 발급 사운드클라우드 썸네일을 추출하기 위해서는 API Key 발급이 필요하다. 사운드클라우드 API에 접속하여 사용할 애플리케이션에 맞는 키 발급을 받으면 된다. 이 글에서는 자바스크립트를 이용하니 Client-side JavaScript Applications 을 선택하도록 한다. 물론 사전에 사운드클라우드에 가입해두도록 하자. 그 동안 다른 멀티미디어 서비스들에서는 Key 발급 없이 대체 방안을 강구했지만 사운드클라우드에서는 방법을 찾지 못했다. Try out the Client-side a..

웹코딩/App,Plugin 2015. 12. 25. 20:25

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

데일리모션 동영상의 썸네일을 추출하는 방법에 대하여 살펴봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 데일리모션 동영상 VID 추출 아래와 같이 어딘가에 데일리모션 동영상이 삽입되었다고 가정하자. 대부분의 멀티미디어 서비스들은 고유의 ID값(VID)들로 영상들을 구분하고 각각의 정보를 분류하기에 이 VID 값을 추출하는 것이 필요하다. 데일리모션 동영상에 접근 삽입된 동영상 소스코드들(iframe) 중에서 데일리모션 동영상들이 가지는 특수한 문자열을 기준으로 정규표현식으로 걸러낸다. var vurl = $('iframe').attr('src').match(/dailymotion.com\/embed\/video\/([a-zA-Z0-9_]+)/i..

웹코딩/App,Plugin 2015. 12. 25. 17:53

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

다음 tv팟 동영상의 썸네일을 추출하는 방법을 살펴보며 유념해야 할 부분을 짚고 넘어갑니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 다음 tv팟 동영상 VID 추출 아래와 같이 어딘가에 다음 tv팟 동영상이 삽입되었다고 가정하자. 대부분의 멀티미디어 서비스들은 고유의 ID값(VID)들로 영상들을 구분하고 각각의 정보를 분류하기에 이 VID 값을 추출하는 것이 필요하다. 다음 tv팟 동영상에 접근 삽입된 동영상 소스코드들(iframe) 중에서 다음 tv팟 동영상들이 가지는 특수한 문자열을 기준으로 정규표현식으로 걸러낸다. var vurl = $('iframe').attr('src').match(/videofarm.daum.net\/controll..

웹코딩/App,Plugin 2015. 12. 25. 11:00

비메오 동영상 썸네일 추출

비메오 동영상의 공유소스를 기반으로 썸네일을 추출하는 방법에 대하여 살펴보며 크로스브라우징에 관련된 사항을 짚어봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 비메오 동영상 VID 추출 아래와 같이 어딘가에 비메오 동영상이 삽입되었다고 가정하자. 대부분의 멀티미디어 서비스들은 고유의 ID값(VID)들로 영상들을 구분하고 각각의 정보를 분류하기에 이 VID 값을 추출하는 것이 필요하다. 비메오 동영상에 접근 삽입된 동영상 소스코드들(iframe) 중에서 비메오 동영상들이 가지는 특수한 문자열을 기준으로 정규표현식으로 걸러낸다. var vurl = $('iframe').attr('src').match(/player.vimeo.com\/video\/..

웹코딩/App,Plugin 2015. 12. 11. 11:00

티스토리 첨부 파일 디자인

티스토리의 첨부 파일은 파일형식에 따라 각각의 아이콘 이미지가 함께 제공되는데 아래가 대표적인 예이다. 이대로 사용해도 큰 문제는 없지만 반응형 디자인을 지원하는 경우, 모바일의 뷰포트의 크기에 따라 글자와 아이콘 이미지가 정렬되지 않는 경우가 있을 수 있다. 이 경우 vertical-align: middle 이 지정되어 있는 정렬 값을 변경해보자. .imageblock > a[href*="attachment"] > img { vertical-align: text-bottom !important; } 이 이미지들을 모두 숨기고 하나의 아이콘으로 통일하고 버튼 형식으로 디자인을 변경해 볼 수 있겠다. .imageblock > a[href*="attachment"] { position: relative; d..

티스토리/스킨가이드 2015. 12. 8. 11:00

이미지 캡션(자막) 디자인

이미지 기본형 티스토리 이미지의 기본 형태는 아래와 같으면 자막이 작성되어 있는 경우에만 .cap1 구조가 등장한다. 자막 내용 간단히 스타일을 추가해보자. .cap1 { padding: 10px 5px; font-size: 12px; color: #999; text-align: center; } .cap1:before { display: inline-block; content: "▲"; padding-right: 5px; font-size: 13px; } 안쪽 자막 이미지를 감싸고 있는 태그에 .inner-cap 추가함으로써, 자막을 이미지 안쪽에 배치한다. .inner-cap .imageblock { position: relative; } .inner-cap .cap1 { position: absol..

티스토리/스킨가이드 2015. 12. 7. 11:00

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

이미지 요소나 비디오 요소를 특정 비율에 맞춰 확장 또는 축소되길 원할때 사용되는 기법에 대한 설명입니다. 스크립트의 사용없이 오직 CSS만을 이용하여 이를 구현해보며 원리의 이해를 돕습니다. 이미지 비율 유지 이미지의 비율을 유지하면서 크기 조정을 하는 방법은 이미지의 너비와 높이 둘 중 어느 하나를 auto 값을 유지한 채로 크기 조정을 하는 것이다. 흔히 반응형 이미지에 사용되는 방법은 아래와 같다. img { max-width: 100%; height: auto; } 반응형 이미지의 너비를 자유롭게 조정하기 위해서 이를 감싸는 컨테이너를 추가 해주고 적절한 너비를 부여하면 아래와 같다. .thumbnail-wrappper { width: 25%; } img { max-width: 100%; hei..

웹코딩/CSS 2015. 11. 26. 03:33

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

CSS를 이용하여 나 요소같은 오브젝트들을 비율을 유지한 채로 크기를 조정하는 것은 매우 까다로운 부분입니다. 오브젝트들이 출력될 공간이 유동적인 크기가 아닌 고정된 크기라면 더욱 골머리를 썩히게 됩니다. 이에 대응하는 CSS3 속성에 대하여 살펴봅니다. object-fit 속성 object-fit 속성은 대체되는 요소의 내용(, , , 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다. 이는 프로필 이미지나 고정된 크기의 썸네일을 출력하는 다양한 경우처럼 제각각의 크기를 가진 오브젝트등을 넘겨받아 비율을 유지한 채로 일정한 크기로 재가공하는 경우에 유용하다고 할 수 있다. CSS3의 background-size 속성과 매우 유사하다. object-fit 속성 값 속성값들의 변화를 살펴보..

웹코딩/CSS 2015. 11. 20. 11:00

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

티스토리 스킨에는 갤러리 형태의 카테고리(검색결과) 및 최신글의 이미지를 출력하는 치환자가 공개되지 않았습니다. 물론, 티스토리에서 제공하는 모바일 스킨에는 이를 지원하고 있으나 모바일 스킨은 공개되지 않았기에 일반 스킨 제작자들은 다른 방법을 필요로 합니다. 티스토리 썸네일 치환자 업데이트! 티스토리에서 공식적으로 썸네일 치환자가 업데이트 되었습니다. http://www.tistory.com/guide/skin/step3#2-8-7 Ajax를 이용한 이미지 추출 티스토리 스킨 제작자들은 위와 같은 어려움을 극복하기 위해 Ajax를 사용하여 페이지 전체를 가져오거나 RSS를 이용하여 이미지 추출을 구현하고 있다. 티스토리 Ajax 구현방식은 제작자마다 다를 수 있으나 크게 두가지로 구분된다. dataTy..

티스토리/스킨가이드 2015. 11. 3. 11:00