Bootstrap, Templates (2021-02-06)

- 웹개발을 배우기 위해 Udemy에서 the-complete-web-developer-zero-to-mastery를 수강한 내용을 정리하는 포스팅입니다. 

- 틀린점이있거나 다른 의견이 있으시다면 언제든지 댓글로 남겨주시면 감사하겠습니다 :)

---

Bootstrap

부트스트랩은 기존에 작성되어 편하게 쓸수있는 CSS나 JS 템플릿으로 생각할 수 있다. 

부트스트랩을 HTML에 추가하려면 직접 js 파일과 css파일을 다운받아서 쓸수도 있지만 공식에서 CDN(content's delivery netwrok)를 제공하기 때문에 아래와 같이 링크만 포함시켜줘도 사용이 가능하다. 

JS 는 body의 맨 마지막부분에 추가하는것이 관습이다. -> 왜냐하면 body에 존재하는 컨텐츠를 먼저 브라우저가 로딩해서 화면에 보여주고 마지막에 자바스크립트 파일을 다운받는 편이 사용자가 빠르게 화면을 볼수있기 때문이다.

부트스트랩을 이용하면 아래와 같이 쉽고 빠르게 사이트가 제작이 가능하다. 

필요한 요소를 html에 추가해주면

바로 이렇게 화면이 나오게된다. 

이번 강의에서 배운점은 html의 element는 복수의 class를 지닐수 있다는 것이다. 이걸몰라서 button의 색을 바꾸는 css를 만들때 .btn btn-danger {background-color: orange;} 이런식으로 실수함. 

MDN의 공식 설명!

Bootstrap Grid

부트스트랩에서 column을 추가하면 class로 col-sm-6 col-md-12 col-lg-12 같은 것들을 집어 넣을 수 있다. 각각이 의미하는바는 화면이 작을때, 중간일때, 클때 총 12칸 중 몇칸을 차지할 것인지를 의미한다. 

화면이 작을때 

화면이 중간사이즈일때

화면이 큰 사이즈 일때

Startup Landing Page

웹사이트를 만들때는 메타 태그를 항상 헤드에 추가해놓는것이 좋다.
이유는 이하의 링크를 참조.
www.w3schools.com/tags/tag_meta.asp

HTML meta tag

부트스트랩 클래스를 이용하여 글자를 대문자로 바꿀수도 있다. 

HTML 파일에 <hr> 태그를 추가하면 가로줄을 화면에 추가 할수 있다. 

현재 <hr> 예시는 별도의 CSS 파일에서 설정을 해서 사이즈와 색이 기본 <hr>과는 다르다. 

부트스트랩에서는 d-flex 클래스를 추가해서 flex 박스처럼 컨테이너를 조작 또한 가능하다.