*Udemy의 "The Complete Web Developer in 2019 : Zero To Mastery" 강의에서 학습한 내용을 정리한 포스팅입니다.
*https://soldonii.github.io에서 2019년 7월 7일(일)에 작성한 글을 티스토리로 옮겨온 포스팅입니다.
*자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :)
1. 부트스트랩이란?
Bootstrap은 CSS를 기초(scratch)부터 작성하지 않고, 편리하게 사용할 수 있는 기초를 제공해주는 CSS library이다. CDN(Content Delivering Network, 즉 link를 복사해서 HTML 파일에 붙여넣는 방식)을 활용하면 bootstrap 사이트에서 필요한 도구를 불러와서 사용할 수 있다.
link를 붙여넣을 시, Javascript 관련 CDN은 <body> tag의 맨 끝에다 붙여 넣어야 한다. website 로딩이 다 끝난 이후 Bootstrap을 loading해야 website의 속도 저하가 발생하지 않기 때문이다.
2. 부트스트랩의 그리드 시스템(Bootstrap Grid)
Bootstarp은 Grid System에 대해서도 미리 설정된 solution을 제공한다.
Bootstrap Grid System에서 column은 12줄로 되어있다. 구현하고자 하는 grid의 숫자가 12를 넘어갈 경우, 알아서 다음 row 넘어가도록 되어 있다.
<div class="container">
<div class="row">
<div class="col col-sm-6 col-md-12 col-lg-12">
One of three columns
</div>
<div class="col col-sm-4 col-md-6 col-lg-12">
One of three columns
</div>
<div class="col col-sm-2 col-md-6 col-lg-12">
One of three columns
</div>
</div>
</div>
# 밑바닥 부터 만들 필요 없다!
무언가를 밑바닥부터 만드는 경우는 흔치 않고, 그렇게 할 필요도 없다. 누군가가 만들어 놓은 기초 위에서 작업을 하게 될 것이고, Bootstrap과 아래 제시될 사이트들은 그런 탄탄한 기초를 제공해주고 있다.
'Javascript 공부 > Zero To Mastery(-)' 카테고리의 다른 글
| (9) DOM 조작 (0) | 2019.08.27 |
|---|---|
| (8) 자바스크립트 기초 - 변수, 함수, 자료구조, 반복문 (0) | 2019.08.27 |
| (6) CSS3 심화 문법 (0) | 2019.08.27 |
| (5) CSS3 기본 문법 (0) | 2019.08.27 |
| (4) HTML5 심화 문법 (0) | 2019.08.27 |
댓글