부트스트랩 CDN이란 무엇입니까?

3925 단어 cdntutorialopensourcebootstrap
부트스트랩 CDN은 콘텐츠 전송 네트워크를 사용하여 세계에서 가장 널리 사용되는 CSS 프레임워크 배포입니다. 인터넷 콘텐츠를 빠르게 전달하기 위해 함께 작동하는 지리적으로 분산된 서버 그룹입니다.

CDN을 사용하면 HTML, Javascript, CSS, 이미지 및 비디오와 같은 파일을 인터넷을 통해 빠르게 제공할 수 있습니다. 부트스트랩의 경우 메인 부트스트랩 자바스크립트 및 스타일시트 파일이 CDN 네트워크를 통해 제공됩니다.

기본적으로 Bootstrap은 이미 전 세계적으로 8백만 개 이상의 웹사이트를 지원하는 Stackpath의 CDN 네트워크를 사용할 것을 권장합니다.

CDN을 통해 부트스트랩을 사용하면 어떤 이점이 있습니까?



CDN을 통해 부트스트랩을 사용하는 것과 자체 서버에서 직접 호스팅하는 것에는 몇 가지 이점이 있습니다.
  • 웹사이트 로딩 시간 개선 - 웹사이트 방문자의 지리적 위치를 기반으로 부트스트랩의 javascript 및 스타일시트 파일을 가까운 서버에서 로드하므로 로딩 시간이 단축됩니다. 일본에서 온 방문자를 상상해 보십시오. 부트스트랩 파일이 미국에서 호스팅되는 경우 로드 시간은 아시아에 서버가 설정되어 있는 CDN이 있는 경우보다 훨씬 느립니다.
  • 대역폭 비용 감소 - Bootstrap CDN은 이미 8백만 개 이상의 웹 사이트에서 사용되기 때문에 웹 사이트 트래픽의 상당 부분이 Bootstrap 파일을 로컬 브라우저에 캐시하여 웹 사이트를 더욱 빠르게 만들 가능성이 있습니다.
  • 웹 사이트 보안 개선 - CDN을 통해 콘텐츠를 전달하면 DDoS 완화로부터 웹 사이트를 더 잘 보호할 수 있습니다.

    • 혜택이 나열되면 CDN을 통해 부트스트랩을 프로젝트에 포함하는 방법을 살펴보겠습니다.

    부트스트랩 CDN 사용 방법



    StackPath에서 제공하는 official CDN을 통해 부트스트랩 사용을 시작하려면 다음 스타일시트와 자바스크립트 파일을 포함하기만 하면 됩니다. HTML의 <head> 태그에 다음 CSS 파일을 포함합니다.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    그런 다음 <body> 태그가 끝나기 전에 jQuery, Popper.js 및 Bootstrap의 Javascript 파일을 포함합니다.

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    CDN을 통해 부트스트랩 5를 사용하는 방법



    아직 안정적인 버전의 Bootstrap은 아니지만 jQuery를 종속성으로 제거한 Bootstrap 5를 사용하여 시작하는 것이 좋습니다. HTML 템플릿의 <head> 태그에 다음 스타일시트 파일을 추가합니다.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

    마지막으로 <body> 태그의 끝에 다음 두 자바스크립트 파일을 추가합니다.

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

    부트스트랩 테마 및 템플릿



    Themesberg에서 우리free and premium Bootstrap themes and templates 중 일부를 확인하고 프로젝트에 적합한지 확인할 수 있습니다. 그것은 당신에게 많은 시간을 절약하고 전문적인 디자인과 훌륭한 작업 환경을 제공할 수 있습니다.

    각 테마는 권장되는 Gulp, Bootstrap Sass 및 BrowserSync 스택 환경을 사용합니다. 또한 Bootstrap 5를 사용하는 최신 테마는 더 이상 jQuery를 종속성으로 필요로 하지 않으므로 웹 사이트를 더 빠르고 쉽게 작업할 수 있습니다.
    BeagleBone Black 컴 파일 설치 nginx
    Spring 소스 코드 분석의 4 --- AOP 원리 와 소스 코드 분석

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage