부트스트랩 Grid 이해하기....1
부트스트랩 빌더 작업하면서 제일 먼저 알아야 할 것이 Grid 시스템 이라는 넘인데.....
쉽게 이야기하면 레이아웃을 격자 형태로 짤라서 틀을 잡아주는 역활을 하는 시스템입니다.
그래서 반응형을 12컬럼 그리드 기반으로 만들어 졌다고 흔히들 말 합니다.
그리드 시스템만 잘 활용하면 레이아웃이 손폰이던,타블렛이던,PC에서든 알아서 최적 사이즈에 맞추어 반응을 합니다.
그리드 시스템 12컬럼에 대해서는 아래 이미지를 참조 하세요.
다음으로는 그리드 클래스에 대해 알아보겠습니다.
그리드 클래스에는 아래와 같은 너비사이즈를 결정하는 4가지가 있습니다.
xs (모바일에서 작동)
sm (타블렛에서 작동)
md (일반 모니터의 테스크 탑에서 작동)
lg (모니터가 큰 데스크탑에서 작동)
위에 설명한 너비 그리드 시스템에 각기 다른 컬럼을 포함 시킬수도 있고
.row를 추가하고 현재의 .span* 의 범위에 맞게 새로운 .span* 세트를 추가 할 수 있습니다.
반응형에는 고정비와 유동비 두가지 비율을 사용하는데
그중 유동비(Fluid)에서는 픽셀값 대신 퍼센트를 사용하고 고정비(Fixed)에서는 그리드 시스템과 같은 타입을 사용 합니다.
다음에는 그리드 시스템 사용법에 대해서 알아 보겠습니다.....^^
참고 사이트 : http://www.w3schools.com/bootstrap
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 8개
그래도 이렇게 활성화되는 것 같아서 좋네요.ㅎㅎ
전 이런거 몰라요....
찾아 들어가는 메뉴가 없네....ㅠㅠ
그래서 원상복구.....ㅎㅎ
부트스트랩 강좌는 어디에 올려야 할까요?