Story of CowHacker

부트스트랩 CDN 사용법 본문

공부/Web

부트스트랩 CDN 사용법

Cow_Hacker 2021. 1. 13. 15:46
728x90

홈페이지 제작 시 많이 사용하는 부트스트랩 사용법에 대해 알아보겠다.

 

 

 

 

 

부트스트랩의 테마 등을 사용 시 두 가지 방법이 존재한다.

 

1. 설치 후 불러오기

테마 ( CSS.. 등등 )를 직접 설치 후 테마 설치경로를 직접 입력해 테마를 불러오는 방식이다.

 

2. 테마가 있는 사이트에서 불러오기 ( CDN방식 )

테마 ( CSS.. 등등 )를 직접 설치하지 않고 테마가 있는 사이트에서 테마를 불러오는 방식이다.

 

 

* 네이버, 다음, 트위터 등등 많은 사이트들이 CDN방식을 사용한다. *

 

 

 

 

나는 CDN 방식으로 부트스트랩을 사용해보겠다.

 

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <title>test_site</title>
    </head>
    
    <body>
        <h1>test_page</h1>
    </body>
</html>

 

먼저 위와 같이 아주 간단한 html 소스코드에서 시작해보겠다.

 

 

 

 

 

bootstrapk.com/getting-started/

 

시작하기 · 부트스트랩

부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치

bootstrapk.com

 

 

 

 

 

CDN의 원리가 특정 ( 테마, CSS, 등등 이 있는 ) 사이트에서 불러온다고 했다.

불러오겠다는 소스코드가 필요하다.

위 사이트에 들어가면 코드 몇 줄이 있다.

 

 

 

 

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

위 코드를 아까 만든 간단한 html 소스코드 <head>와 </head> 사이에 넣는다.

 

 

 

 

 

이까지 CDN을 사용하는 법이었다.

 

 

 

 

 

 

 

실행을 해보겠다.

아직 기본 테마라 별 변화가 없다.

 

728x90

'공부 > Web' 카테고리의 다른 글

우분투 Apache2 기본 경로 변경  (0) 2021.01.14
부트스트랩 CDN 테마  (0) 2021.01.13
PostgreSQL과 PHP의 연동을 통해 회원 가입 및 로그인 하기  (2) 2021.01.11
PHP와 PostgreSQL 연동  (2) 2021.01.05
우분투에 PHP 설치하기  (0) 2021.01.04
'공부/Web' Related Articles more
Comments