0708 6회차

💡 Bootstrap

[0708

Bootstrap

toufulover33.notion.site](https://toufulover33.notion.site/0708-fda5b91fa7a349c4bfd93e114891ae01)

❓ Later

0706 실습3

• [ ] 구동가능하도록
• [ ] childElement 로 시도

---

JS → MDN

input창 read only

이벤트

$(선택자).on(”click”,function(obj){});

obj.currentTarget;

Bootstrap

• 웹사이트 쉽게 만들 수 있게 도와주는 공개 프레임워크라이브러리 : 특정 기능 (가구..)
• 프레임워크 : 틀, 구조 (바닥,기둥)
• 정해진 구조라 커스터마이징, 확장성 고려

🔗 https://getbootstrap.com/ - Doc - CDN links

반응형 웹

브라우저 크기에 맞춰 반응

Components

• Button
• Collapse (메뉴접고펴기)
• Navbar (메뉴바)

Utilities

• Background
• Colors
• Sizing
• Spacing
  • property: margin & padding
  • sides: t b s e x y
  • size: 0~5 auto
• Display
• Flex 정렬
  • Justify content 수평
    • start, end, center
    • between, around, evenly
  • Align items 수직
    • start, end, center
    • baseline, stretch

Layout

• Container

• 반응형으로 사용할 HTML요소들을 둘러싸는 기본 클래스

• Grid

• → 반응형 웹

• 테이블구조로 웹페이지 디자인

  • option: xs(폰) sm(타블렛) md(랩탑) lg(데스크탑~) xl xxl

  <div class="row">
    <div class="d-sm-block d-lg-none col bg-danger">1</div>
    <div class="d-sm-none d-md-block d-lg-none col bg-warning">2</div>
    <div class="d-sm-none d-lg-block col bg-success">3</div>
  </div>

  • row 클래스 - container, container-fluid 안에 있어야
  • col 클래스
    • 기본12개
    • col-lg-6 col-sm-3 큰 순서대로 표기

실습