나는 개발자고 tool을 만들어야 하는데 design을 못하니까. 관련 framework가 있는지 검색해 보았다.
아래 글에서 보면 몇 가지를 추천해 주는데 아는 차장님이 쓰셨던 bootstrap을 사용하기로 했잖아...
http://mashable.com/2013/04/26/css-boilerplates-frameworks/
이걸 사용하기로 한 이유
1. 보니까 사용하기 쉽다.
2. 기기별 responsive 웹 지원 (기기별 화면에 맞는 레이아웃 지원)
3. UI가 이쁘고 사용할만한 components도 많다.
다운로드와 설치
getting started 페이지에 가보면 다운로드 소스가 있다.
compiled된 것이 있고 source가 있는데 source를 받아보면 example page등이 들어있다.
경험상 이런 example page를 들여다보는게 문서 읽는 것 보다는 훨씬 빠르다.
다운로드를 받으면 아래와 같은 형태의 디렉토리를 볼 수 있다.
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── img/ ├── glyphicons-halflings.png └── glyphicons-halflings-white.png
또 다음과 같이 html을 만들어서 jquery와 bootstrap을 load하면 준비는 끝난다.
- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap 101 Template</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- Bootstrap -->
- <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
- </head>
- <body>
- <h1>Hello, world!</h1>
- <script src="http://code.jquery.com/jquery.js"></script>
- <script src="js/bootstrap.min.js"></script>
- </body>
- </html>
위에서 head 안의 meta tag와 link tag는 반응형 css를 켜기 위해 추가한다. 이 tag를 추가하면 기기마다의 화면에 최적화 해준다.
그리드 시스템과 레이아웃 구성
bootstrap은 12 컬럼 그리드 시스템을 지원한다.
http://getbootstrap.com/2.3.2/scaffolding.html
아래와 같이 간단하게 row와 span[NUMBER]를 사용해서 그리드 구성이 가능하다.
하나의 행에 4개 크기의 element와 8개 크기의 div element를 생성하는 html이다.
또 아래와 같이 offetset을 사용할 수도 있다.
맨위의 row에 4크기의 div와 2크기를 건너 뛴 3크기의 div를 만든 예제이다.
더 자세한 것은 위의 링크에서 살펴보면되고 나는 레이아웃에 관심이 있으니 레이아웃을 만드는 예제를 소개한다.
위와 같이 하면 정해진 크기의 컨테이너를 마련해 준다. 위에서 하늘색 부분이 생성된 div
레이아웃을 추가로 나누기 위해서는 위와 같이 그리드 시스템을 사용해서 나누면 된다.
fluid는 span 비율에 대해서 퍼센트로 계산하는 것으로 알고 있다.
컴포넌트 사용
버튼, 드랍다운 메뉴, 네비게이션 등에 대한 설명은 아래에 나와 있다.
http://getbootstrap.com/2.3.2/components.html
아래와 같이 간단한 html 추가로 tab을 구현한 모습이다.
자바스크립트 사용
더 동적인 메뉴들을 이용하기 위해서는 아래 링크를 참조한다.
http://getbootstrap.com/2.3.2/javascript.html
여기서는 모달이나 툴팁 등 동적인 기능들에 대해서 소개해준다.
아무튼 이 정도면 소개가 끗
'Web > UI' 카테고리의 다른 글
| CSS와 Javascript로 Dom에서 node 위치 변경하기 (0) | 2012.03.12 |
|---|---|
| 웹사이트 글자 디자인 이미지 만들기 (로고 만들기) (0) | 2011.09.17 |
| css 예제들, css examples (0) | 2011.04.28 |
| 팔레트 color picker (0) | 2011.04.28 |
| Font 글씨체 (0) | 2011.04.27 |
