Posts [Bootstrap] Bootstrap 설치
Post
Cancel

[Bootstrap] Bootstrap 설치

BootStrap 공식 홈페이지

https://getbootstrap.com/

1. Download버튼 클릭

스크린샷 2020-03-17 오후 6 38 40

  • 1) download받아서 로컬에 저장하는 방식
    스크린샷 2020-03-17 오후 6 40 10

  • 2)CDN을 활용하는 방식
    • CDN에는 컴파일된 css와 javascript에 대한 cached 버전을 가지고 있어서 동적으로 url을 통해 가져오는 방식
      스크린샷 2020-03-17 오후 6 41 11
  • bootstrap.css 와 boostrap.min.css 둘 중 아무거나 사용해도 상관없음
  • bootstrap.js 와 boostrap.min.js 둘 중 아무거나 사용해도 상관없음
  • min.js가 사이즈가 더 작아서 사용예정

2) Carousel템플릿 사용

  • 페이지 소스 보기로 코드 복사
  • 다운로드 받은 부트스트랩폴더 bootstrap-4.4.1-dist에 index.html생성
    스크린샷 2020-03-17 오후 6 48 36

3) 에디터로 title 변경 및 css 파일 재설정

스크린샷 2020-03-17 오후 6 58 36

4) Favicons설정 -> title옆의 이미지

  • 소스보기에서 바탕화면으로 다운로드 후 경로지정
    스크린샷 2020-03-17 오후 7 00 30
    스크린샷 2020-03-17 오후 7 06 18

5) 소스보기에서 복사해서 Carousel.css 생성 후 경로 지정

스크린샷 2020-03-17 오후 7 11 04

6) feature부분 삭제 및 footer부분 js 경로 재지정

스크린샷 2020-03-17 오후 7 15 58

7) 테스트

  • 서버에 올려놓으면 문제없이 작동하지만 로컬에 css, js파일이 있기때문에 제대로 로드를 하지 못함

  • 따라서 크롬이 로컬에 있는 파일들을 접근 할 수 있도록 설정해줘야함
  • –allow-file-access-from-files 옵션을 설정

①맥 -> 터미널로 다음과 같이 옵션을 줘서 실행

1
open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

스크린샷 2020-03-17 오후 7 46 45

②window -> 크롬 속성의 대상 부분에 다음 옵션 추가
스크린샷 2020-03-17 오후 7 43 31

8) 결과

스크린샷 2020-03-17 오후 7 46 12

참고 자료

  • http://kb.madcapsoftware.com/Content/Misc/GEN1011Z_-_Loading_local_files_in_Google_Chrome.htm
This post is licensed under CC BY 4.0 by the author.