개발새발로그

jQuery UI의 자동 완성 (autocomplete) jQuery UI 자동 완성 기능은 이렇게 쓴다. $("#inputAutocomplete").autocomplete({ source: "/YOUR/SEARCH/URL", minLength: 2, }); 구체적인 사용법은 공식 문서를 참조하자. source에는 직접 배열 자료를 넣어줄 수도 있고, 위 예제처럼 input 값을 받는 요청(request) 주소를 줄 수도 있다. source가 주소일 경우, jQuery UI는 자동으로 GET 요청을 term 매개변수로 값을 실어 보낸다. DB에서 직접 찾거나, Elasticsearch 같은 검색 엔진을 사용해서 서버에서 처리해서 보내주게 하겠지? 그리고 minLength가 2이므로 최소 2 글자를 입력해..

지금 이 블로그에 쓰이고 있는 bootstrap 기반의 티스토리 스킨입니다.다운로드: https://github.com/dgkim5360/oreo세부적인 디자인을 변경하고, 아이콘 로딩으로 인한 느린 속도를 개선했습니다. 또한 지금 이 블로그에 달려있는 광고 칸을 쓸 수 있도록 했습니다. 사용한 외부 자원들Font Awesome을 제거하고, Bootstrap이 기본으로 제공하는 glyphicon으로 대체했습니다.jQueryBootstrap변경 사항파일 폴더 구조를 바꿨습니다. image 폴더를 제거하고, oreo 폴더에 모든 파일을 넣었습니다. oreo 폴더에 있는 것만 모두 긁어서 업로드하시면 됩니다. 또한 직접 편집해서 쓰실 분들을 위해 verbose 폴더에 최소화(minify)하지 않은 파일들을 따..

처음으로 티스토리 스킨을 만들면서 내가 생각한 컨셉이나 개발 과정 등에 대해 이야기하고자 한다. 시작하기 전에는 "기본적인 front-end 코딩만 잘하면 쉽지 않을까" 라고 생각했었는데, 티스토리의 시스템(치환자)에 맞춰야 해서 마냥 쉽게 되진 않았다. 결국 티스토리의 치환자 페이지를 정독하면서 나름 스터디를 한 셈이 되어서, 여기서 그 정리를 하는 것이 목적이다.관련 링크 스킨 소개글 스킨 다운로드 0. 개발 동기 블로그를 처음 만들 때부터 적용되어있던 티스토리 스킨 "#1"의 첫 인상은 나에게 꽤 좋았었다. 기술적인 이야기를 담는 내 블로그에겐 "예쁜 것들"이 크게 필요하지 않았고 코드와 내용의 가독성을 높일 수 있는 깔끔함이 중요했기 때문이다. 티스토리가 기본으로 제공하는 여러 스킨들도 구경해봤지..

Oreo 스킨이 업데이트 되었습니다.최신 버젼으로 사용해보세요 :> Oreo 0.2 살펴보기 자급자족하기 위해 제작한 티스토리 스킨을 Oreo라는 이름으로 공유하고자 합니다. 지금 이 블로그에 적용된 스킨입니다. Bootstrap 기반에서 큰 수정 없이 최대한 단순하게 만들었고, 색상 테마도 무난한 흰검입니다. 마음에 무채색처럼 메마르신 분들이 좋아하실 듯 합니다. (사실 bootstrap 테마 설정만 알아서 할 수 있다면 원하는 색의 테마로 얼마든지 적용 가능합니다. 도움이 필요하시면 댓글로 문의해주세요.) 이 스킨의 가장 큰 특징은 좁은 화면입니다. 화면이 넓어져봤자 가독성이 떨어지기만 한다는 생각을 바탕으로 데스크탑 화면을 패드 넓이에 맞춰서 기본적인 화면의 폭을 좁게 만들었고(750픽셀) 단순한 ..

Bootstrap은 container 클래스를 통해서 스크린 크기에 따른 화면의 폭의 한계를 자동으로 조절한다. 실제로 container 클래스가 어떻게 정의되어 있는지 살펴보자..container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }@media (min-width: 768px) { .container { width: 750px; } }@media (min-width: 992px) { .container { width: 970px; } }@media (min-width: 1200px) { .container { width: 1170px; } } @media (min-width: xxx) 를 통..

Bootstrap의 자바스크립트 기능 중 하나인 modal 사용법을 간단하게 소개하고 CSS 클래스 조정을 통해 화면 가득 찬 modal과 화면 정중앙에 위치한 modal을 만들어본다. 1. Bootstrap modal의 기본적인 활용방법 공식 문서를 참조하면 금방 이해할 수 있다. 기본적으로 별도의 자바스크립트 없이 HTML5의 특성인 data- 속성을 이용하면 modal이 구현된다. 구동하고자 하는 버튼이나 링크에 data-toggle="modal"을 부여하면 modal을 띄울 준비가 되고 data-target="DOM선택자"를 입력하면 지정된 내용을 modal로 띄울 수 있다. 아래의 HTML코드는 공식 문서의 예제를 가져온 것이다. Modal 띄우기 × Modal 제목 Modal 내용 닫기 Boo..