반응형 웹을 위한 부트스트랩 활용하기
반응형 웹을 만드는데 부트스트랩 (bootstrap)을 가장 많이 사용한다. 스타일시트(CSS)와 자바스크립트(Javascript)로 구성되어 있기 때문에 적용하기도 쉽다. 실시간 검색어를 이미지로 보여주는 웹화면을 다음과 같이 모바일 서비스를 위한 부트스트랩으로 구성해봤다. 부트스트랩 활용 부트스트랩 홈페이지에 가면 관련 설명들이 잘 되어 있다. 시작하기에 보면 Grunt라는 빌드시스템을 활용하기도 하지만, 개인적으로 사용해 보면 그냥 필요한 CSS를 포함해서 쓰는게 더 편한 것 같다. HTML의 태그 영역에 다음과 같이 스타일시트와 자바스크립트를 적용하면 부트스트랩을 쓸 수 있다. 위 예제처럼 스타일시트와 자바스크립트의 CDN URL을 적용해도 되고, 부트스트랩 시작하기에서 "Download Boot..
부트스트랩 슬라이더 만들기
웹과 모바일에서 입력창이 숫자일 때, 슬라이더 형태로 제공하는 방법을 정리해 보려고 한다. 부트스트랩을 이용한 오픈소스가 있어서 활용해봤다. 먼저 실행하는 결과를 살펴보려면 http://www.word.pe.kr/bootstrap/slider.html 에 접속하면 된다. 다음과 같은 화면이 나온다. 부트스트랩 슬라이더 소스 설명 소스에서는 bootstrap CSS와 JQuery를 기본으로 사용하고 있고, 별도의 bootstrap-slider css와 js 파일이 존재한다. 각각의 파일은 다음과 같다. 먼저 슬라이더로 입력할 부분과 결과를 출력할 부분의 HTML을 다음과 같이 구성한다. 최소값(data-slider-min), 최대값(data-slider-max)을 지정할 수 있고, 값의 이동 간격(data..