반응형

Programming/Front-end 8

Bootstrap modal 위에서 jQuery UI autocomplete 사용

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

iframe 높이 100% 맞추기

요즘 매일 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..

효과적인 코드 시각화, highlight.js

웹에서 코드를 예쁘게 보여주는 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') 코더들은 항상 정석적인 것을 좋아하지 않는가? 위의 코드..

MathJax: 웹에서 Latex 수식을 쓰자

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

c3.js 여러 종류의 차트 사용법

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

Bootstrap 기반 티스토리 스킨: 첫 작업 기록

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

Bootstrap container 폭 넓이 조정

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 사이즈 및 위치 조절

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