HTML
nav
( bootstrap - components-navbar)
main jumbotron
(bootstrap - component - jumbotron)
acodian
(bootstrap - javascript - collapese)
photo
(bootstrap - component -thumbnail)
footer
CSS
970px 이상
768px 이상 970px 미만
768px 미만
*고정된 상단바*
| <bootstrap> bootstrap 이용한 아주 간단한 반응형 레이아웃 (0) | 2017.07.21 |
|---|---|
| <bootstrap> bootstrap CSS grid System (0) | 2017.07.17 |
| <bootstrap> 부트스트랩 (bootstrap) 시작하기 (1) | 2017.07.17 |
HTML
CSS
970px 이상
768px 이상
768px 미만
| <bootstrap> bootstrap을 이용한 간단한 메인 페이지 (0) | 2017.07.21 |
|---|---|
| <bootstrap> bootstrap CSS grid System (0) | 2017.07.17 |
| <bootstrap> 부트스트랩 (bootstrap) 시작하기 (1) | 2017.07.17 |
1. overview
1) HTML5 doctype
<!DOCTYPE html>
<html lang="ko">
...
</html>
2) Mobile fist : 부트스트랩은 mobile first 프레임 워크이다. 따라서 다음의 viewport meta태그 사용 추천
<meta name="viewport" content="width=device-width, initial-scale=1">
* 이 메타태그로 zoom과 rendering 가능하게 함.
* user-scalable=no 추가시 유저가 zoom 못하고 스크롤만 할 수 있음
*viewport 속성
width: device-width : 기기의 너비에 너비를 맞추겠다
initial-scale : 1 : 처음의 크기는 100%
maximum-scale. minimum-scale : 가장큰 사이즈, 작은사이즈
user-scalable=no : 유저가 크기 바꾸지 못하게 한다.
ex) <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
3) 타이포그래피와 링크의 기본적 스타일
4) 크로스 브라우징은 nomalize.css 사용
5) .container
.container 클래스에 width : 1200px; 저장되어 있음
.container-fluid : 전체너비
★ 2. grid system ★
-bootstrap에는 반응형에 맞는 12컬럼까지 나눌 수 있는 fluid grid system이 있다.
-이것은 미리 정의된 class와 더욱더 semantic한 layout을 위한 mixin을 통해 이루어진다.
1) introduction
- row는적절한 배열과 padding을 위해 .container나 .container-fluid 안에 들어가야 한다.
- column의 수평을 위해 row를 사용한다
- content는 column안에 들어가야 하며, column만이 row의 직계자식이 될 수 있다
- 미리 정의된 .row 나 col-xs-4같은 class는 빠른 레이아웃을 만드는 것을 도와준다. Less mixin은 더욱 semantic한 layout을 만드는 것을 도와준다
- columns은 다른 column과의 사이에 간격 (padding)을 만든다. 첫번째 colum과 마지막 colum은 row의 nagative marign에 의해 상쇄된다.
- negative margin 은 내어쓰기가 되는 이유이다. 이것은 grid column내의 content가 grid가 아닌 콘텐트와 정렬되기 위함이다
- grid column은 12개까지 명시하는 만큼 만들어 진다. ex) 세 개의 column만들기 : .col-md-4
- column이 12가 넘는다면 새로운 행으로 내려가 감싸진다
- grid class는 분기점 크기 보다 크거나 같은 어비의 화면을 가진 기기에 적용된다.
2) media query
768보다 작은기기 (스마트폰)
768보다 큰 기기 (타블렛)
992보다 큰 기기 (보통 테스크탑)
1200px보다 큰 기기( 큰 데스크탑)
3) grid options
ex)
790px 이상의 화면에서
970 미만의 화면에서
ex) container-fluid 로 했을 때
화면 전체 차지
ex) col-md-n 이외의 사이즈를 넣으면 각 사이즈에서 내가 내가 설정한 레이아웃을 볼수 있다.
(col-sm-n을 넣어 768이상의 너비에서의 레이아웃을 설정했다 )
ex) column 수의 합이 12 이상일 때
줄이 바뀌고 row 에 의해 감싸진다
4) Responsive column resets
- 한 column만 내용이 길 경우 : clearfix class와 utility class(해당하는 사이즈의)
↓ clearfix와 utility class 추가 후
5) offsetting column
offset class : left margin을 줘서 오른쪽으로 옮길 수 있다
ex ) col-md-offset-4 는 col-md-4를 오른쪽으로 4 column 옮긴다.
6) Nesting colums (중첩)
: row 안에 새로운 row를 만들어서 사용할 수 있다. 안의 row는 다시 12column을 기본으로 한다.
( level1이 총 9이고 level2는 6+6 = 12임에도 불구하고 길이가 같다.
7) column ordering
.col-md-push-* 과 col-md-pull-*을 이용하여 순서를 바꿀 수 있다.
8) Less mixins and variables ...
| <bootstrap> bootstrap을 이용한 간단한 메인 페이지 (0) | 2017.07.21 |
|---|---|
| <bootstrap> bootstrap 이용한 아주 간단한 반응형 레이아웃 (0) | 2017.07.21 |
| <bootstrap> 부트스트랩 (bootstrap) 시작하기 (1) | 2017.07.17 |
부트스트랩 :
부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함한다.
[네이버 지식백과] 부트스트랩 [Bootstrap] (두산백과)
* 주로 반응형 웹이 많이 사용된다.
1. 설치
1) 홈페이지 접속
http://bootstrapk.com/
2) 시작하기
3) 다운로드
* CDN으로도 사용 가능하다 *
CDN : 콘텐츠를 임시 저장 서버에 옮겼다가 수요가 있을 때 콘텐츠를 사용자에게 전달하는 콘텐츠 전송 네트워크
( 저장 x )
웹 유저의 입장에서는 더 빠르게 사용할 수 있다. 웹 개발자의 입장에서는 다운로드보다 더 느리다( 다운로드는 컴퓨터 자체에서 불러오기 때문)
3) 원하는 폴더에 압축풀기
* 폴더안에는
css
js
fonts
폴더가 있다
4) 파일 정리
- css 폴더 안의 bootstrap.css or bootstrap.min.css (min이 압축버전) , bootstrap-theme.css or bootstrap-theme.min.css 를 편한 위치에 옮긴다.
* 나는 기존의 css 파일과 같은 폴더로 옮김
- js 폴더의 bootstrap.js or bootstrap.min.js 를 원하는 위치로 옮긴다
** 나머지는 내가 공부한 정도에선 아직 사용 x
5) head 처리
옮긴 파일들을 HTML 파일에 연결해주고, jquery를 CDN으로 연결
* bootstrap 사용하기 *
bootstrap 은 프레임 워크로 원하는 오픈소스를 찾아서 사용할 수 있다
- 상단의 카테고리를 통해 고를 수 있음
* components : 한 세트의 화면구성
ex) 버튼, 상단바, ..
- 카테고리 안에서도 오른쪽의 목록으로 원하는 것을 빠르게 찾을 수 있다
| <bootstrap> bootstrap을 이용한 간단한 메인 페이지 (0) | 2017.07.21 |
|---|---|
| <bootstrap> bootstrap 이용한 아주 간단한 반응형 레이아웃 (0) | 2017.07.21 |
| <bootstrap> bootstrap CSS grid System (0) | 2017.07.17 |
