[CSS] Bootstrap

CSS Design Framework

CSS 기반 > 웹 페이지 디자인 > 틀 (도구)

 

Bootstrap 설치

https://getbootstrap.com/docs/4.6/getting-started/download/ 에서 부트스트랩을 받아 압축을 풀어준다.

작업 중인 CSS 폴더로 옮겨 부트스트랩을 추가한다.

 

bootstrap

 

작업 중인 파일에 아래 코드까지 입력한다.

 

    <!-- 부트스트랩 설치 -->
        <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>

    <!-- CDN 설치 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

 

지금 공부할 때는 어떤 것을 선택해도 상관 없지만, 사이트를 운영하는데 있어선 local, CDN 중 선택해야할 문제이다. (보통 CDN을 더 많이 선택)

min이 붙은 파일은 배포용이다. 보통 개발자들은 트래픽 줄이기 위해서 개발 후 배포할 때 min.css min.js로 바꾼다고 한다.

지금은 공부하는 중이기 때문에 일반 버전을 사용한다.

 

 

Bootstrap 기능

1. 조작 x > 기본 적용

2. 조작 O > class 제공 > 적용

3. 조작 O > 풍부한 기능 > 복잡

 

Bootstrap의 class들은 계속 변하기 때문에 외우듯 하나하나 공부하는 것은 적절하지 않다. 사용자 경험을 고려해 업그레이드 하지 않는 경향이 있다. 취업 후 회사에서 요구한다면 공부하겠지만 그 전엔 document를 띄워놓고 봐야겠다.

 

https://getbootstrap.com/docs/4.6/content/tables/

Tables

layout> content> tables

https://www.w3schools.com/

 

 

인텔리센스

확장 탭에서 아래 두 툴을 설치한다.

설치 결과