Admin Dashboard 만들기 part 1. 준비하기 ( bootstrap library, style.css, script.js )

Admin Dashboard 만들기 part 1. 준비하기 

 

이번에는 부트스트랩을 이용해서 대쉬보드 관리페이지를 만들 예정입니다. 이를 위해서 필요한 컴포넌트는 다음과 같습니다. 

- navbar / sidebar

- card 

- table 

- accordion 

 

이번 프로젝트를 위해서 새로운 폴더를 생성하고 index.html 파일을 생성한다. 

 

 

다음은 부트스트랩 사용을 위해서 기본 코드를 추가한다. getbootstrap.com 사이트에서 start template 를 복사해서 사용하면된다. 

css 와 javascript 를 위해서 style.css / script.js 파일을 생성한다. 현재는 아무런 내용이 없는 빈 파일들이다. 

새로생성한 style.css / script.js 를 index.html 에 추가한다.

 

fontawesome 아이콘 사용을 위해서 library 추가한다. 

 

fontawesome 사이트에 로그인해서  font Awesome CDN 을 클릭하면 소스코드를 복사할수 있다. 

 

링크 정보를 복사해서 index.html 에 추가한다. 

 

다음은 google font 를 등록한다. fonts.google.com 에서 원하는 폰트를 선택해서 추가한다. Admin Dash 에서는 Monteserrat 를 사용한다. 

 

오른쪽에 있는 링크정보를 복사해서 index.html 에 추가한다. 

마지막으로 브라우저로 index.html 파일을 열어보자. 

 

이제 모든 준비과정이 끝났다. 이제 bootstrap 모듈을 하나씩 추가하면된다. 

끝.