2022-11-05 수업 Bootstrap

부트스트렙 

프레임워크 틀이 짜여있어서 개발 초보에게 편하다. 

웹 사이트를 쉽게 만들 수 있게 도와주는 공개 HTML

단점: 다른사람이 틀 잡아 놓은 것을 쓰는거기 때문에, 이미 만들어진 프레임워크를 바꾸고 추가하려면 복잡한 내용을 분석, 변경해야한다.

=> 원하는 구조로 바꾸는게 어렵다.

 

써보고 나에게 맞는 방향으로 할 것

 

프레임워크의 확장성

= 커스터마이징에 얼마나 용이, 편리한가 

에 따라서 좋다고 판단됨

온라인 상에 사람들이 올려둔 CDN을 가져와서 사용 할 것이다.

다운로드 하지 않아도 된다.

 

왼쪽에 레이아웃 .. 등 여러가지로 구분지어놔서 만드는 방법이 있다.

이것들을 복사 붙이기 해서 사용할 것

"btn btn-primary"

"btn btn-outline-primary"

btn은 부트스트렙, btn-의 무엇을 사용하겠다

이 처럼 다양한 만들어진 기능을 복붙해서 활용하면 된다.

 

반응형?

어느사이즈냐에 따라 최적의 레이아웃을 보여주는 것이 반응형 웹페이지

크기에따라 보이는 요소들과 안보이는 요소들, 요소들의 위치들까지 바뀌고 있다.

 

 

네이버는 반응형이 아니다

작아지면, 스크롤이 생김

 

부트스트렙은 이 반응형을 쉽게하기위해

그리드(grid)라는 개념이 있다.

12개라는 칸을 기본으로 가지고있다.

12칸이 넘어가면, 밑으로 내려간다.

 

tr, td처럼

row먼저 쓰고

그 밑에 col을 쓴다.

만약 3개의 col을 만들면, 4칸씩 가지고 있는 것

    <div class="row">
        <div class="col bg-warning">1</div>
        <div class="col bg-primary">2</div>
        <div class="col bg-success">3</div>
    </div>
    <hr>
    <div class="row">
        <div class="col bg-warning">1</div>
        <div class="col bg-primary">2</div>
        <div class="col bg-success">3</div>
        <div class="col bg-secondary">4</div>
    </div>
    <hr>
     <!-- co1-숫자 1:3:2 비율로 보여주겟다. -->
    <div class="row">
        <div class="col-2 bg-warning">1</div>
        <div class="col-6 bg-primary">2</div>
        <div class="col-4 bg-success">3</div>
    </div>
    <hr>
   <div class="row">
        <!-- 해당 브레이크 포인트에 맞춰서 12를 주기로 함 -->
        <!-- 기본적으로 2:1 이고 엠디 브레이크때 1:2로 바뀐다 lg포인트때 5:1 비율이 되는 것 -->
       <div class="col-8 col-md-4 col-lg-10 bg-warning">1</div>
       <div class="col-4 col-md-8 col-lg-2 bg-primary">2</div>
   </div>

브레이크 포인트 

필기 정리--------------------------------

 

 

실습1) 웹페이지 만들기

modal눌렀을때 새로운 것을 보여주는 것