Bootstrap 5 설치

블로그 개발 시 stylesheet 작성의 어려움을 줄이기 위해, twitter 개발진이 만든 stylesheet framework 인 부트스트랩을 설치합니다.

대표적으로 CDN을 추가 하는 방식, 파일 추가 방식 두 가지의 방식이 있습니다. 선호하는 방식으로 설치를 합니다.

그 외 각 언어별 패키지 매니저를 사용하는 방식도 있으며 자세한 내용은 링크에서 확인할 수 있습니다.

[ CDN 추가 방식 ]

<head> tag안에 <link> , <script> CDN url을 아래와 같이 추가합니다.

	
			1
2
3
4

			<!-- bootstrap5 CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- bootstrap5 Javascript-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

			cs
		

[ 파일 추가 방식 ]

STEP 1) 링크에 접속하여 압축파일을 다운로드 합니다.

STEP 2) 다운로드 한 압축파일을 압축해제 하여 프로젝트 폴더에 복사합니다.

STEP 3) <head> tag안에 <link> , <script> 폴더 위치를 추가합니다.

	
			1
2
3
4

			<!-- bootstrap5 CSS-->
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" >
<!-- bootstrap5 Javascript-->
<script src="/js/bootstrap.bundle.min.js"></script>

			cs
		

=> Bootstrap 5 설치 완료!!

[Starter template 적용 예시]

CodeIgniter 3 설치 상태에서 Bootstrap 5의 Starter template을 적용합니다.

STEP 1) view 파일을 생성합니다.

~/myblog/application/views/home.php 파일 생성
링크에서 Starter template 내용 복사/붙여넣기

STEP 2) controller 파일을 생성합니다.

~/myblog/application/controllers/welcome.php 파일을 동일 폴더에 복사
파일명을 Home.php로 변경 후 아래와 같이 내용 변경(컨트롤러 파일 이름과 class 이름을 동일하게 설정)

STEP 3) 서버에 접속 시 최초 실행되는 컨트롤러를 설정합니다.

~/myblog/application/config/routes.php -> 아래 항목의 내용 변경(컨트롤러 파일명은 대문자이지만 소문자로 기재)

SETP 4) 적용(파일 저장) 후 template 적용 상태를 확인합니다.

브라우저 실행 후 주소창에 'localhost' 또는 임시로 설정한 도메인 입력
아래와 같이 나오면 부트스트랩 starter template 적용 완료

=> Starter template 적용 완료!!

(!) 로컬 환경에서 도메인 사용하는 방법

STEP 1) 텍스트 편집기를 관리자 권한으로 실행합니다.

STEP 2) hosts 파일 선택하여 엽니다.

메뉴 > 파일(F) > 열기(O) > C:\Windows\System32\drivers\etc -> 모든파일(*.*) -> hosts 선택 -> 열기

STEP 3) 로컬 IP에 도메인 연결 내용을 추가합니다.

	
			1
2

			127.0.0.1 myblog.kr
127.0.0.1 www.myblog.kr

			cs

STEP 4) hosts 파일 저장 후 브라우저를 재실행합니다.

주소창에 'myblog.kr' 입력하여 서버에 정상 접속되면 도메인 설정 완료

비밀글