본문 바로가기

2018/09

Javascript 없이 CSS 만으로 동작하는 이미지 슬라이더 자바스크립트 없이 CSS 만으로 동작하는 이미지 슬라이더 입니다. 이미지 갯수에 따라 조정해야하는 내용이 많아서 보통은 자바스크립트로 이미지 슬라이더를 이용하지만, 자바스크립트 없이 가볍게 돌려야 하거나, 자바스크립트에 익숙하지 않을 때 사용하면 유용합니다. 기본적인 CSS 문법 정도는 아는 분이면 커스터마이징을 할 수 있겠지만 아니면 아래 이미지 크기 변경 방법만 따라해서 이미지 크기 정도 조정해서 제공된 파일들을 그대로 복사해서..
마이크로소프트 올인원 미디어 터치키보드 사용기 정식 이름은 마이크로소프트 올인원 미디어 키보드 입니다.나온지 4년쯤 된 모델명도 이상하게 긴 제품입니다. 새로운 모델도 더 나오지 않고 있고 아는 사람들만 사는 그런 제품입니다.구입해서 한달이상 사용했습니다.2년전쯤에 로지텍에서 K400 PLUS라는 유사?한 터치키보드 상품이 나왔고, 아무래도 로지텍 브랜드 밸류가 더 있어서인지 로지텍 제품이 훨씬 더 많이 판매됩니다.애초에는 고민할 필요도 없이 K400 PLUS를 사려고..
반응형 1단 미니멀 심플 모노 스킨 배포 기본 아이콘으로 Font Awesome 을 사용해 사용된 아이콘들이 깨끗한 벡터 아이콘으로 표시됩니다. 컬러 사용을 최대한 줄여서 심플하고 미니멀한 블로그에 사용할 수 있도록 만든 스킨입니다. 1단 스킨으로 컨텐츠 가로 너비는 820px로 설정되어 있고, 전체 너비는 900px (좌, 우 40px 여백)에 맞춰져 있습니다. 반응형으로 모바일 및 브라우저 너비에 대응합니다. 사이드바는 상단에 정렬되어 배치됩니다. 4개단위로 켜서 사용하는 것을..
반응형 1단 오션 테마 스킨 배포 바다 서핑 테마를 주제로 만든 1단 반응형 스킨입니다. 배경색을 지중해색으로 맞춰서 시원한 느낌이 들도록 만들었습니다. 컨텐츠 가로 최대크기는 1260px 입니다. 가로 너비가 줄어들면서 레이아웃도 자동으로 맞춰서 줄어들도록 되어있습니다. 모바일 지원. 컨텐츠 가로 크기를 원하는 컨텐츠 에디터 크기 설정에 맞춰 줄이려면  CSS(style.css) 파일 내용에서  65라인: "width: 1176px" 를 "widt..
반응형 사이드바 타입 티스토리 스킨 배포 기본으로 제공되는 사이드바 반응형 티스토리 스킨을 커스터마징한 버전입니다. 기본 스킨에서 사용하는 비트맵 아이콘 이미지들을 대체해서 벡터 기반인 폰트어썸(Font Awesome)으로 아이콘을 변경했습니다. 기기별 해상도에와 무관하게 아이콘들이 깨끗하게 출력됩니다. 기본 글 목록의 썸네일 이미지 크기는 200px x 200px 입니다. 배경 jpg 이미지 외에 skin.html, style.css, script.js 파일 3개만으로 스킨이 구성됩..
검색엔진 등록용 티스토리 블로그 사이트맵 만들기 티스토리 블로그에 글을 쓰게되면 되면 다음 검색에는 자동으로 검색이 등록됩니다.그 외에 구글, 네이버, 빙 검색에는 별도로 검색 등록을 하지 않으면 아얘 노출이 되지 않게 됩니다.3가지 검색엔진 모두 사이트맵 파일을 업로드하는 방식으로 검색 색인(인덱스)를 생성하게 됩니다.생성된 사이트맵 XML 파일을 검색엔진 웹마스터도구나 서치콘솔에서 업로드를 해줘야 검색엔진에서 사이트맵 파일에 있는 링크 페이지들을 방문해 인덱스를 생성하게 됩니다.사이트..
반응형 기본 1단 티스토리 스킨 - 티스토리 기본 스킨 커스텀 - 배포 기본 설정으로 설정되는티스토리 기본 1단 스킨을 커스터마이징한 버전입니다. 현재 블로그팩 블로그에 적용되어 있는 스킨입니다. 기본 레이아웃은 기존 기본 스킨과 동일하고 티스토리 기본 스킨에 사용하는 이미지 아이콘을 대체해서 Font Awesome을 사용했습니다. 스킨 적용시 별도의 이미지 업로드 작업이 불필요 합니다. 기존의 각진 구성 요소들을 동글동글하게 다듬고 파스텔 톤 컬러를 입혀서 조금더 온화하고 부드러워 보이도록 변경했습니다. 기본 ..
부트스트랩 기반 반응형 티스토리 스킨 부트베이직1 배포 부트스트랩과 폰트어썸으로 만든 티스토리 스킨입니다.반응형 디자인으로 모바일 대응까지 잘 됩니다.마이크로소프트 엣지, IE 11에서도 잘 동작합니다.부트스트랩 기반 가변형 레이아웃이기 때문에 브라우저 너비에 따라 컨텐츠 및 사이드바 레이아웃 및 배치가 가변으로 변경됩니다.2단 레이아웃으로 우측에 사이드바 위젯이 위치합니다.메인 배경 이미지는 ./images/bg.jpg 파일을 덮어쓰면 변경할 수 있습니다.탑 네비게이션을 사용하지 않을 경우 skin.h..
해외 직구상품 배송 추적하기 아마존은 사이트 안에서 대부분 주문상품의 배송 추적이 가능해서 별문제가 없는데알리익스프레스나 이베이에서 직구를 하면 판매자가 입력한 트래킹 번호(Tracking Number)만 나오기 때문에 따로 배송 추적을 해야 어디쯤 오고 있는지 자세히 알 수 있습니다.특히 일반 우편으로 오는 경우 배송 기간 20일은 기본이기 때문에배송 추적을 해주는 사이트를 이용해서 어디쯤 오고 있는지 가끔 확인을 하면기다리는 지루함이 조금이나마 줄어듭니다...
event.keyCode 코드표 작업할 때마다 찾아보기 귀찮은 자바스크립트 코드 리스트입니다. 구글 검색하면 다 나오지만, 매번 찾으러 가기 귀찮으므로... 티스토리 반응형 UI 작업을 하게 되면 13(엔터키), 27(Esc) 키값 정도는 외워두면 좋습니다. KeyCodeKeyCodeKeyCode 백스페이스(←)8e69숫자패드 8104 탭(TAB)9f70숫자패드 9105 엔터(Enter)13g71숫자패드곱하기(*)106 쉬프트(SHIFT)16h72숫자패드더하기(+)107..