728x90
반응형
기초부터 시작하는 부트스트랩 강의 1
부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크입니다.
빠르게 프로토타입을 제작할 때 가장 적합한 프레임워크죠.
Javascript까지는 아니더라도 HTML5와 CSS3에 대한 기본 개념이 있으신 분이 이 강의를 보셨으면 좋겠습니다. 좋은 퍼포먼스를 내려면 적어도 기본적인 지식이 있어야 된다고 생각합니다.
HTML5 doctype
부트스트랩은 HTML5 doctype 의 사용을 필요로 하는 HTML 요소와 CSS 속성을 사용합니다.
모바일 우선
부트스트랩3은 모바일을 우선적으로 고려해서 개발이 되었습니다. 한마디로, 모바일은 부가적인 부분이 아닌 핵심적인 부분으로 만들어졌습니다. 모바일 우선 스타일은 전 독립된 파일들이 아닌 전 영역을 걸쳐 확인할 수 있습니다.
적절한 렌더링과 확대/축소를 위해, 당신의 <head> 에 viewport 메타태그를 추가하세요.
viewport 메타태그에 user-scalable=no 를 추가하여 모바일 기기에서 확대/축소 기능을 끌 수 있습니다. 확대/축소를 끈다는 것은, 사용자들이 오직 스크롤만 할 수 있음을 의미합니다. 이 방법은 웹사이트가 좀 더 네이티브 애플리케이션같이 느껴지게 해줍니다.
하지만, 전체적으로 봤을 때, 이 방법을 모든 웹사이트에 적용한다는 것은 비추합니다.
부트스트랩 CDN
다운받아서 사용하는 방법도 있지만, 저는 부트스트랩 CDN을 사용하는 것을 권장드리고 싶습니다.
기본 템플릿
기본 HTML 템플릿으로 시작하거나, 이 예제들을 수정하세요.
아래의 HTML 을 복사하여 최소의 부트스트랩 문서로 시작하세요.
부트스트랩 반응성 끄기
부트스트랩은 자동으로 다양한 화면 크기에 따라 당신의 페이지를 조정합니다. 이 기능을 어떻게 끌 수 있는 방법이 여기에 있습니다.
페이지 반응성을 끄는 순서
- 문서 내 CSS 에 명시된 뷰포트
<meta>를 제거합니다. .container의width를 하나의 너비로 각 그리드 단계를 위해 오버라이드 합니다. 예를 들어,width: 970px !important;. 이것은 기본 부트스트랩 CSS 다음에 와야 합니다. 당신은 부가적으로 미디어쿼리나 약간의 selector-fu 로!important를 피할 수 있습니다.- 만약 네비게이션 바를 사용하려면, 모든 네비게이션 바의 가리기와 보이기 행위를 제거해주세요.
- 그리드 레이아웃을 위해,
.col-xs-*클래스를 사용해주세요. 걱정하지 마세요, 매우 작은 기기 그리드는 모든 해상도에서 비례합니다.
728x90
반응형
그리드형
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
