개발새발로그

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 글자를 입력해..

요즘 매일 NBA 포스팅만 하다보니 스스로 좀 민망하기도 해서 iframe 관련 간단한 포스팅을 하려 한다.iframe은 다음과 같이 쓴다. height="200px" 대신 height="100%" 이 필요할 경우가 있다. 하지만 이는 제대로 적용되지 않는다. 이를 해결하기 위해서는 css style을 다음과 같이 주면 된다. vw는 view-port width, 마찬가지로 vh는 view-port height를 의미하는 단위로, 사용자가 보는 스크린을 100 기준으로 재는 단위이다. 아래는 iframe에 다른 스타일도 적용한 예이다. .iframe100 { display: block; border: none; height: 100vh; width: 100vw; } 참조 링크http://stackover..

웹에서 코드를 예쁘게 보여주는 javascript 라이브러리 highlight.js를 소개한다. 사용법은 어렵지 않아 짧은 글이 될 것이다.티스토리 블로그를 쓰면서 조금 불편했던 부분이 WYSIWYG (What You See Is What You Get) 에디터였다. 특히 코드를 입력하고자 할 때가 문제이다. 티스토리에서 제공하는 에디터는 정석적인 코드 포맷팅을 제공하지 않아서 그동안 나는 글상자를 만들고 거기에 Courier New 글씨체를 일일이 적용해서 썼었다.# 그동안 써왔던 코드 박스$ source .venv/bin/activate (.venv) $ pip install ipython# IPYTHON > print('GOOD NIGHT') 코더들은 항상 정석적인 것을 좋아하지 않는가? 위의 코드..

웹화면에서 수식을 Latex 코드로 입력할 수 있는 javascript 패키지, MathJax를 간단하게 소개한다. MathJax는 자체 CDN을 제공하므로 이를 이용하는 것이 편리할 것이다. 가장 기본적인 세팅으로 다음과 같이 javascript 코드를 추가한다. 위 비동기 javascript 코드는 어느 위치에나 넣어도 잘 작동하는 것으로 예상된다. 부분에 넣으면 당연히 잘 될 것이고, 내가 가장 끝 부분에 넣어서 사용하고 있는데 잘 작동하기 때문이다. 그러고 나서는 본분에 MathJax가 알려주는 식별자를 통해 수식을 넣을 수 있다. 이미 Latex를 통해 수식을 많이 써왔다면 MathJax 사용에 큰 어려움은 없을 것이다. 기본 세팅에서 식별자는 두 가지가 있다. (실제로 식별자를 넣어버리면 안보..

c3.js의 사용법을 정리하려 한다. c3라는 이름에서 유추할 수 있듯이, d3.js의 복잡한 데이터 시각화를 조금 더 쉽게 사용할 수 있도록 어느 정도 모듈을 감싸 놓은 d3 기반의 라이브러리이다. d3.js에서는 레이아웃, 즉 그래프의 종류에 따라 코드가 많이 달라져야 하기 때문에 그 때마다 어느 정도의 학습이 필요하다. 하지만 c3.js가 그런 그래프 종류들을 편하게 사용할 수 있게 해서, 우리는 c3에 데이터만 던져주고 어떤 종류의 그래프를 그릴 것인지 알려주면 된다. c3js.org 공식 사이트에서 다양한 예제를 볼 수 있지만, 그 예제가 너무 단순해서 내가 원하는 그래프를 만들 수 있도록 도와주지는 못했다. 여기서는 c3.js의 기본적인 예제를 살펴보고, 약간의 팁도 같이 정리하려 한다. 0...

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

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..