[SSAC 3기] - 1주차-(2)

🎡Bootstrap

1. Bootstrap

   • 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다.
   • 웹사이트 개발시 디자인 떄문에 개발 시간이 길어지는 문제를 해결
   • 모바일 환경에 적합한 반응형 웹 사이트 개발을 위해 만들어짐.

2. 사용방법

   • https://getbootstrap.com/ 해당 사이트에 접속한다.
   • get Started 버튼 클릭
   • cdn타입으로 진행 ( Css, Bundle, Separate )을 html head안에 작성
   • 왼쪽 bar에서 필요한 부분을 클릭하여 해당 코드를 html body안에 작성

3. Components

   • Buttons
   • Progress
   • Collapse

4. Content

   • Tables

5. Utilities

   • Display
   • Flex
   • Position

6. Layout

   • Containers
   • Grid

📚과제

• Bootstrap의 5가지를 사용해서 실습 진행
• Navbar, Dropdown, Modal, Crousel, Card 사용하여
  코딩훈 웹페이지 제작완료
• 너무 귀엽귀염
  

👍<script></script> 의 위치

1. head 태그 내부
   • script 태그를 읽느라 body 내부의 UI는 script 태그를 읽은 후에 사용자에게 보여주게 되는데 작은 웹은 괜찮으나, script 파일이 너무 크고 무겁다면 HTML 파싱을 하다 만 화면을 사용자들에게 보여진다.
2. body 태그 맨 마지막
   • html을 다운받고 파싱을 마친후에 실행되기 때문에 페이지 콘텐츠를 빠르게 볼 수 있다.

💣삽질방지

1. 버전확인할것!

2. CDN or download 할지 확실히 할것!

3. CDN, v5.1로 진행할시 css, bundle.js 소스만 head 안에 넣을것!

   • 금일 기준 부트스트랩 v5.1 베타버전 이므로 지원 되지 않는 기능들이 있어서 과제 및 실습시 안정화된 전버전 v4.6.x으로 진행하였음

🐬수업후기

부트스트랩을 가져다가 css를 따로 입히는 정도만 사용했었는데,
수업을 통해서 css를 따로 입히는것도 부트스트랩이 있다는걸 알게 되었다. 그리고 다같이 실습하고 과제 제출하는 맛이 쫀득(?)하다.
css를 좀 공부하고싶은데 이번 주말은 다른 시험이 있어서 다음주 주말의 나야,, 고생 좀 해줘,,