[Bootstrap] Bootstrap 적용 방법

Bootstrap

웹 개발을 위한 인기 있는 프런트엔드 프레임워크로, HTML, CSS, JavaScript를 사용하여 반응형 웹사이트를 쉽게 만들 수 있도록 도와준다.
 

Bootstrap 사용하기

다음 링크를 통해 공식 홈페이지에 방문한다.
https://getbootstrap.kr/

Bootstrap

 
부트스트랩은 두 가지 방식으로 사용할 수 있다.

패키지 관리자	CDN
소프트웨어 패키지의 설치, 업데이트, 구성 및 삭제를 관리하는 도구	전 세계 여러 서버에 콘텐츠를 분산 배치하여 사용자에게 더 빠르고 효율적으로 데이터를 제공하는 네트워크
패키지를 로컬 프로젝트 디렉터리에 다운로드하는 방식	해당 파일의 URL을 HTML 문서에 삽입하여 사용하는 방식

 

 

패키지 관리자로 시작하기

패키지 관리자를 사용하기 위해서 Bootstrap v5.3.3를 다운로드한다.
파일의 압축을 풀고 다음 파일들을 나의 작업 파일에 복사한다.
 
* min : minified를 의미. 즉, 이 파일은 압축된 버전이라는 뜻

 
내 작업 파일 문서에 link 태그를 이용해 코드를 삽입하면 Bootstrap에서 제공되는 코드를 사용할 수 있다.
나의 css 시트가 우선되어야 하므로 나의 css 시트를 항상 Bootstrap 시트 다음에 삽입하도록 한다.

 

CDN으로 시작하기

CDN으로 포함시키기에 있는 코드 두 개를 나의 작업 파일에 복사한다.
상단에 있는 코드가 CSS 코드이고, 하단의 코드가 JS 코드이다.

이렇게 두 가지 방식을 이용하면 Bootstrap 사이트의 문서에 명시되어 있는 기능들을 사용할 수 있다.
https://getbootstrap.kr/docs/5.3/getting-started/introduction/

Bootstrap 시작하기