부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기-1

기존에 배운 프로그래밍이 올드하다고 느껴져서 인프런에서 강의를 수강하기로 했다. 

게다가 웹에 올리는 방식이 무슨 이유인지 내 컴퓨터에서 안 돌아가서 다른 방법을 강구하는 중.

VS C외에 다른 프로그램도 배워 보고 싶다.

 

부트스트랩이란?

BootStrap, BS= 웹 프론트엔드 개발 프레임워크 

 

"트위터 부트스트랩은 웹디자인을 쉽게하기 위해서 CSS의 클래스 선택자에 정의된 스타일시트와 자바스크립트 플러그인의 라이브러리입니다."

CSS vs BS

CSS: cascading style sheet

<style>속성을 직접 작성. 하드코딩

BS

미리 정의 된 <style>을 'class' 로 적용.

태그 선택자 : 스타일을 바꾸는 태그명

참고사이트

https://getbootstrap.com/

http://www.bootstrap.com/ (현재 미운영중)

<<페이지 3회독하기>> 목표

CDN (contents delivery network): 컨텐츠를 다운 받지 않고 웹상의 링크를 이용하는 방식

min : minified

각 색상이 가지고 있는 코드 : 헥사코드

 

부트스트랩의 구성 요소는 CSS,GRID SYSTEM,COMPONUNT,JAVASCRIPT 라이브러리 이다.

GRID SYSTEM

"반응형, 유동성 레이아웃을 지원하는 구역 분할 시스템(총12분할)"

 

선택자 : id,class,tag...

 

동적인 요소를 만들수 있는 자바스크립트 플러그인을 활용한다.

 

BS적용 할 때, CSS가 아니라 HTML에 git을 적용할것.

그리드 시스템은 한 요소가 차지가 크기를 해상도별로 따로 지정해 줄 수 있는데 그리드 시스템의 클래스명은

 .colg-lg, .col-md-, col-sm, .com-xs- 이다.

col= colum : 행

참고 사이트

http://bootstrapk.com/css/#grid

http://bootsrapk.com/components 

JAVASCRIPT

"Modal, Dropdown, Tab Dropdown, Carouseul등 자주 사용되는 자바 스트립트 요소들을 미리구성하여 만들어 놓음"

참고사이트

http://bootstrapl.com/javascript