Bootstrap 3

03. [Bootstrap] 그리드 시스템

그리드 시스템 부트스트랩은 기기나 뷰포트 크기가 증가함에 따라 12열이 적절하게 확대되는 반응형 모바일 우선 유동 그리드 시스템입니다. 그리드 시스템은 콘텐츠를 보관할 행과 열 시리즈를 통해 페이지 레이아웃을 만드는데 사용되어 집니다. 행은 반드시 적절한 정렬과 패딩을 위해서 .container(fixed-width)나 .container-fluid(full-width) 안에 위치해야 합니다. 열들은 수평 그룹을 만드는데 행을 이용하세요. 콘텐츠는 열안에 위치해야 합니다. 그리고 열들만이 행의 바로 아래에 올 수 있습니다. 그리드 열은 12개의 가능한 열들을 원하는 만큼 명시하는 것으로 만들어집니다. 만약 한행에 12열보다 더 많이 배치된다면, 남은 열들은 하나의 유닛으로 새로운 라인에 감싸집니다. 예제..

Bootstrap 2021.10.08

02. [Bootstrap] 모바일 우선 & 콘테이너

모바일 우선 부트스트랩 2에서 우리는 모바일 친화적인 스타일을 프레임워크의 중요한 부분으로 추가했었습니다. 부트스트랩 3 에서는 시작부터 모바일 친화적으로 다시 만들었습니다. 모바일은 부가적인 부분이 아닌 핵심적인 부분으로 만들어졌습니다. 말하자면, 부트스트랩은 모바일 우선입니다. 모바일 우선 스타일은 전 독립된 파일들이 아닌 전 영역을 걸쳐 확인할 수 있습니다. 적절한 렌더링과 확대/축소를 위해, 당신의 container ... 뷰포트 전체폭까지 늘어나는 콘테이너 container-fluid ...

Bootstrap 2021.10.08

01. [Bootstrap] 기본 사용법

Bootstrap이란? 부트스트랩은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것이다. 웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적은 반응을 얻는 프레임워크이다. '프레임워크'라고 하는 것은 재사용이 가능한 요소들의 집합되어 있으며, 정해진 구조와 틀 안에서 이것들이 확장이 가능한 기반 코드로 이루어 짐을 뜻한다. jquery는 라이브러리이고, 부트스트랩은 프레임워크다. 따라서, 우리는 '부트스트랩 프레임워크에서 jquery 라이브러리를 사용할 수 있다.'라고 말할 수 있다. Bootstrap 개발 목적 트위터에는 수많은 직원들이 각자가 맡은 부분의 프론트엔드 개발을 진행하기 때문에, 위와 같은 일관성 유지에 ..

Bootstrap 2021.10.08