티스토리 뷰

프로그래밍/Web

미니~ 2015. 6. 12. 09:51

반응형 웹을 만드는데 부트스트랩 (bootstrap)을 가장 많이 사용한다.

스타일시트(CSS)와 자바스크립트(Javascript)로 구성되어 있기 때문에 적용하기도 쉽다.

실시간 검색어를 이미지로 보여주는 웹화면을 다음과 같이 모바일 서비스를 위한 부트스트랩으로 구성해봤다.

부트스트랩 활용

부트스트랩 홈페이지에 가면 관련 설명들이 잘 되어 있다.

시작하기에 보면 Grunt라는 빌드시스템을 활용하기도 하지만, 개인적으로 사용해 보면 그냥 필요한 CSS를 포함해서 쓰는게 더 편한 것 같다.

HTML의 <head> 태그 영역에 다음과 같이 스타일시트와 자바스크립트를 적용하면 부트스트랩을 쓸 수 있다.

위 예제처럼 스타일시트와 자바스크립트의 CDN URL을 적용해도 되고,

부트스트랩 시작하기에서 "Download Bootstrap"으로 다음과 같은 파일을 받아서 사용할 수도 있다.

부트스트랩과 관련하여 자주 사용하는 사이트는 다음과 같다.

부트스트랩 컴포넌트 : 버튼, 패널, 라벨 등 다양한 컴포넌트 예제를 보여준다.

부트스트랩 테마 예제: 부트스트랩 컴포넌트와 일부 중복되기는 하지만 테이블 등 참고할 만한 부분이 있다.

부트스트랩 튜토리얼: w3schools에서 제공하는 부트스트랩 강좌 사이트로서 직접 테스트해볼 수 있는 기능까지 제공한다.

HighChart 그래프에서 로컬 시간대 설정~ (0)	2015.06.25
Sitemesh 활용시 하단의 자바스크립트 처리하기 (0)	2015.06.19
부트스트랩 슬라이더 만들기 (0)	2015.06.10
HighChart를 활용한 웹/모바일 호환 그래프 만들기~ (0)	2015.06.05
모바일 웹을 위한 브라우저 크기 및 기기 정보 체크하는 자바 스크립트 (0)	2015.06.03

공지사항

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함