CDN활용 css, js 라이브러리 파일 오류시 로컬파일로 대체하여 사용하는 방법 > HTML
HTML

CDN활용 css, js 라이브러리 파일 오류시 로컬파일로 대체하여 사용하는 방법

조회 24회 댓글 0건

외부파일을 읽어서 사용하는 경우에 오류가 있을 때 처리하는 방법에 대한것입니다.

이런 문제 발생 할 걱정이 되면 자신의 서버에 모두 저장하고 사용하면 됩니다.


일반적인 경우는 모두 자사의 서버에 두고 사용하기 때문에 이런것을 신경쓸 필요는 없지만 그래도 이런 방법도 있는것을 알고 있으면 좋겠지요~

아래는 먼저 읽힌것이 실패할 경우 처리 하는 방법의 예 입니다.



  <!DOCTYPE html>
  <html lang="ko">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>CDN 링크 파일 오류시 대체 파일 잘 읽히는지 확인</title>

      <!-- CSS 오류 대체  -->
      <link
        rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
        crossorigin="anonymous"
        onerror="this.onerror=null;this.href='path/to/your/local/bootstrap.min.css';"
      />

      <!-- 자바스크립트 대체 -->
      <script>
        window.jQuery ||
          document.write(
            '<script src="assets/js/vendor/jquery-2.2.4.min.js"><\/script>'
          );
      </script>
    </head>
    <body></body>
  </html>
 



위파일을 서버에 올려주고 실행을 하면 아래처럼 나옵니다. 

실패한것을 404로 확인하고 그 다음에 로컬에 있는 파일을 읽는 것을 알 수 있습니다.

요즘 라이브러리 파일이 커서 신경 쓰이거나 CDN의 장점을 활용해야 된다거나(우리나라는 좁아서 CDN의 속도에 대한 의미는 작음) 하는 경우 유용 합니다.


aa6861f8d10729c65af55482a9de8db0_1707345579_8799.png


외부CDN활용 css 와 자바스크립트(js)의 각종 라이브러리 파일 못 읽어서 오류가 발생 했을 때 로컬 파일로 대체하여 사용하는 방법에 대한 것이 었습니다.



 



  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 12건 1 페이지
  • profile_image 파일 첨부할때 사용합니다.기본이 모든 파일로 되어 있는데 특정 워드파일만 받고 싶다든지 아니면jpg 이미지만 받고 싶을때 선택을 그것만 가능하게 하는 방법에 대한 것입니다. accept 속성에 MIME 값을 넣어주면 됩니다.    <!-- 모든것을 보여줄 때는 아래처럼 하면 된다: 순서대로 오디오,동영상,이미지 -->  <input type="file" accept="audio/*">  <input type="file…
  • profile_image 부트스트랩에서는 대부분 영문의 약자를 생각하면 되면 되는데 문제는 왼쪽, 오른쪽이 아니라 시작, 끝 인것이 있다는 것이다.마진: m패딩: p * 위, 아래top: tbottom: b * 왼쪽 오른쪽 보다는 시작과 끝으로 생각하면 된다.left: sright: e * 포함이다.즉 위아래는 top, bottom이 되고 x는 left, right가 되는것이다.위아래:  y ( left / right )양옆: x (top / bottom)위와 별도로 …
  • profile_image 원하는 것은 이런것입니다.메시지를 보여주고 닫기 버튼만 있어서 닫을 수 있게 하는것이 없네요. 많이 사용할텐데 좀 만들지? 버전이 5.2까지 올라오면서 왜? 그랬을까 하는 생각이 먼저 듭니다.** 부트스트랩 모달 닫기버튼만 보이도록 하기 **<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta…
  • profile_image 부트스트랩 연습하는데 한쪽으로 쏠립니다.다운데로 버튼을 보내고 싶은데요 생각처럼 되지 않아 찾아 보아 정리 한것입니다.다른것들도 방법은 비슷합니다. 가운데 정렬하고 싶을대 말입니다. 테이블 같은것도 비슷한 원리 입니다. 부트스트랩 버튼을 가운데(중앙) 정렬하기 <div class="row">  <div class="col text-center">    <!-- <button class="btn btn-primar…
  • profile_image 빌더는 처음 사용하는 개발자에게는 상당히 유용 합니다.다운로드를 클릭해야 소스를 볼 수 있습니다.부트 스트랩 빌더https://www.layoutit.com/build 부트스트랩 레이아웃http://shoelace.io/만들어진 레레이아웃 위것 예제https://webruden.tistory.com/76화면 크기별 레이아웃https://blogpack.tistory.com/823
  • profile_image DivTable.com 이란곳에서 가져온것입니다.이 사이트 방문하면 마우스로 끌어서 쉽게 만들 수 있는 방법을 보여 줍니다.테이블은 표이기 때문에 이것으로 레이아웃을 만들지 말라는것입니다. 표 인줄 착각할 수 있기 때문에 그래서 레이아웃 짤때는 아무의미가 없는 div 사용해야 된다는 것입니다.표 형식으로 된것은 당연히 table 사용해야 되는데 이때 div 쓰면 이 또한 바보 입니다.부트스트랩 테이블https://mdbootstrap.com/d…