profile Archive Of Records keep studying

Bootstrap (1) 기초

» Bootstrap

부트스트랩 (Bootstrap)

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsible, mobile first projects on the web.”

부트스트랩은 반응형이며 모바일 우선인 웹 프로젝트 개발을 위한 가장 인기 있는 HTML, CSS, JS 프레임워크입니다.”




프레임워크(Framework)란?

  • 프로그래밍에서 특정 운영 체제를 위한 응용 프로그램 표준 구조를 구현하는 Class와 라이브러리 모임 (웹 개발을 위한 컴포넌트 제공)
  • 목적에 따라 효율적으로 구조를 짜놓는 개발 방식
  • 쉽게 이야기하여 어떤 프로그램을 만들기 위한 기본 틀


라이브러리(Library)란?

  • 재사용이 가능한 필요 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것
  • 쉽게 이야기하여 프로그램 제작 시 필요한 기능


프레임워크 vs 라이브러리

  • 둘의 차이는 제어 흐름에 대한 주도성이 누구 혹은 어디에 있는지
    • 프레임워크: 주도성을 스스로 가지고 있고 사용자는 그 안에 필요한 코드를 입력함
      • 틀 안에 이미 제어 흐름에 대한 주도성 가짐 (가져다가 쓴다기보다 거기에 들어가서 사용한다는 느낌으로 접근)
    • 라이브러리: 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 씀
      • 가져다가 사용하고 호출하는 측에 전적으로 주도성 가짐




부트스트랩이란?

  • 트위터 웹 디자이너와 개발자가 만든 오픈형 UI 프레임워크
  • 동적인 웹사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크
  • 입력창, 버튼, 내비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함
    • 부트스트랩과 함께 보통의 HTML 요소들, 맞춤형 HTML과 CSS 컴포넌트들 그리고 jQuery 플러그인들을 응용하여 광범위하고 다양한 문서 생성 가능
    • 부트스트랩을 사용하면 미리 Class가 정해진 CSS 스타일시트로 인해 마크업 할 때 정해진 Class를 쓰는 것만으로도 자동으로 디자인됨
  • 부트스트랩이 주는 편리함의 목적은 사용자가 보는 디자인과 동작 구현 방식을 보다 빠르게 구현해 주는 데에 있음 (UI)
    • 편리하고 빠르게 레이아웃을 구성하고 다양한 인터페이스를 사용할 수 있음


  • 웹사이트와 애플리케이션을 단일 코드 베이스로 CSS 미디어쿼리를 이용하여 휴대 전화부터 태블릿, 데스크탑까지 쉽고 효과적으로 크기를 조절함 (브라우저 호환 가능)
  • 프론트엔드 웹 개발을 더 빠르고 쉽게 만들어 줌
    • 모든 기술 수준의 사람들, 모든 형태의 기기들, 모든 크기의 프로젝트들을 위해 편리성을 주고자 만들어짐 (사용하기 쉬움)