웹사이트 제작을 하시거나, 관심이 있으신 분들은 한번쯤 들어 봤던 부트스트랩(Bootstrap)에 대해 들어 보셨을 겁니다.
기존의 웹사이트를 제작 하시기에 예전에는 html, css 를 통해 직접 날코딩을 해야 합니다.
트위터 에서 개발된 부트스트랩(bootstrap)은 번거로운 html, css 의 날코딩을 줄여주기 위해 태어 났습니다.
일종의 웹제작을 쉽게 할 수 있도록 만들어진 프레임 워크 하고 보시면 됩니다.
부트스트랩의 장점
- 다양한 라이브러리를 포함하여, 사용하기 위한 아이템의 소스를 가져다 쓰면 됩니다.
- 모바일 기준의 UI 프레임워크로 만들어져, 다양한 플랫폼에 최적화 된 사이트를 만들기 쉽습니다.
- 반응형 웹 사이트에 대해 모르는 사람들도 반응형 웹을 만들 수 있을 만큼 사용하기 쉽습니다.
위 내용 처럼 부트스트랩(bootstrap)을 쉽게 사용 할 수 있는것이 포인트 입니다.
그렇지만, html, css 를 아예 모르면 아무리 쉽게 접근 할 수 있다고 해도, 웹 제작에 대한 기본은 알아야 가능 합니다.
부트스트랩에서 모바일에 최적화 되도록 하는 코드가 있는데, 이를 뷰포트 메타태그 (viewport) 라고 합니다.
사용 방법은 아래 코드와 같습니다.
<meta name="viewport" content="width-device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
위 코드와 미디어쿼리를 사용 하면, 모바일웹에 최적화 된 사이트를 제작 할 수 있습니다.
부트스트랩을 사용한 사이트들도 많이 있습니다.
(이미지 출저 : shapebootstrap.net 테마 디자인)
기본의 프레임워크를 사용해서 위 사이트테마들 처럼 디자인을 할 수 있답니다.
'이전 작업 아카이브' 카테고리의 다른 글
| 맥OSX 에서 포토샵CS6 크랙설치 하기 (85) | 2017.01.13 |
|---|---|
| 티스토리스킨 WN-SKIN3 (127) | 2016.12.19 |
| 29um58 모니터 맥북에어 에서 사용하기. (6) | 2016.12.09 |
| 듀얼모니터는 이제 굿바이~ LG 29um58 모니터 리뷰 (0) | 2016.12.06 |
| 웹제작에 필요한 것들 (0) | 2016.12.06 |
