[Bootstrap] Day5

[작성일: 2023. 02. 16]

 

반응형 레이아웃(Responsible Layout)

• 웹의 레이아웃을 만들 때 사용자의 해상도를 고려
• 스마트폰이나 태블릿 등은 화면이 작기 때문에 가독성이 중요함.
• 이러한 문제를 해결하고자 하는 방법 중 하나로 해상도에 따라 가로폭이나 배치를 변경함.
• @media 키워드로 반영형 레이아웃이 가능함.

@media ( max-width: 768px) {
	body { color : red; }

 

 

 

 

 

부트스트랩(Bootstrap)

• 세계에서 인기있는 모바일 우선형/반응형 Front-End Framework
• 프레임워크(Framework)
  • 패키지: 소스 + 디렉토리
  • 라이브러리: 여러 개의 패키지
  • 프레임워크가 제공하는 공간에 라이브러리들을 넣을 수 있음.
• 가장 빈번하게 사용되는 CSS, js를 미리 만들어두고 CDN 방식이나 다운로드 방식으로 사용하도록 함.

 

 

 

설치방법

1. getbootstrap.com에서 다운로드 후 압축해제
2. CSS에서 링크해서 사용하기

Bootstrap

 

 

 

탄생 배경

• 트위터 프로젝트에서 시작함.
• 서로 다른 인터페이스를 사용한 여러 개발자의 공동 작업
• 디자인 불일치, 관리 난이도, 코드의 방대함으로 일관성 있는 관리가 불가능했음.
• 트위터 개발자와 UI 디자이너가 최초로 개발
• 2014년 6월 깃허브 프로젝트

 

 

 

부트스트랩

• Front-End 개발을 빠르고 쉽게 할 수 있는 프레임워크
• HTML, CSS 기반의 템플릿 양식, 버튼, 내비게이션 및 기타 요소 포함
• 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS, js로 구현
• 프레임워크이기 때문에 jQuery 사용가능
• 상업적 이용 가능
• 모바일, PC, 태블릿 디자인 지원
• 검색엔진에서 bootstrap template으로 검색하면 엄청난 양의 자료 검색할 수 있음.

 

 

 

Container

• 화면 구성 요소들을 묶기 위한 것
• container
  • 반응형으로 동작, 고정 폭을 가지고 있음.
  • width 설정과 margin 설정을 통해 container와 브라우저 윈도우 사이의 여백이 조정됨.
• container-fluid
  • viewport 전체 폭을 차지함.

 

 

 

From & Component

• HTML의 기본 컴포넌트를 고도화 한 것
• 외워서 치지 말기!

 

 

 

Grid

• 테이블과 유사하게 화면을 분할하여 레이아웃을 설정하기 위한 것
• 기본적으로 12개의 컬럼, 5개의 Grid 옵션이 있음.

.col-xs-  : extra small ( < 567px; )
.col-sm-  : small ( >= 576px;)
.col-md-  : medium ( >= 768px; )
.col-lg-  : large ( >= 992px; )
.col-xl-  : extra large ( >= 1200px; )

col-sm-2 : sm 사이즈의 2컬럼 크기

 

 

 

 

 

 

 

 

 

 

---

🐣 해당 게시글은 입문 개발자가 요약/정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.