Bootstrap 다운로드: Compiled vs. Source Code
- Compiled (컴파일된) 버전:
- 내용: 미리 컴파일된 CSS와 JS 파일들로 구성되어 있으며, 바로 프로젝트에 포함시켜 사용할 수 있음.
- 사용 목적: 빠르게 시작하고자 할 때, 별도의 수정 없이 Bootstrap을 바로 사용하고자 할 때.
- 다운로드 구성:
bootstrap.min.css,bootstrap.min.js등의 파일이 포함되어 있음.
- Source (소스) 코드:
- 내용: SASS 파일, JS 소스 파일 등이 포함되어 있으며, 커스터마이징이나 직접 컴파일을 하고자 할 때 사용.
- 사용 목적: Bootstrap의 디자인이나 동작을 세부적으로 수정하고자 할 때.
- 다운로드 구성: SASS 파일(
.scss), JS 소스 파일 등이 포함되어 있음.
Bootstrap 사용 방법
1. Compiled 버전 사용하기
- Bootstrap 다운로드 페이지에서 컴파일된 버전을 다운로드합니다.
- 다운로드한 파일을 프로젝트 폴더에 복사합니다.
- HTML 파일에서 다음과 같이 CSS와 JS 파일을 포함시킵니다:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Example</title> <link rel="stylesheet" href="path/to/bootstrap.min.css"> </head> <body> <h1>Hello, Bootstrap!</h1> <script src="path/to/bootstrap.min.js"></script> </body> </html>
장점:
- 오프라인 사용 가능: 인터넷 연결이 없어도 Bootstrap을 사용할 수 있습니다.
- 버전 관리 용이: 특정 버전의 Bootstrap 파일을 다운로드하여 사용하면, 프로젝트 내에서 동일한 버전을 유지할 수 있습니다.
- 커스터마이징 용이: 직접 다운로드한 파일을 수정하거나 커스터마이징 할 수 있습니다. 예를 들어, 필요 없는 부분을 제거하거나, 직접 컴파일하여 최적화된 파일을 생성할 수 있습니다.
- 로딩 시간 단축: 서버에 저장된 파일을 로드하기 때문에, 외부 서버로부터 파일을 불러오는 시간과 비교하여 로딩 속도가 빠를 수 있습니다.
단점:
- 초기 설정 번거로움: 파일을 다운로드하고, 프로젝트에 포함시키는 과정이 다소 번거로울 수 있습니다.
- 파일 크기 증가: 프로젝트에 직접 파일을 포함시키면, 프로젝트의 크기가 커질 수 있습니다.
2. CDN 사용하기
CDN(Content Delivery Network)을 사용하면 파일을 다운로드하지 않고도 웹에서 바로 Bootstrap을 사용할 수 있습니다. CDN 링크를 HTML 파일에 포함시키기만 하면 됩니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Example</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <h1>Hello, Bootstrap!</h1> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
장점:
- 간편함: HTML 파일에 몇 줄의 링크만 추가하면 되므로 설정이 매우 간편합니다.
- 최신 버전 사용 가능: 항상 최신 버전의 Bootstrap을 사용할 수 있습니다.
- 캐시 활용: CDN을 사용하면, 브라우저가 이미 캐시된 파일을 사용할 수 있어 로딩 속도가 빨라질 수 있습니다. 특히, 많은 사이트들이 동일한 CDN을 사용하기 때문에 사용자 브라우저에 캐시되어 있을 가능성이 높습니다.
- 서버 부하 감소: 파일이 외부 서버(CDN)에 호스팅되기 때문에, 사용자의 서버 부하를 줄일 수 있습니다.
단점:
- 인터넷 의존성: 인터넷 연결이 없으면 Bootstrap을 사용할 수 없습니다.
- 버전 관리 어려움: CDN에서 제공하는 최신 버전을 사용할 경우, 특정 버전을 유지하는 것이 어려울 수 있습니다.
- 외부 서버 의존성: 외부 서버(CDN)에서 파일을 로드해야 하므로, 외부 서버의 상태에 따라 로딩 시간이 영향을 받을 수 있습니다. 예를 들어, CDN 서버가 느리거나 다운되면 영향을 받을 수 있습니다.
답글 남기기